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+
Okej w tej lekcji zajmiemy się uporządkowaniem tego post js
żeby po prostu wyświetlał odpowiednie dane tylko teraz pomyślałem o jeszcze jednej
rzeczy my już nie mamy slug w naszym cms jak sobie tutaj
zamkniemy do api explorer to nie
ma czegoś takiego jak slug w naszym artykule jest tytuł a
jest na przykład z takich jeszcze bardziej unikalnych rzeczy i trochę takich wiarygodnych
niż tytuł id-id jest równie unikalne jak slug nie
musimy się w ogóle przejmować tym że któryś artykuł będzie miał takie samo
id więc na spokojnie możemy sobie zrobić coś takiego że
w naszym gatsby node wyciągniemy oprócz tytułu jeszcze id id
jest normalnie stringiem i możemy zrobić coś takiego jak post id
albo
article id i teraz wewnątrz
naszego query tutaj może stwórzmy je najpierw w naszym graphql
wewnątrz gatsby gatsby develop mimo
że to się wywali to powinno i tak nam zbudować naszego graphql
tak żebyśmy mogli go przeglądać zaraz zobaczymy czy to się faktycznie uda tak
tam mamy jakieś błędy tym się nie przejmujy graphql
jest na miejscu odświeżamy nadal działa wszystko git
i teraz my chcemy zrobić coś takiego jak datocms
article już się pewnie domyślasz że będziemy pobierać
sobie tylko jeden artykuł za pomocą id które będzie
równać się coś tam i wewnątrz tego wyciągniemy
sobie te wszystkie rzeczy które nam tutaj o których
potrzebujemy szkopuł oczywiście znowu tkwi tutaj
musimy teraz pograć sobie zmienną id która również będzie stringiem
i będzie wymagana skopiuję sobie id z tidy or messy tylko
po to żeby sprawdzić czy faktycznie będzie działać a
nie w tym miejscu skopiowałem tutaj będzie id
o
teraz powinno zadziałać a w tym miejscu tutaj wkleiłem z
złe id ono było jakoś skrócone tylko do tego numeru a to jest pełne id dlatego na
początku wyrzuciło null a teraz już jest okej więc tylko zobaczmy czy
w naszym gatsby node dokładnie takie samo id będzie wyświetlane czy
może to jednak skrócone żeby czasem nie było tak że będziemy mieć jakiś tutaj
błąd tego byśmy nie chcieli więc wylogujmy
sobie post
id gatsby develop
i zobaczymy w jakiej postaci te id przechodzą tutaj do tego
query okej mamy jednak te wersje dłuższą także nie
musimy się o nic martwić tylko jak zwykle zrobiłem błąd tutaj
musimy zrobić post kropka id i teraz będzie git i
z racji że to już mamy ogarnięte prawidłowe dane przechodzą
do naszego post js to teraz możemy sobie to query skopiować
one się nazywało query single article id
jest przekazywane nazwijmy je po prostu id żeby
było tak samo jak w tym query inaczej będziemy mieć błąd mieliśmy post id
nie chce zbytnio komplikować id to id więc niech już tak zostanie
czyli upewnij się że tutaj to dolar id jest takie
samo jak id które jest tutaj kluczem w kontekście wtedy to zadziała i
kiedy już to wyciągniemy to mamy tytuł featured url tutaj
obrazkiem zajmiemy się za chwilę i zamiast tego renderera
będziemy musieli zrobić coś żeby wygenerować nasz article content więc
na ten moment zróbmy po prostu sobie div
w którym zrobimy data
datcms article content
map bo to będzie tablica item
niech każdy
item po prostu będzie tak wypluty zobaczymy co z tego wyjdzie
gatsby develop i
jak sobie odpalimy jakiś artykuł to mamy oczywiście lawinę
błędów dlaczego dlatego że prawdopodobnie ten item
jest obiektem objects
are not valid as a react child tak ponieważ mimo
że article content jest tablicą to mamy tutaj obiekty które
mają jakieś klucze i teoretycznie podczas iterowania po tej tablicy
nie znamy nazwy tych kluczy więc musimy tutaj wymyślić trochę inny sposób tak
na szybko myśląc można by było zrobić takiego jak
item keys wykorzystamy
tutaj metodę object keys która zwraca nam tablicę z kluczami
można zrobić nawet coś takiego
czyli zdestrukturyzować sobie klucz który zwróci nam ta
metoda ponieważ wiemy że jest tylko po jednym kluczu wewnątrz każdego
obiektu więc nie musimy się przejmować żadnymi innymi i na razie sobie tylko
wylogujemy te klucze i coś tu idzie nie po
naszej myśli ponieważ mamy type name a powinniśmy mieć nazwę kluczy więc zobaczmy
co w ogóle się znajduje w tym item możliwe że cms nas trochę zaskoczył
tutaj oczywiście i mamy nieproszonego gościa tutaj
nie chcieliśmy nic takiego jak type a mimo wszystko go dostaliśmy więc nie
pozostaje nam nic innego jak założyć
że ten type name będzie zawsze pierwszy i wyciągać sobie
drugą rzecz z naszego object
keys można to zrobić też w ten sposób i
mamy wtedy paragraph content heading content paragraph content image
data czyli wszystko się zgadza i teraz wiedząc jakie mamy
nazwy w modelu naszego cms możemy wykorzystać je
automatycznego generowania komponentów właśnie podczas iterowania po tej tablicy
brzmi dość skomplikowanie aż wcale nie będzie będzie to trochę
ifologia ale na pewno jakby skuteczna
w zastosowaniu więc teraz skopiujmy sobie te nazwy nie
mówię że to co tutaj robimy jest najbardziej wydajnym najpiękniejszym rozwiązaniem to
będzie po prostu rozwiązanie które działa jeśli masz ochotę
stworzyć coś bardziej skomplikowanego wysublimowanego to
oczywiście zachęcam cię do tego ale jest to na pewno jakiś trop od którego
warto zacząć więc mamy te trzy nazwy i teraz możemy zrobić
coś takiego nadal jesteśmy w mapie więc możemy zrobić switch
item key i teraz będziemy mieć tutaj 3 case'y
pierwszy
to paragraph content drugi
to heading content trzeci to image
data możemy zrobić sobie item
paragraph content heading
będziemy mieć heading
content a w image data mamy dość specyficzny case
bo mamy img src
image data i tutaj zagnieżdżony
url coś tutaj pokiełbasiłem chyba ze switch js
nie wiem czy uwierzysz ale zawsze kiedy korzystam z switch to sprawdzam
sobie dokumentację bo nigdy nie pamiętam a
nie domknąłem img po prostu dobra
i teraz ciekawe czy nasza funkcja zadziała działa
tylko nie wyświetla nam się obrazek ale to i tak połowa sukcesu zobacz
mamy paragraph content heading content paragraph content image data czyli
na końcu tylko ten obrazek się nie wyświetlił ale generalnie kolejność jest zachowana
dość prostą metodą uzyskaliśmy to co chcieliśmy oczywiście
moglibyśmy zrobić coś takiego że na przykład tę nazwę przypisać do jakiejś zmiennej żeby ją po
prostu wykorzystywać ale umówmy się to nie jest jakoś teraz
super istotne zwłaszcza że tylko w jednym jakby template wykorzystujemy
ten zapis póki co więc nie ma co tutaj też za bardzo komplikować
nazwijmy że to będzie takie nvp wszelkie usprawnienia tego modelu zachęcam
do robienia tego samodzielnie natomiast już widzę sprawcę naszego problemu
item image data teraz będzie poprawnie
zapisane zjadłem po prostu to item a image data było z wielkiej litery okej
nasz generator do interpretowania cms brzmi
dumnie zobacz jak to dumnie brzmi a jakie to jest proste jest kilka linijek w javascript
ale mamy interpretator czy też interpreter do
tworzenia skomplikowanych struktur danych więc spoko większość
za nami pozostaje nam tylko sprawdzenie czy datocms
może wykorzystać potencjał gatsby image jeśli
tak to na pewno chcemy to zrobić tak jeszcze tylko na szybko teraz zauważyłem
że moglibyśmy zrobić coś takiego że każdy z tych kluczy zastąpić
po prostu tak zwanym computed property ponieważ
zawsze jeden z tych kluczy będzie pod item key z racji
że go sobie po prostu wyciągamy w tym miejscu więc nie musimy go drugi
raz przepisywać musimy tylko sprawdzić ten warunek czy on się zgadza i w
ten sposób nie musimy duplikować jakby tego zapisu efekt
powinien być dokładnie ten sam tak wszystko się zgadza więc
teraz do rzeczy sprawdźmy jeszcze sobie tutaj w tym query czy faktycznie
możemy wykorzystać co my tutaj używaliśmy fixed więc wykorzystajmy
to fixed z racji że podajemy
tutaj featured image faktycznie ścieżkę to powinniśmy
też móc wykorzystać fixed które na przykład może mieć jakąś
szerokość i
wewnątrz wykorzystać gatsby image sharp
fixed tracedSVG już
się nauczyłem dzięki temu kursowi na pamięć w końcu tych query nigdy nie mogłem
tego zapamiętać i nareszcie mi się to udało zaraz zobaczymy czy to faktycznie
wypali no i niestety mamy błąd więc
tutaj musi być jakoś to inaczej zapisane ale zauważyłem
że w dokumentacji gatsby source datocms
mamy tutaj integrację z gatsby image i możemy sobie faktycznie wyciągnąć
coś co się nazywa gatsby dato cms fixed
więc teraz tutaj i tutaj podmienimy
to na gatsby datocmsfixed w naszych obrazkach
zastosujemy znowu image fixed
tutaj to odblokujemy
odkomentujemy będzie data dato cms
article featured
image a tutaj będziemy mieć zamiast url też fixed i
teoretycznie jeśli się nigdzie nie pomyliłem to
nasza strona powinna wyglądac elegancko mamy
znowu błąd o tym key zawsze o tym key zapomnę trzeba coś
z tym zrobić więc możemy sobie wyciągnąć na przykład tutaj id
z każdego pamiętaj o tym żeby id było pod spodem pod tym
kluczem który wyciągamy jako pierwszy bo inaczej zaburzymy tę kolejność
logikę którą mieliśmy w tym miejscu dlatego nie uważam żeby ona była jakoś
super fajna ponieważ no jest taka mocno imperatywna jednak
wskazywanie indeksu w tablicy nie jest może najpiękniejszą metodą ale w tym
przypadku jest po prostu najszybszą metodą naj taką prostszą która nie
wymaga pisania jakiegoś takiego sporego boilerplate żeby po prostu to działało
item id to jest to czego szukamy więc teraz w
każdym z tych elementów wrzućmy
sobie key każdy z nich będzie miał unikalne id i
wszystko powinno być ok zgadza
się i widzę że mamy tutaj też możliwość wykorzystania tracedSVG
czyli mojego ulubionego formatu który nie zawiera base
64 no
i pięknie nasza
strona z blogiem wygląda tak jak trzeba comfortable
bedroom też tidy or messy podobnie jak widzisz mamy tutaj
dwa pozostałe artykuły które jednak nie działają tak jak trzeba ponieważ
ich już nie ma to znaczy nadal dane tutaj zaciągane są z
naszego mdx więc to również musimy zmienić i to jest ostatnia rzecz którą
tutaj zmienimy tutaj
będzie problem z excerpt bo nie mamy czegoś takiego zwłaszcza że
kolejność naszych artykułów to znaczy tych paragrafów
jest różna czasami to jest heading czasami to jest coś innego więc
nie możemy za bardzo na tym polegać dlatego ja to teraz wywalę nie zrobi to jakiejś
wielkiej szkody naszej stronie excerpt po
prostu można stąd wywalić article preview w tym momencie po prostu będzie
miało o jedną rzecz mniej więc
mamy title i featured image a slug sobie zaimportujemy
i
tutaj musimy zrobić tutaj
dajmy title jako key i nic się nie stanie a tutaj musimy zrobić slugify
title lower
true czyli to samo co
zrobiliśmy w gatsby node żeby to po prostu działało i tu
mieliśmy fluid więc tutaj też damy fluid mamy jakiś
błąd w syntax a zdecydowanie mamy za dużo tych nawiasów
to jest 1 2 3 4 5
o jeden za dużo sprawdzamy naszą stronę z artykułami
i tutaj zamiast all mdx musimy dać all dato
cms article teraz
jak odpalimy sobie stronę to mamy jeszcze jeden błąd bo
destrukturyzujemy front matter którego już teraz nie ma wyciągamy
też excerpt którego nie ma więc nasza
destrukturyzacja powinna wyglądać w ten sposób i
tutaj child image sharp z obrazka też wywalamy generalnie wszystkie
błędy mówią nam o co chodzi i nasz blog z powrotem działa
z tą różnicą że po prostu zaciąga dane z cms i
tym sposobem dotarliśmy do końca działu o datocms mam nadzieję że
ta przygoda również ci się podobała a teraz już przyszedł czas na powiedzenie
parę słów o tym jak w ogóle wydeployować taką stronę napisaną w gatsby