Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 13/ 26Stylowanie strony głównej
Gatsby.js: Stylowanie strony głównej
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
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.
Wersja oprogramowania: 2.19.12+
Kurs Gatsby.js
8 rozdziałów26 lekcji4h 29min
Wstęp
36min
- Wprowadzenie4min(zablokowana)
- Lekcja powitalna5min(zablokowana)
- Jak działają reactowe technologie?16min(zablokowana)
- Kiedy wybrać Gatsbyego?11min(zablokowana)
Podstawy Gatsbyego
42min
- Instalacja5min(zablokowana)
- Struktura projektu9min(zablokowana)
- Przygotowanie projektu do pracy10min(zablokowana)
- Importowanie google fonts i tworzenie nawigacji11min(zablokowana)
- Tworzenie globalnego layoutu8min(zablokowana)
Wstęp do GraphQL
22min
- Czym jest GraphQL?10min(zablokowana)
- Jak Gatsby wykorzystuje GraphQL?12min(zablokowana)
Obrazki w Gatsbym
43min
- Sposoby ładowania obrazków12min(zablokowana)
- Stylowanie strony głównej5min(zablokowana)
- Jak działa sharp transformer?12min(zablokowana)
- Jak działa Gatsby Image?13min(zablokowana)
Tworzenie bloga w Markdown
1h 7min
- Czym jest Static Query?10min(zablokowana)
- Czym jest MDX?6min(zablokowana)
- Tworzymy fundament dla bloga14min(zablokowana)
- Miniatura postu w MDX9min(zablokowana)
- Programatyczne tworzenie strony11min(zablokowana)
- Wstrzykiwanie danych za pomocą Gatsby Node API18min(zablokowana)
Tworzenie bloga w headless CMS
48min
- Czym jest DatoCMS?17min(zablokowana)
- Łączenie Gatsby z DatoCMS13min(zablokowana)
- Interpretowanie danych z CMS18min(zablokowana)
Wdrożenie strony
9min
- Deployment strony opartej o Gatsby9min(zablokowana)
Podsumowanie
4min
- Podsumowanie kursu4min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Autor kursu
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!