Kurs Gatsby.js
Zobacz jak generować statyczne strony www z pomocą Gatsby.js w frameworku React.
26 lekcji
4h 29min
5 (9 oceny)
Gatsby.js - Szybkie i Nowoczesne Strony
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.
Czego się nauczysz?
-
Różnice między Gatsby.js, Next.js a React
-
Budowanie strony w Gatsby.js
-
Wykorzystanie bogatego ekosystemu pluginów
-
Routing i data layer w Gatsby
-
Tworzenie globalnych layoutów
-
Podstawy GraphQL
-
Wykorzystanie GraphQL do optymalizacji obrazków
-
Tworzenie bloga w plikach MDX
-
Tworzenie strony za pomocą Gatsby Node API
-
Wykorzystanie headless CMS (DatoCMS)
-
Stworzenie narzędzia interpretującego dane z CMS
-
Wdrożenie strony przez Netlify
Zawartość
Gatsby.js
8 rozdziały 26 lekcji 4h 29min
-
Wstęp
36min
Kiedy wybrać Gatsbyego?
11min
-
Podstawy Gatsbyego
42min
Instalacja
5min
Przygotowanie projektu do pracy
10min
Importowanie google fonts i tworzenie nawigacji
11min
Tworzenie globalnego layoutu
8min
-
Wstęp do GraphQL
22min
Czym jest GraphQL?
10min
Jak Gatsby wykorzystuje GraphQL?
12min
-
Obrazki w Gatsbym
43min
Sposoby ładowania obrazków
12min
Stylowanie strony głównej
5min
Jak działa sharp transformer?
12min
Jak działa Gatsby Image?
13min
-
Tworzenie bloga w Markdown
1h 7min
Czym jest Static Query?
10min
Czym jest MDX?
6min
Tworzymy fundament dla bloga
14min
Miniatura postu w MDX
9min
Programatyczne tworzenie strony
11min
Wstrzykiwanie danych za pomocą Gatsby Node API
18min
-
Tworzenie bloga w headless CMS
48min
Czym jest DatoCMS?
17min
Łączenie Gatsby z DatoCMS
13min
Interpretowanie danych z CMS
18min
-
Wdrożenie strony
8min
Deployment strony opartej o Gatsby
8min
-
Podsumowanie
4min
Podsumowanie kursu
4min
Autor kursu
Adam Romanski
Frontend developer & YouTube Creator
Średnia ocen autora: 5
Dołącz do ponad 10 tys. zadowolonych z naszych kursów
Dobry kurs na obeznanie się z Gatsbym
Michał Tomaszek
21 stycznia 2021
Damian Adamus
28 stycznia 2021
Dziękuję za ten kurs, wiele mnie nauczył. Brakło niestety w nim działu poświęconemu formularzowi. Co do graphql to samo rozwiązanie wybieranie danych rewelacyjne. Jednak w kodzie to jakaś zmora. Wygląda strasznie i jest nieczytelny. Poza tym netlify naprawdę niesamowity, DatoCMS również. Ogólnie bardzo szybko leciałeś z tematem, ale to co trwało 10 minut , u mnie 30 (i więcej) gdyż samodzielnie musiałem wszystko przetworzyć więc ta szybkość nie była taka straszna. Było dużo cofania i pauzowania, ale to chyba normalne. Mam plany z Gatsbym plany i jeszcze raz dzięki za pomoc.
Paweł
7 lutego 2021
Polecam
Marcin Rycko
10 lutego 2021
Dominik Kras
2 marca 2021
Kurs prowadzony za szybko. Słabe tłumaczenie, im dalej tym gorzej i szybciej. Kurs NET NINJA za darmo i 10 razy lepszy.
Aleksandra
6 kwietnia 2021
Patrycja Petryk
17 kwietnia 2021
Adam
17 lipca 2021
Imię Nazwisko
13 października 2023
Kurs Gatsby.js
-
26 lekcji wideo
-
4h 29min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
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!
Wiedza ekspertów
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.
Praktyczne przykłady
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ń.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.
Adam Romański
helloroman.com
Zacznij naukę w Gatsby.js
-
26 lekcji wideo
-
4h 29min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowoczesny React
Michał Jabłoński
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk