Kurs Gatsby.js

Wprowadzenie

Lekcje
Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

24 ocen

Wprowadzenie

# Wielki Gatsby Gatsby.js wdarł się na frontendowe salony niczym prawdziwa gwiazda! Unikalne rozwiązania dające ogromną swobodę developerom, w połączeniu z potężnym ekosystemem reactowym sprawiły, że już dawno żadna technologia nie wzbudziła takiego entuzjazmu i zainteresowania. Bądź na bieżąco z najnowszymi frontendowymi trendami i dowiedz się, na czym polega sekret tej fenomenalnej technologii. W kursie dowiesz się w jaki sposób poprawnie używać Gatsbyego, jak działa jego routing, w jaki sposób obsługiwać obrazki przy użyciu GraphQL, a także jak budować warstwę danych zasilającą aplikację w odpowiednie treści.

  1. Różnice między Gatsby.js, Next.js a React
  2. Budowanie strony w Gatsby.js
  3. Wykorzystanie bogatego ekosystemu pluginów
  4. Routing i data layer w Gatsby
  5. Tworzenie globalnych layoutów
  6. Podstawy GraphQL
  7. Wykorzystanie GraphQL do optymalizacji obrazków
  8. Tworzenie bloga w plikach MDX
  9. Tworzenie strony za pomocą Gatsby Node API
  10. Wykorzystanie headless CMS (DatoCMS)
  11. Stworzenie narzędzia interpretującego dane z CMS
  12. Wdrożenie strony przez Netlify

Czy to właściwie jest React?

I tak i nie! Gatsby to faktycznie React wzbogacony o pewne supermoce. Na początku kursu dowiesz się, jak poprawnie ich używać. Opowiem Ci w jaki sposób zaszyto Reach Router we wnętrze Gatsbyego – zobaczysz, że to bardzo intuicyjne i wygodne rozwiązanie. Ponadto opowiem Ci, w jaki sposób tworzyć uniwersalne, globalne style i layouty dla naszej aplikacji, aby zaoszczędzić sobie pracy. W tym wszystkim pomogą nam pluginy przygotowane specjalnie dla Gatsbyego (psst! Czy wiesz, że Gatsby posiada ich ponad 1500?).

Poznaj potężny GraphQL

Nie masz konta na fejsie? Nie szkodzi! Facebook stworzył nie tylko popularną platformę społecznością (i Reacta 😎), ale także przełomową specyfikację dla GraphQL – języka służącego do komunikacji między klientem a serwerem. To właśnie GraphQL zasila Gatsbyego w warstwę danych. Nie ważne czy mówimy o obrazkach, plikach markdown, json, yaml czy po prostu API – aby to wszystko ze sobą pogodzić musisz znać GraphQL. A ja w tym kursie pokażę Ci, że korzystanie z niego to czysta przyjemność.

Bez obrazy... ale obrazy w GraphQL?!

Na początku pomysł importowania obrazów przez GraphQL może Ci się wydawać przerostem formy nad treścią. Dlatego poświęciłem w tym kursie cały dział na to, aby pokazać Ci, jak potężne możliwości stoją przed developerem wyposażonym w GraphQL, Sharp Image Transformer oraz Gatsbyego. Zapomnij o skalowaniu, przerabianiu i dostosowywaniu obrazków ręcznie w programach graficznych. Sprytne rozwiązania w Gatsbym pozwolą Ci za pomocą paru linijek zoptymalizować zasoby wizualne dla twojej strony.

O blogowie!

Zarządzanie treścią to krytyczny punkt wielu produktów cyfrowych – z jednej strony CMS (content management system) musi być użyteczny dla developera przygotowującego całą strukturę treści, ale z drugiej strony ich końcowym użytkownikiem zawsze jest edytor, który nie musi znać się na programowaniu. W tym kursie pokażę Ci, jak w dosłownie kilku krokach stworzyć wygodną w użyciu strukturę dla bloga w oparciu o pliki markdown. Z małym udziwnieniem. Będą to pliki MDX łączące prostotę plików markdown z potężnymi możliwościami Reacta.

