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 wytłumaczyłem ci czym jest graphql
jak z niego korzystać oraz pobawiliśmy się trochę stroną w swapi czyli
star wars api która pozwala nam właśnie zobaczyć w
jaki sposób w praktyce możemy pisać query w graphql zachęcam
cię do pobawienia się jeszcze trochę tym api z gwiezdnych wojen ponieważ można tam sobie popatrzeć właśnie
jak takie bardziej skomplikowane query budować to zostawiam już tobie natomiast teraz
chciałbym ci powiedzieć w jaki sposób graphql współgra z gatsby
i muszę ci od razu powiedzieć że współgra naprawdę niesamowicie
więc pokażę ci na stronie gatsby w dokumentacji
jak oni to podzieli i mamy tutaj takie 5 etapów po prostu
jak te dane jak wygląda ten data flow właśnie
w gatsby jest to naprawdę bardzo ciekawe tutaj mamy na przykładzie pliku
yaml który po prostu zawiera tytuł i opis składnią
yaml się nie musimy przejmować ja sam jakoś specjalnie jej nie znam ale ona też nie jakoś super skomplikowana
po prostu mamy zagnieżdżenia trochę jak w obiekcie można tak powiedzieć
w każdym razie mamy tutaj jakieś dane i to jest
to co nas interesuje to jest content który został utworzony to
może być yaml ale to może być też json to może być po prostu jakieś cms z zewnątrz
to może być mark down i tak dalej to jest naprawdę nieistotne to
co jest istotne to to co się dzieje na etapie build na etapie build w
sposób automatyczny za pomocą różnych pluginów zainstalowanych w gatsby
content łączy się z naszym graphql query napisanym
w kodzie już na frontendzie działa to w taki sposób że na przykład na stronie home
page js wpiszemy sobie takie oto query w którym to query oczywiście nazywamy
może się nazywać na przykład home page query może się nazywać kangur może się nazywać jeszcze
jakoś inaczej nie wiem czemu zawsze mówię kangur tak mi zostało już z poprzednich
kursów w każdym razie ta nazwa jest nieistotna to co jest istotne to co się
zaczyna między tymi klamrami tutaj mamy site title i description jeśli zobaczysz
sobie na content to właśnie taka była struktura naszego yamla był obiekt site
który zawierał tytuł i opis i to właśnie przez to że plugin
zainstalowany w gatsby pozwala nam parsować yaml
możemy sobie napisać query które gatsby
zrozumie które powie okej ja wiem chyba o co ci chodzi skoczę teraz po ten content
i ci go wypluję po prostu jako dane i te dane wyglądają
w taki sposób że dostajemy po prostu w json rzeczy które
wcześniej były napisane w yaml na podstawie tego przykładu może się to nie wydawać jakoś
super spektakularne i imponujące ale uwierz mi to jest naprawdę niesamowite
w gatsby i zobaczysz później że na wyższym poziomie zaawansowania to się naprawdę
przydaje dostajemy sobie takiego jsona którego dostajemy bezpośrednio do naszego
pliku home page js po prostu na etapie build czy też developmentu
widzimy już te dane i następnie te dane możemy po prostu wykorzystać
dane są przekazywane w taki auto magiczny sposób jak ja to nazywam jeśli mamy w folderze
pages to nie musimy robić nic innego jak po prostu zaczytać props update
do naszego komponentu i wtedy w data już mamy te rzeczy o
które prosiliśmy w naszym query jeśli nasz komponent
nie znajduje się w folderze pages to musimy użyć troszkę innej taktyki ale o
tym opowiem ci już trochę później to na tym etapie nie jest jakoś super ważne w jaki sposób
te dane pozyskujemy do komponentu ważne jest to co możemy z nimi zrobić czyli
po prostu je wykorzystać tak żeby na końcu mieć w widoku dane
zaczytane z yamla przepuszczone przez build czy też przez development
wyrzucane przez query do data w json zaimportowane
do naszego widoku i wyświetlane w końcu na stronie tyle stepów
musimy pokonać żeby po prostu wyświetlić nasz content i na początku może
się to wydawać jakieś skomplikowane czemu nie możemy tego zaimportować z jakiegoś pliku js
po prostu z obiektu ano po to żeby móc wykorzystywać wiele
api do gatsby nie przejmować się tym skąd te dane płyną to jest
właśnie cała magia gatsby że on jest jak to się mówi api agnostic czy też cms
agnostic czyli ma totalnie w nosie skąd bierzemy te dane i
on je po prostu wyświetli i co jest jeszcze lepsze prawdopodobnie do
tych danych które pozyskujemy już istnieje jakiś plugin i to jest cudo mam
odpalony tutaj serwer w gatsby i jak sobie zrobisz gatsby develop na
swoim komputerze to dostaniesz też 2 linki localhost zwykły i localhost
graphql jak sobie w niego wejdziemy to dostaniemy
stronę bardzo podobną do naszego star wars api z tą różnicą że
jest po prostu białe i uwierz mi że graphql to będzie twój najlepszy przyjaciel jeśli
chodzi o przetwarzanie danych w gatsby bo dzięki niemu możemy pisać w bardzo prosty
sposób i bardzo szybki sposób krótkie fragmenty kodu nie zawsze krótkie
ale na pewno działające fragmenty kodu które pozwolą nam pobierać dane do
naszej aplikacji więc teraz zobaczmy co ma nasza goła strona z gatsby
do zaoferowania jeśli chodzi o dane bo jak widzisz mamy tutaj już trochę danych
więc to co możemy zrobić to kliknąć sobie ładnie query wywalimy
sobie typename i podobnie jak w star wars api mogę
nacisnąć control spację i mogę na przykład sobie pobrać
jakiś plik zobaczymy co to w ogóle za plik i
na przykład chcę dowiedzieć się jaki ma rozmiar jaką
ma ścieżkę relatywną i na przykład co tu jeszcze mamy
może jeszcze zobaczmy sobie public url zobaczymy
czy mi się różni od ścieżki więc relatywna ścieżka to po prostu zawiera
nazwę naszego obrazka natomiast public url
to jest coś co byśmy wykorzystali właśnie już bezpośrednio w gatsby jeśli chcielibyśmy
dodać jako src do jakiegoś obrazka właśnie ten adres
i wtedy ten obrazek by się wyświetlił i teraz pytasz mnie dlaczego akurat
po query na file dostaliśmy ten jeden plik jak
przejdziemy sobie do konfiguracji naszego gatsby to
zobaczysz że mamy taki plugin gatsby-source-filesystem który
wskazuje na assets images to tutaj właśnie gatsby spodziewa się danych
które może sobie odczytać a że w tym folderze mamy tylko
jeden plik to właśnie ten jeden plik został automatycznie wyświetlony jeśli
mielibyśmy dwa pliki to prawdopodobnie i tak wyświetliłby ten pierwszy z brzegu ponieważ
nie precyzujemy tutaj o jaki plik nam chodzi a on chce nam cokolwiek
zamiast rzucać błędem jeśli chcielibyśmy żeby to
był ten konkretny plik to możemy sobie zobaczyć jak on ma na imię hero i
możemy zrobić coś takiego jak name wewnątrz możemy zrobić
equals tu po lewej mamy podpowiedzi
jak nie wiemy jakie tu są metody możemy zrobić equals czyli równa
się hero jpg w tym
momencie wywalmy sobie może wszystko oprócz tego public url to
nam będzie tylko potrzebne i coś zepsułam okej
bez rozszerzenia czyli sama nazwa pliku wtedy podaje nam z powrotem
ten plik zamiast używać equals które musi być dokładnie
taką samą nazwą jak jak nasz plik możemy użyć na przykład regex który
może na przykład zawierać hero i wtedy to też działa oczywiście hero działałby
dokładnie tak samo ale założę się że twoją uwagę przykuła jeszcze jedna ciekawa
rzecz jak query robiłem na name i public url to widzisz
że nazwa pliku jest zupełnie inna niż nazwa pliku który
jak mówiłem wykorzystalibyśmy w gatsbym jako src do
naszego obrazka dlaczego tak jest dlatego że właśnie ten plugin
gatsby source filesystem parsuje wszystkie pliki i przetwarza
je w taki sposób żeby były na przykład bardziej zoptymalizowane i żeby były
przygotowane do deploymentu a gatsby nigdy nie daje nam tych
samych plików które zaciągamy z graphql tylko zawsze przepuszcza je i
buduje taki dodatkowy folder właśnie w folderze static gdzie przechowuje
wszystkie pliki po build gdzie właśnie jak sobie zobaczymy w folderze
public w folderze static mamy tutaj nasz plik który
właśnie ma taką dłuższą nazwę i to jest plik który został już przetworzony przez gatsby
i to właśnie tutaj gatsby trzyma wszystkie pliki po build
bo to właśnue do folderu public będzie budowana nasza strona to zawartość
folderu public będziemy później deployować gdzieś na serwer stąd ta różnica to
jest przed obróbką a to jest po obróbce jeszcze taka drobna uwaga żeby
nie wprowadzać od razu w błąd gatsby source filesystem nie odpowiada za optymalizację
obrazków gatsby transformer sharp i plugin sharp odpowiadają za to ale
one są jakby działają w komitywie i po prostu robią to wszystko razem stąd
taka moja uwaga i teraz załóżmy że w folderze images dodamy
sobie jakiś nowy plik tylko po to żeby zobaczyć czy nasze query
będzie działać i załóżmy że to nie będzie obrazek jak mówi nazwa folderu będzie
to na przykład data json i załóżmy że wrzucimy sobie tutaj
name stregobor
jestem po pierwszym epizodzie wiedźmina dzisiaj więc jakoś tak w temacie
stregobor location blaviken
pozdro dla fanów wiedźmina dobra zapisałem sobie ten plik i teraz
wróćmy do naszego graphql i jak ja nazywałem ten plik data
wpiszmy sobie tutaj data i
na przykład dodajmy jeszcze extension żebyśmy widzieli czy to faktycznie json i
zauważcie że gatsby nie dość że przetworzył nam szybciutko ten plik skopiował
go do static jak wejdziemy sobie tutaj i zobaczymy public static
mamy naszego jsona wygląda on dokładnie tak samo i
teraz możemy robić query właśnie dla tego pliku i
w taki właśnie sposób działa plugin gatsby source filesystem że
wskazujemy mu lokalizację i po prostu stamtąd on będzie ciągnął
nasze pliki jeśli chcielibyśmy zrobić coś takiego że mamy osobno właśnie
json na przykład z danymi i osobno obrazki to oczywiście
możemy to zrobić na przykład możemy zrobić coś takiego jak assets json i
teraz w naszym folderze assets możemy zrobić
sobie json przeniesiemy tutaj
nasz pliczek tak jest zapiszemy
to teraz jak wrzucimy tutaj to
nic się nie wydarzy dlatego że po każdej zmianie konfiguracji w gatsby musimy
zbudować na nowo nasz serwer to jest ten jeden wyjątek zazwyczaj jeśli zmieniamy jakieś
pliki jst po prostu w naszym projekcie to bez problemu gatsby to ogarnie natomiast
jeśli zmieniamy konfigurację to gatsby mówi hola hola ja to muszę jeszcze raz przetworzyć
jeszcze raz muszę uruchomić wszystkie queries i teraz jak wrócimy do naszego
graphql i ponownie
wystartujemy z tym query to teraz mamy już bez problemu informacje
o tym że ten plik został przetworzony poprawnie więc to był taki wstęp do tego jak
działa graphql w gatsby jak wygląda data flow w gatsby
i już w następnym rozdziale zaczniemy sobie powoli działać właśnie
z tym jak wykorzystywać graphql w praktyce jak przerabiać obrazki
jak zaczytywać dane generalnie czeka na nas kilka naprawdę ciekawych rozdziałów
związanych z tym jak wykorzystywać dane w gatsby bo jeśli chodzi o
rozbudowywanie stron to może gatsby nie jest tutaj jakoś super inny
od react i niewiele nas może tutaj zaskoczyć generalnie jeśli znamy react
to znamy też gatsby z niewielkimi różnicami natomiast to co wyróżnia
gatsby właśnie na tle innych frameworków to fakt jak pięknie obsługuje
out-of-the-box praktycznie bez żadnego przygotowania różne typy danych z
różnych typów api