- Autor:
- Długość
- liczba lekcji: 54, czas trwania: 05:52:07
- Ocena
Kurs video
React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL
- Wydawnictwo:
- Videopoint
- Wersja:
- Online
- Czas trwania:
- 5 godz. 52 min.
- Technologia:
- Gatsby 5.12, React 18.2
- Ocena:
Spis lekcji kursu video
-
1. Wprowadzenie 00:29:58
-
2. Headless CMS i SEO 00:37:45
-
3. Wybór hostingu i dodatkowa konfiguracja 00:16:36
-
4. Podstawy tworzenia komponentów 01:06:30
- 4.1. Podejście do tworzenia komponentów 00:01:48
- 4.2. Hook useState 00:04:00
- 4.3. Input component 00:11:10
- 4.4. Stworzenie komponentu dla przycisku 00:07:10
- 4.5. Focus & visible w przycisku 00:03:45
- 4.6. Link component 00:03:36
- 4.7. Uproszczenie kodu 00:02:03
- 4.8. Hamburger button 00:13:03
- 4.9. FAQ Element 00:12:19
- 4.10. Layout component 00:02:51
- 4.11. Gatsby-ssr i gatsby-browser 00:04:45
-
5. Tworzenie sekcji strony 01:42:54
- 5.1. Podstawowe tworzenie modeli w DatoCMS 00:08:40
- 5.2. Jak pobierać dane za pomocą GraphQL 00:04:19
- 5.3. Struktura HeroSection 00:09:43
- 5.4. Style dla HeroSection 00:04:02
- 5.5. Stworzenie nawigacji 00:08:30
- 5.6. Header 00:08:48
- 5.7. Struktura danych dla sekcji strony głównej 00:05:36
- 5.8. Struktura komponentów dla drugiej i trzeciej sekcji 00:09:08
- 5.9. Style dla drugiej i trzeciej sekcji 00:11:02
- 5.10. Jak ograniczyć szerokość całej strony 00:02:20
- 5.11. Struktura realizacji w DatoCMS 00:07:26
- 5.12. Realization Card 00:05:28
- 5.13. Struktura komponentu naszych realizacji 00:17:52
-
6. Kontakt i FAQ 01:04:06
- 6.1. Content dla kontaktu 00:02:29
- 6.2. Content dla FAQ 00:02:33
- 6.3. Struktura sekcji kontakt 00:19:48
- 6.4. Podpięcie formularza w Netlify 00:07:50
- 6.5. Struktura i style dla sekcji FAQ 00:10:44
- 6.6. Style i struktura dla strony Kontakt 00:10:09
- 6.7. Content dla stopki 00:01:41
- 6.8. Style i struktura dla stopki 00:08:52
-
7. Wszystkie realizacje 00:34:18
Opis
kursu video
:
React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL
Obierz kurs na GatsbyJS
Znany i uwielbiany przez programistów React doczekał się potomka. Tak bowiem można by nazwać Gatsby.js – generator stron statycznych bazujący na bibliotece React. Gatsby używa jej jako swojej podstawy do budowania interfejsów użytkownika. Dalsze podobieństwa to między innymi struktura projektu i zastosowanie komponentów zapewniających modularność i reużywalność kodu. Co zatem nowego oferuje Gatsby? Przede wszystkim unikalne funkcje, takie jak generowanie statyczne (ang. static site generation – SSG) i własne koncepcje zarządzania stanem. Framework ma także rozbudowany ekosystem pluginów i obsługuje headless CMS. W praktyce wszystkie te elementy są kluczowe dla tworzenia szybkich, wydajnych stron internetowych i optymalizacji SEO. Pomimo statycznego generowania Gatsby umożliwia również budowanie dynamicznych stron i dodawanie interaktywności dzięki właściwości client side routing.
W trakcie naszego profesjonalnego szkolenia:
- Nauczysz się budować komponenty w GatsbyJS
- Dowiesz się, jak prawidłowo skonfigurować SEO strony WWW
- Zaznajomisz się z procesem hostowania aplikacji tworzonej przy użyciu GatsbyJS
- Nauczysz się tworzyć style na bazie styled-components
- Utworzysz animacje za pomocą biblioteki react-slick
- Poznasz zasady dynamicznego generowania stron
- Opanujesz tworzenie modeli w headless CMS
- Nauczysz się pobierać dane za pomocą GraphQL
Szkolenie React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL ukończysz na poziomie średnio zaawansowanym. Wszystkie zagadnienia zostaną omówione krok po kroku, jednak dla efektywnego wykorzystania możliwości Gatsby przyda się podstawowa znajomość Reacta. Nabędziesz umiejętności tworzenia strony, od podstawowej konfiguracji aż po umieszczenie jej na darmowym hostingu Netlify, by była dostępna w sieci. Na początek dowiesz się, jak skonfigurować projekt i jak pracować z systemem kontroli wersji. Poznasz system zarządzania treścią – headless CMS – i będący jego odmianą DatoCMS, służący do kreowania contentu niezależnie od wyglądu strony. Nauczysz się tworzyć komponenty i zarządzać stanem aplikacji. Dowiesz się, jak zastosować GraphQL w komponentach Gatsby.js do pobierania danych z DatoCMS. Utworzysz warstwę wizualną za pomocą styled-components i nauczysz się generować animacje z react-slick. Znajomość takiego stosu technologicznego pozwoli Ci budować efektywne i profesjonalne strony internetowe.
W ostatnich latach technologia React podbiła serca developerów i stała się jedną z najpopularniejszych na świecie. Wraz z solidnym i szybkim rozwojem musiały się pojawić kolejne rozszerzenia do tej technologii. W ramach tego kursu zajmiemy się jednym z nich, czyli Gatsby.js. Otwórz swoje środowisko, w którym piszesz kod, i pisz razem ze mną, bez działania niczego się nie nauczymy. Zapraszam!
Wybrane bestsellery
Videopoint - inne kursy
Dzięki opcji "Druk na żądanie" do sprzedaży wracają tytuły Grupy Helion, które cieszyły sie dużym zainteresowaniem, a których nakład został wyprzedany.
Dla naszych Czytelników wydrukowaliśmy dodatkową pulę egzemplarzy w technice druku cyfrowego.
Co powinieneś wiedzieć o usłudze "Druk na żądanie":
- usługa obejmuje tylko widoczną poniżej listę tytułów, którą na bieżąco aktualizujemy;
- cena książki może być wyższa od początkowej ceny detalicznej, co jest spowodowane kosztami druku cyfrowego (wyższymi niż koszty tradycyjnego druku offsetowego). Obowiązująca cena jest zawsze podawana na stronie WWW książki;
- zawartość książki wraz z dodatkami (płyta CD, DVD) odpowiada jej pierwotnemu wydaniu i jest w pełni komplementarna;
- usługa nie obejmuje książek w kolorze.
Masz pytanie o konkretny tytuł? Napisz do nas: sklep@helion.pl
Książka drukowana
Oceny i opinie klientów: React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL Albert Strzyżewski (0) Weryfikacja opinii następuję na podstawie historii zamówień na koncie Użytkownika umieszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniające do uzyskania rabatu w ramach Programu Punktowego.