Nie trać głowy dla CMS

HeadlessCMS to podejście, które może przywoływać na myśl horrory klasy B, natomiast ich działanie przyprawia o zachwyt rodem z komedii romantycznej. Gdy zobaczysz jak proste, intuicyjne i wygodne (zarówno dla developera i edytora) jest korzystanie z podejścia headless, już nigdy nie wrócisz do klasycznych CMS-ów. W tym kursie pokażę Ci to na przykładzie fenomenalnego produktu jakim jest DatoCMS, którego odkryłem podczas budowania dużej struktury informacji dla strony mojej firmy.

Start za 3... 2... 1!

Deployment strony w Gatsbym zajmuje dosłownie kilka sekund, zwłaszcza jeśli użyjemy do tego odpowiednich narzędzi. W tym kursie dowiesz się, w jaki sposób Gatsby przygotowuje zasoby przed wysłaniem ich na serwer, skąd biorą się dane w Gatsbym oraz w jaki sposób wdrożyć gotową stronę za pomocą serwisu Netlify.

Dla kogo jest ten kurs?

Ten kurs powstał z myślą o osobach, które chcą być na bieżąco ze zmieniającym się ekosystemem frontendowym. Kurs koncentruje się nie tylko na Gatsby.js, ale także na technologiach orbitujących wokół tej technologii, korespondujących z nowym trendem nazwanym JAMStack.

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
31 minut

Formularze w Gatsby.js

Z Firebase i SendGrid

W tym Warsztacie w ciągu zaledwie 30 minut dowiesz się, jak stworzyć prosty i bezpieczny mechanizm wysyłania maili przez formularz osadzony na stronie internetowej. A wystarczą do tego trzy kroki - przekonaj się jakie!

Adam Romanski

6 godzin 6 minut

Kurs React

Techniki Zaawansowane

Higher Order Components, Render Props, Compound Components... React pełen jest wzorców i narzędzi, których nazwy potrafią przyprawić o ból głowy. Właśnie po to, by uniknąć tego przytłoczenia, został przygotowany ten kurs. Skupimy się w nim praktycznie wyłącznie na React'cie, który mimo że jest niepozorną biblioteką, to kryje w sobie ogromny potencjał i jeszcze większą swobodę działania dla developera. W dużych, komercyjnych aplikacjach wzorce, o których wspominamy, pojawiają się niesłychanie często, a ich poprawne zrozumienie to jedyna droga do tego, abyśmy nie czuli się nieswojo patrząc na nieco bardziej skomplikowany kod.

Adam Romanski

6 godzin 51 minut

Kurs React

w Praktyce

Wiele materiałów dostępnych w sieci zawiera wskazówki jak używać Reacta, jednak brakuje im praktycznego wymiaru. Stosowanie tej technologii w prawdziwym projekcie nieco różni się od prostych przykładów, które na ogół możemy znaleźć. Tak powstał pomysł na kurs React w Praktyce, w którym dowiesz się, z jakich technologii React developerzy korzystają na co dzień, jak konfigurują projekty, jak radzą sobie z problemami zarówno wynikającymi ze skomplikowania interfejsu, jak i logiki biznesowej zawartej w aplikacji.

Adam Romanski

30 minut

Hooks w React

Twórcy Reacta już jakiś czas temu oddali w ręce developerów potężne hooksy – rozwiązanie, które pewnego dnia może zastąpi komponenty klasowe. Zanim jednak wybiegniemy w przyszłość aż tak daleko, warto je po prostu poznać i zrozumieć. Zapraszam na warsztaty o podstawach React Hooks, podczas których pokażę kilka praktycznych zastosowań hooksów, dzięki którym lepiej zrozumiesz, czym tak naprawdę są i dlaczego tak wiele osób o nich mówi. Dowiesz się w jaki sposób możesz tworzyć stan w komponentach funkcyjnych przy użyciu hooka useState(), a także pokażę Ci, jak w prosty sposób możesz wykorzystywać useRef() do tworzenia refów, tak przydatnych podczas pracy z bibliotekami manipulującymi DOM.

