Szybkie i Nowoczesne Strony
4 godz. 29 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorI 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?).
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ść.
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.
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.
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.
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.
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.
2.19.12+
W poprzedniej lekcji udało nam się stworzyć środowisko deweloperskie odpalić
je na localhost 8000 wygląda ono w taki sposób mamy tutaj dwie
strony mam tutaj odnośnik do strony gatsbiego i mamy jakiś
template i obrazek jak widzisz ten template nie zmienia się pomiędzy poszczególnymi
dwiema stronami i to też jest całkiem ciekawe zaraz pokażę ci jak to
zostało zrobione gatsby w tej lekcji przyjdziemy sobie przez cały
nasz projekt i zobaczymy jakie tutaj mamy pliki co gatsby dla nas zrobił podczas
tworzenia tego projektu mamy tutaj kilka folderów niektóre są mniej widoczne node modules
oczywiście nie musimy omawiać typowy npm folder mamy
tutaj cache w cache znajdują się wszystkie pliki które jak
sama nazwa wskazuje gatsby cache'uje i jest to bardzo ważny folder ponieważ on
przyspiesza budowanie naszego środowiska deweloperskiego w przypadku kiedy będziemy
mieć na przykład bardzo dużo obrazków to właśnie w cache będą znajdować się obrazki
które nie zostały zmienione i nie muszą być przetransformowane
przez gatsby po raz kolejny więc każda kolejna iteracja każde kolejne
uruchomienie środowiska deweloperskiego będzie troszkę szybsze od poprzedniego
o ile są tam pliki które wcześniej zostały w jakiś sposób wymienione ale nie muszą być zmienione po
raz kolejny później jeszcze opowiem ci trochę więcej o cache natomiast zobaczmy co my
jeszcze tutaj mamy mamy folder public i z punktu widzenia deploymentu to
jest najważniejszy folder ponieważ to w nim znajdzie się zbudowana wersja
naszej strony to znaczy po wykonaniu komendy gatsby build którą później ci pokażę
to właśnie w folderze public będzie znajdować się nasza docelowa strona cała
struktura wszystkie zbudowane pliki cały gotowy projekt gotowy do wrzucenia
na serwer później mamy folder src to właśnie w
nim znajdują się wszystkie nasze komponenty obrazki strony generalnie cały
kod który będziemy pisać właśnie będzie znajdować się w obrębie src pomijając
oczywiście config który jest poza tym folderem konfiguracja nasza tutaj
ograniczy się głównie w tym kursie do pliku gatsby config ponieważ
to w nim będziemy mieć takie rzeczy jak pluginy jak jakieś takie podstawowe
ustawienia jak właśnie site meta data która później ci pokaże do
czego służy mamy jeszcze tutaj kilka innych plików o których też oczywiście za
chwilkę ci opowiem natomiast one w tym kursie będą grały nieco mniejszą rolę
poza tym mamy jeszcze jakieś podstawowy pliki konfiguracyjne takie jak na przykład
konfiguracja prettier package json to już jest taki
standard myślę tego omawiać nie musimy ale jak widzisz samo wykonanie
komendy gatsby new i nazwa naszej strony wykonało
całkiem sporą robotę ponieważ przygotowało nam taki podstawowy config naszego
gatsbiego podstawową strukturę kilka podstron kilka komponentów więc
jest to naprawdę całkiem fajne narzędzie do tego żeby właśnie szybko wystartować ponadto
gatsby posiada coś takiego jak gatsby themes którymi
również w tym kursie się nie zajmiemy natomiast jest to bardzo fajny temat do zbadania właśnie
jako taki kolejny krok do rozwoju jeśli chodzi o naukę gatsbiego jest to po prostu zbiór
takich template'tów takich gotowych struktur które można wykorzystać
przy tworzeniu właśnie projektu po gatsby new i nazwa naszej
strony możemy wkleić link do theme'u gatsby nazwijmy
go tak który zawiera po prostu podstawą strukturę
na przykład bloga albo na przykład sklepu tych theme'ów jest naprawdę całkiem sporo
i jest to bardzo fajny sposób na szybkie wystartowanie z jakimś troszkę bardziej skomplikowanym projektem
my tego nie wykorzystujemy też dlatego że ja ci chcę pokazać od podstaw jak
stworzyć na przykład taką strukturę dla bloga nie musimy tutaj korzystać z tego gotowca
ponieważ to by trochę za dużo takiej magii i automatyzacji dało
na sam początek chcę żebyś to zrozumiał zrozumiała od samych podstaw żeby
później móc stworzyć coś takiego samodzielnie a teraz wróćmy do naszego
projektu i zanim zaczniemy cokolwiek zmieniać w naszym kodzie to sprawdźmy
sobie jak wygląda ta struktura którą tutaj gatsby dla nas przygotował i czy
w ogóle chcemy tutaj na razie coś zmieniać więc pierwszym folderem który
jest moim zdaniem najważniejszy tutaj w gatsby jest folder pages jego
nazwy nie powinno się zmienić raczej nie ma takiego sensu ponieważ to
tutaj dodanie nowego pliku js sprawi że
stworzymy po prostu nowy komponent to znaczy o ile ten
plik js oczywiście będzie eksportował jakiś komponent reactowy ale jeśli
będzie eksportował to automatycznie gatsby stworzy dla nas nową podstronę
i teraz stwórzmy tutaj sobie jakąkolwiek nową stronę
właśnie tworząc plik js nazwijmy to na przykład blog.js
skopiujmy sobie na przykład z drugiej podstrony
całą strukturę nazwijmy to blog page
link
możemy wywalić na razie to seo będzie nam niepotrzebne
layout niech zostanie tutaj
wywalmy sobie link gatsby się zajmuje teraz tworzeniem naszej strony chwilkę musimy poczekać
i teraz jeśli wejdziemy sobie na localhost 8000
i po slashu wpiszemy blog to wyjdziemy sobie na nową
stronę którą przed chwilą sam napisałem blog page welcome to my blog to
jest zawartość tego komponentu więc jak widzisz tworzenie nowych
plików js w folderze pages tworzy po prostu od razu nowe
podstrony jest to super proste super szybkie i naprawdę bardzo bardzo wygodne
oczywiście w tworzeniu nowych stron i routingiem również zajmiemy się
dużo bardziej dokładnie w tym kursie na razie chciałem ci tylko pokazać że tworzenie nowych podstron
jest naprawdę bajecznie proste w gatsby natomiast zobaczmy sobie jeszcze co my
tutaj mamy oprócz folderu pages mamy jeszcze images to
w nim znajdują się nasze pliki z ikonami z obrazkami ja
to przeniosę później do folderu assets na razie nie będę tego ruszał natomiast mamy
tutaj jeszcze components mam tutaj header jak widzisz to są wszystko
komponenty reactowe one mają tutaj co prawda inline styling twórcy
gatsby nie chcieli nam narzucać czy to będzie css czy sass czy styled components
my w tym kursie będziemy wykorzystywać styled components ponieważ uważam że jest to najprostszy sposób na
tworzenie komponentów w react obecnie a przy okazji sobie trochę powtórzysz to
jak działają styled components no ale generalnie jak widzisz
jest to czysty react poza jakimiś tam detalami jakimiś po prostu
komponentami zaimportowanymi bezpośrednio z gatsby mamy też
komponent który wykorzystuje coś takiego jak gatsby image jest to specjalny
komponent właśnie specjalny rodzaj obrazka który jest wykorzystywany w
gatsby do tego żeby zaczytywać takie cuda jak mamy tutaj czyli query graphql
przekazywane bezpośrednio do naszego obrazka jeśli
nie wiesz czym jest graphql totalnie się tym nie martw naprawdę pokażę ci to wszystko od podstaw
tutaj w tym kursie pokażę ci też dlaczego taki akurat rodzaj
danych jest przekazywany do tego obrazka czemu nie ma tutaj src tylko fluid
tym wszystkim zajmiemy się również w tym kursie także przejdziemy
sobie przez to na razie może to wyglądać dla ciebie jak magia na początku kiedy ja zaczynałem
uczyć się gatsby również to wyglądało dla mnie jak magia i uwierz mi nie ma tutaj
nic magicznego i nie ma tutaj nic skomplikowanego tylko trzeba zrozumieć co
te wszystkie nazwy oznaczają mamy też layout który
już wcześniej widziałaś widziałaś w właśnie komponentach tutaj ten najbardziej zewnętrzny
element na każdej stronie to jest layout i to on odpowiada za
to mamy na każdej stronie właśnie header że mamy site title
czyli gatby default starter zauważ że data site sidt metadata
title znajduje się w naszym gatsby config i on również
zaczytywany jest z graphql tutaj w tym miejscu przy wykorzystaniu
use static query takiego hooka reacta który należy jednak do
gatsby to też na początku może być skomplikowane w ogóle się tym nie przejmuj
to jest naprawdę całkiem proste i bardzo przydatne właśnie przy tworzeniu stron z gatsby
jak widzisz taki layout po prostu sprawia że mamy tutaj header
mamy children i to właśnie te children są zawartością
naszych stron kolejnym komponentem który mamy tutaj w projekcie jest seo jak
dobrze wiesz z pierwszej lekcji tego kursu gatsby bardzo
wspiera seo jest bardzo przyjazny jeśli chodzi o search engine optimization i
właśnie dlatego często można spotkać w materiałach czy
też po prostu w projektach wykorzystujących gatsby tego typu elementy które
wykorzystują na przykład paczkę helmet która wstrzykuje
zawartość tego co znajduje się tutaj w props bezpośrednio
do tagu head w html już w wyrenderowanej stronie przez co właśnie
seo jest dużo lepiej obsługiwane przez tego typu strony
i aplikacje mamy tutaj kilka open graph'owych tagów
które po prostu wspierają to żeby nasza strona była
bardziej widoczna w sieci i to tyle jeśli chodzi o taki szybki przegląd tego co
mamy tutaj w naszym projekcie a w następnych lekcjach już zaczniemy sobie powoli przygotowywać
nasz wzorcowy projekt nasz taki szkielet który przygotował dla
nas gatsby do tego żeby móc z nim normalnie pracować