Masz już konto? Zaloguj się

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

# 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.

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

    Wprowadzenie

    Podgląd lekcji

    4min

    Lekcja powitalna

    Podgląd lekcji

    5min

    Jak działają reactowe technologie?

    Podgląd lekcji

    16min

    Kiedy wybrać Gatsbyego?

    11min

  • Podstawy Gatsbyego

    42min

    Instalacja

    5min

    Struktura projektu

    Podgląd lekcji

    9min

    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

Bio
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!
Inne kursy tego autora
Gatsby.js React React React

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

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

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