Adam Romanski

4 godziny 55 minut

Kurs React

od Podstaw

Od kilku lat React niepodzielnie króluje wśród frameworków JavaScript. Ogromna swoboda jaką daje, intuicyjny sposób tworzenia komponentów i potężny ekosystem wspierający developera niemal w każdej sytuacji, to niewątpliwie największe zalety tej technologii. W tym kursie dowiesz się, w jaki sposób wycisnąć w Reacta jak najwięcej. Odkryjesz jego prawdziwy potencjał i dogłębnie poznasz zagadnienia, które stanowią trzon tego frameworka. Aby zrozumieć rzeczy zaawansowane, należy solidnie opanować podstawy – w tym własnie chcę Ci pomóc.

Adam Romanski

Autor: Adam Romanski

Frontend developer & YouTube Creator

Cześć! Nazywam się Adam Romański i sam siebie nazywam kreatywnym front-endowcem, ponieważ zanim dołączyłem do branży IT, wiele lat spędziłem pracując jako copywriter. Na co dzień pracuję w jednym z największych software house'ów w Polsce, realizując ambitne projekty dla zagranicznych klientów. Dzięki tej pracy zdobyłem sporo doświadczenia, którym chętnie się z Tobą dzielę. W moim przypadku pasja do uczenia innych przejawia się także w inny sposób. „Po godzinach” zajmuję się vlogiem Hello Roman na YouTube, który w kilka miesięcy zdobył prawdziwą rzeszę fanów. Możesz go odwiedzić klikając w ten link: https://youtube.com/helloroman Do tej pory zrealizowałem wiele projektów zarówno w React, Vue, Gatsby jak i innych technologiach, co pozwoliło mi nabrać pewności siebie a także poszerzyć nieco moje perspektywy. Liczę, że moje kursy dadzą Ci to samo! To dla mnie ogromne wyróżnienie, lecz także ogromna odpowiedzialność. Za pośrednictwem vloga opowiadam o moich przemyśleniach dotyczących programowania, branży IT, a także tworzę materiały z praktycznymi, technicznymi poradami. Do tej pory zrealizowałem wiele projektów zarówno w React, Vue, Gatsby jak i innych technologiach, co pozwoliło mi nabrać pewności siebie a także poszerzyć nieco moje perspektywy. Liczę, że moje kursy dadzą Ci to samo!

https://youtube.com/helloroman

Recenzje Kurs Gatsby.js

5

24 dodanych ocen

2020-02-26

Kurs bardzo przeciętny, raczej tylko dla kompletnych amatorów programowania. Co prawda wszystko wyjaśniane jest przejrzyście, forma kursu bardzo poprawna i przyjemna w oglądaniu i słuchaniu. Brakuje mi w nim jednak treści. Owszem, są podstawy, ale brakuje rozwinięcia poszczególnych tematów. W zasadzie nie ma nic o tworzeniu dynamicznych stron. Fajnie, że autor pokazał nowy CMS, ale jednak dodałbym przynajmniej podstawy Contenful lub Strapi, ponieważ te CMSy są darmowe i najczęściej wykorzystywane. Nie ma informacji o zapisywaniu danych (tak wiem, że jest dokumentacja, ale jakbym wołał docsy i książki, to bym nie kupował kursu video). Opisanych zostało raptem kilka pluginów, a jest dużo więcej ciekawych i takich "must have", które fajnie by było przynajmniej przybliżyć użytkownikowi. Zero informacji o rzeczach dookoła projektu (DevOps), jakieś testowanie e2e tego (przynajmniej info o narzędziach i podstawowa konfiguracja, bo ona trochę się różni od czystego Reacta). Myślałem o ocenie 3.5, ale takiej nie ma, dlatego dam 4 (trójka byłaby zbyt okrutna).

Krzysztof Kuriata

2020-04-19

Kurs ok choć brakuje zagadnień bardziej zaawansowanych, mam nadzieję, że doczekamy się drugiej części albo rozwinięcia...

