ODBIERZ TWÓJ BONUS :: »

React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL

Podstawowe informacje:
Czas trwania: 05:52:07
Poziom: podstawowy
Autor: Albert Strzyżewski
Liczba lekcji: 54
Technologia: Gatsby 5.12, React 18.2
Dla firm
Rozwiń umiejętności swoich pracowników dzięki kursom video
Dowiedz się więcej
  • Monitorowanie postępów pracowników. Przejrzyste raporty i imienne certyfikaty ukończenia kursów
  • Atrakcyjne rabaty dla zespołów. Im więcej pracowników liczy zespół, tym większy uzyskasz rabat
  • Doradztwo w wyborze tematyki szkoleń. Mamy setki kursów, dostosujemy program nauczania pod Twój zespół
Indywidualnie
104,30 zł 149,00 zł (-30%)
75,99 zł najniższa cena z 30 dni Dodaj do koszyka Za zakup otrzymasz 104 punktów
Korzyści:
  • Certyfikat ukończenia
  • Materiały dodatkowe do kursu
  • Test online
  • Dożywotni dostęp
  • Dostęp w aplikacji (także offline)
  • Napisy w języku polskim
Ścieżki rozwoju w helion.pl

Czego się nauczysz?

  • Budowania nowoczesnych stron internetowych w GatsbyJS z użyciem React
  • Konfigurowania projektu i zarządzania nim w systemie kontroli wersji Git/GitHub
  • Pobierania danych przy użyciu GraphQL i pracy z headless CMS
  • Tworzenia dynamicznych i statycznych stron z wykorzystaniem GatsbyJS
  • Stylowania aplikacji z użyciem styled-components i Emotion
  • Dodawania animacji i efektów interaktywnych z biblioteką react-slick
  • Optymalizowania stron pod kątem SEO i wydajności
  • Hostowania gotowych projektów w serwisie Netlify

Spis lekcji

1. Wprowadzenie 00:29:58
1.1. Co to takiego ten GatsbyJS?
00:02:19
1.2. Instalajca oprogramowania
00:04:35
1.3. Stworzenie nowego projektu
00:02:26
1.4. Jak uruchomić środowisko deweloperskie?
00:03:58
1.5. Struktura folderów
00:05:32
1.6. System kontroli wersji
00:07:50
1.7. Omówienie layoutu
OGLĄDAJ » 00:03:18
2. Headless CMS i SEO 00:37:45
2.1. Co to jest headless CMS?
00:02:13
2.2. Porównanie headless CMS-ów
00:02:48
2.3. Czym jest SEO?
00:01:58
2.4. Konfiguracja datoCMS-a
00:05:44
2.5. Instalacja paczek do SEO
00:15:53
2.6. Stworzenie komponentu do SEO
00:09:09
3. Wybór hostingu i dodatkowa konfiguracja 00:16:36
3.1. Konfiguracja Netlify
00:04:29
3.2. Global Style
00:07:13
3.3. Jak poprawnie załączyć kroje czcionki?
OGLĄDAJ » 00:04:54
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
7.1. Wszystkie realizacje - struktura
00:12:18
7.2. Generowanie stron dynamicznych
00:07:04
7.3. Struktura strony realizacji
00:08:34
7.4. Active class name
00:02:13
7.5. Wyłączanie menu po przejściu do nowej strony
00:01:41
7.6. Zakończenie kursu
00:02:28

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

O autorze kursu video

Albert Strzyżewski – inżynier informatyk, absolwent Politechniki Lubelskiej. Od 2021 roku pracuje jako Salesforce/React developer. Po godzinach tworzy poradniki o programowaniu na YouTube albo spędza czas na boisku piłkarskim.

Oceny i opinie klientów: React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL Albert Strzyżewski (0)

Informacja o opiniach
Weryfikacja opinii następuje na podstawie historii zamowień na koncie Użytkownika umiejszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniającej do uzyskania rabatu w ramach Programu Kadr.

Szczegóły kursu

Dane producenta » Dane producenta:

Helion SA
ul. Kościuszki 1C
41-100 Gliwice
e-mail: gpsr@helion.pl
Format: Online
Data aktualizacji: 2024-02-20
ISBN: 978-83-289-0851-2, 9788328908512
Numer z katalogu: 223316

Videopoint - inne kursy

Kurs video
104,30 zł
Dodaj do koszyka
Zamknij Pobierz aplikację mobilną Helion