Krzysztof Branecki

2020-02-12

Bardzo dobrze merytorycznie przygotowany kurs. Pozostaje jednak mały niedosyt po tych niecałych 5 godzinach :D Czekam na kolejną część :D

Paweł Turkot

2020-03-31

Super kurs, czekam na więcej materiałów.

Dawid Piwko

2020-03-07

Polecam

Łukasz Cendrowski

2020-02-14

Kurs polecam, szkoda ze to już koniec

Marek Gluch

2020-02-16

Polecam

Arkadiusz Kuptz

2020-03-01

Super kurs, kiedy II część ? :)

MACIEJ FIAŁKOWSKI

2020-02-20

super kurs ;]

Marcel Bednarz

2020-03-12

Kurs rewelacyjny!!!

Dariusz Mazur

2020-02-14

Bardzo dobry kurs.

Rafał

2020-03-24

Jak dla mnie, który jest początkującym programistą MEGA!. Pełny profesjonalizm jeżeli chodzi o przekazywanie merytorycznej wiedzy. Polecam :)

Krzysztof Grudzień

2020-03-24

Jak dla mnie, który jest początkującym programistą MEGA!. Pełny profesjonalizm jeżeli chodzi o przekazywanie merytorycznej wiedzy. Polecam :)

Krzysztof Grudzień

2020-03-24

Super Kurs!!! Gorąco polecam :)

Krzysztof Grudzień

2020-03-24

Super Kurs!!! Gorąco polecam :)

Krzysztof Grudzień

2020-03-09

Świetny kurs. Polecam

Adam Kołtun

2020-03-17

Świetny kurs, polecam!

Patryk Mróz

2020-02-15

Player na eduweb ma bugi, na githubie nie ma takie repozytorium. Kurs prowadzony za szybko

Michał

2020-03-13

Kurs mi się podobał i trochę nauczył aczkolwiek odczuwam po nim niedosyt, fajnie byłoby zobaczyć kolejną część :D

Jakub Kozakiewicz

2020-03-31

bardzo dobry kurs, polecam wszystkim

Mariusz Krawczyk

2020-04-10

Dla początkującego programisty, która zna podstawy reacta i js, kurs był bardzo wartościowy. Czuje się wprowadzony do gatsbiego i śmiało mógłbym samodzielnie napisać w nim prostą stronkę :)

Michał Modrzejewski

2020-04-01

genialny prosty kurs

Piotr Czajkowski

2020-04-01

Super kurs

Krystian

2020-05-19

Dobra robota <3

Piotr

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje
Wykup w abonamencie od 79zł
Przetestuj za darmo przez 7 dni!

Autor: Adam Romanski

Czas: 4 godziny 29 minut

Wersja: 2.19.12+

Aktualizacja: 2020-05-26

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wstęp

  • Wprowadzenie

  • Lekcja powitalna

  • Jak działają reactowe technologie?

  • Kiedy wybrać Gatsbyego?

Podstawy Gatsbyego

  • Instalacja

  • Struktura projektu

  • Przygotowanie projektu do pracy

  • Importowanie google fonts i tworzenie nawigacji

  • Tworzenie globalnego layoutu

Wstęp do GraphQL

  • Czym jest GraphQL?

  • Jak Gatsby wykorzystuje GraphQL?

Obrazki w Gatsbym

  • Sposoby ładowania obrazków

  • Stylowanie strony głównej

  • Jak działa sharp transformer?

  • Jak działa Gatsby Image?

Tworzenie bloga w Markdown

  • Czym jest Static Query?

  • Czym jest MDX?

  • Tworzymy fundament dla bloga

  • Miniatura postu w MDX

  • Programatyczne tworzenie strony

  • Wstrzykiwanie danych za pomocą Gatsby Node API

Tworzenie bloga w headless CMS

  • Czym jest DatoCMS?

  • Łączenie Gatsby z DatoCMS

  • Interpretowanie danych z CMS

Wdrożenie strony

  • Deployment strony opartej o Gatsby

Podsumowanie

  • Podsumowanie kursu