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 zbliżamy się powoli do wielkiego finału czyli do stworzenia w
końcu naszego bloga więc odpalmy sobie teraz serwer deweloperski
i zaraz pokażę ci jedną rzecz która mi się bardzo tutaj nie podoba naprawdę
muszę ją zmienić jak wejdziemy sobie na naszą stronę i wejdziemy
na przykład na dine and design bo mamy taki post to
faktycznie on się wyświetla ale popatrz na ten adres on jest nie do końca sugestywny
ponieważ mamy najpierw articles i moim zdaniem wszystkie artykuły powinny
być po slashu po articles więc żeby to zmienić możemy tutaj stworzyć
trochę inną ścieżkę mamy tutaj taki klucz path jeśli
tutaj dodamy articles slash i
post front matter slug czyli ten adres to wtedy wszystkie
nasze artykuły będą się pojawiac właśnie pod takim adresem zerknijmy
czy tak faktycznie będzie okej nasza strona już się odświeżyła i
teraz wpiszę znowu dine and design nie ma takiej strony ale
jeśli wpiszę tutaj articles dine and design to nasza strona faktycznie
jest i teraz to mi się podoba tak może zostać kolejną rzeczą którą
musimy zmienić jest article preview ponieważ tutaj
nie ma linku nie ma żadnego linku który prowadziłby nas
do konkretnego postu więc jeśli wejdziemy sobie do articles
zobaczymy że wyciągamy sobie tutaj slug który możemy
przekazać jako prop do naszego article i następnie
w article preview zrobić taki myk zaimportować
link z gatsby i
nasz preview wrapper zamienić na link tutaj
musimy tylko dać display block żeby to faktycznie działało
i on wtedy może przyjąć propa w
taki sposób i to powinno działać zaraz zobaczymy wróćmy sobie do articles
kliknijmy na któryś obrazek i
zauważ że wszystko działa jedna
ważna uwaga tutaj dodałem faktycznie articles jako przedrostek
do naszego slug ponieważ tak też zrobiliśmy w naszym gatsby node jeśli
bym tego nie zrobił w tym miejscu to tam również mógłbym to olać ale te ścieżki
muszą się po prostu zgadzać więc jedyne co zrobiłem to po prostu podmieniłem
div na link bo link może przyjmować propa tu to
było na początku kursu jak działa routing w gatsby więc
to powinno być dla ciebie super proste i
z racji że slug jest podawany automatycznie jako prop to możemy go po prostu wykorzystać
jako ścieżkę do naszego post preview i każdy
z tych postów będzie działał prawidłowo więc teraz
nie pozostaje nam nic innego jak wykorzystać nasz template właśnie do
postów żeby wrzucić tam jakieś dane przejdźmy
sobie do gatsby node i zobaczymy co my tutaj przekazujemy na razie nie przekazujemy
nic i to jest bardzo dobra wiadomość bo dzięki temu możemy sobie wylogować
to co w ogóle tutaj przychodzi do tego komponentu
możemy sobie to po prostu sprawdzić zajrzyjmy
zatem do konsoli i zobaczmy co ten komponent w ogóle tutaj dostaje
dostaje ścieżkę dostaje coś jak
page context ale nic tutaj za bardzo nie ma jest tylko jakiś prop który
nie za bardzo nam się teraz przyda page
resources tutaj również mamy zagnieżdżone
podobne rzeczy więc tak nic za bardzo tutaj nie ma takiego co mogłoby
nam się przydać i teraz jednym ze sposobów na
wrzucenie danych do tego komponentu do tego template jest po prostu
wrzucenie wszystkiego co mieliśmy tutaj w tym query oprócz
tego front matter i excerpt właściwie excerpt już nam nie jest potrzebne bo potrzebujemy
po prostu całego artykułu więc możemy wykorzystać sobie body dla
przypomnienia tylko czym było body to był ten taki
super długi dziwny ciąg znaków to jest to to
jest nasz mdx właśnie który musi być wrzucony do specjalnego komponentu
ale za chwilkę ci to pokażę więc jeśli mamy frony matter i body
to możemy znasz post wrzucić po
prostu w ten sposób do kontekstu z racji że to jest javascript
to możemy zrobić taki shorthand i on również będzie działał teraz musimy przebudować
naszą stronę i jak się zbuduje to możemy sobie wrócić do naszego artykułu
i tym razem zobaczyć jakie propsy tutaj dostajemy i
zauważ że w page context dostaliśmy teraz post i
mamy tutaj wszystko co potrzeba do stworzenia naszego
postu mamy zarówno body jaki front matter jak i title
więc moglibyśmy spokojnie zrobić coś takiego jak
post wyciągnąć po prostu tutaj wtedy by było
post title przepraszam
post front matter title post
front matter author tutaj
możemy sobie zaimportować image
od gatsby image i
wrzucić tutaj post featured front
matter featured image child image
sharp fluid po prostu
te nazwy mnie zabijają ale jak trzeba to
trzeba i w końcu tutaj wrzucić post body
zaraz zobaczysz że to jest bardzo zły pomysł ale wrzucę na razie tutaj
mamy błąd związany z obrazkiem bo
tutaj powinno być gatsby image sharp fluid tracedSVG
więc jeszcze
raz zbudujmy.to i jeśli piszesz ten kod razem ze
mną to u ciebie również powinien wyskoczyć błąd ponieważ nie możemy zrobić
query na ten fragment wewnątrz pliku gatsby node i to jest
właśnie to ograniczenie przez które istnieje lepszy sposób na robienie tego
samego ale ostatni raz tylko w takim razie stwórzmy
sobie coś żeby ta strona wyglądała podmieniłem
na razie gatsby image na zwykły obrazek więc teraz podsumujmy co my tutaj mamy
mamy post z którego możemy wyciągnąć sobie front matter tytuł
autora i obrazek a dodatkowo mamy jeszcze post body który
wygląda przeokropnie ponieważ jest niewyrenderowanym mdx i teraz
zanim pokażę ci ten drugi lepszy sposób na wrzucanie danych do takich komponentów to
zaimportujemy sobie jeszcze jedną rzecz mdx renderer
trudne słowo from gatsby plugin mdx i
teraz jedyne co musimy zrobić to podmienić ten p na mdx renderer
i zauważ że nasz tekst
nagle się zamieni w piękny wyrenderowany markdown więc wszystko
gra okej mamy nasz obrazek wszystko wygląda tak
jak trzeba ale tak jak już mówiłem to nie jest optymalny sposób na
tworzenie programatyczne stron tak
naprawdę całe to query powinno zostać zawarte w naszym poście tutaj
ponieważ tak jak już mówiłem post jest traktowany na równi z każdą inną stroną i
teraz to zrobimy tylko musimy zrefaktorować trochę nasz kod więc to
co tutaj mamy możemy
sobie skopiować i utworzyć query w tym
miejscu możemy
je nazwać trochę inaczej i tutaj za chwilkę parę rzeczy po zmieniamy na razie
to zostawmy tak jak jest a
my sobie w tym momencie przejdziemy do naszego ulubionego graphql bo muszę ci najpierw pokazać o
co mi chodzi jak dobrze pamiętasz mamy dwie
możliwości jeśli chodzi o zaciąganie danych albo mamy all mdx
all files all site i tak dalej czyli wszystko co zaczyna się na all i pobiera
nam wszystko jeśli inaczej nie zrobimy w tym
momencie dostajemy po prostu tablicę node ale mamy też możliwość
pobierania pojedynczych rzeczy bez tego nodes tutaj przechodzimy
bezpośrednio do rzeczy czyli do front matter zawierającego
tytuł i teraz problem jest tylko taki że
dostajemy pierwsze z brzegu dostajemy tylko jeden wynik w
wyniku tego query mdx a nie all mdx ale przecież
mamy możliwość tutaj filtrowania rzeczy jeśli wejdziemy sobie do front matter i
powiemy że tytuł ma wyglądać w taki sposób że tutaj będzie
dine and design to
dostaniemy w wyniku tego dane dotyczące właśnie dine and design możemy
tutaj też dostać na przykład jak się nazywało featured
featured image był w tym miejscu child
image sharp fluid src
i mamy nasz obrazek wszystko się zgadza więc w
wyniku tego query mdx możemy po prostu pobierać sobie precyzyjnie te dane których
potrzebujemy jeśli nie chcemy używać tytułu możemy używać
slug i również to query będzie działać i teraz to
co jest naprawdę super w graphql to zmienne które możemy używać w
takich właśnie sytuacjach jeśli stworzymy sobie tutaj zmienną która
będzie wyglądać w taki sposób to mówimy graphql dwie rzeczy mówimy
słuchaj w tym query pojawi się zmienna na
razie graphql się do nas sapie bo nigdzie tego nie użyjemy a
druga rzecz którą mówimy to że to będzie string i ten wykrzyknik na końcu mówi
że to będzie wymagane i teraz jeśli ten string
podmienimy tutaj na slug to
oczywiście nie dostaniemy nic bo to query nigdzie się nie pojawiło to znaczy
ta zmienna się nigdy nigdzie nie pojawiła ale tutaj na samym dole mamy coś takiego jak
query variables i jeśli tutaj wpiszemy sobie slug
dine and design bez
tego dolara już tutaj bo zmienna tylko w tym miejscu musi mieć dolara
a tutaj już podajemy po prostu uwaga odpalam to query i
w magiczny sposób dine and design znowu się pojawiło więc zauważ wykorzystujemy
zmienną która jest stringiem jest wymagana i jeśli podamy ją w odpowiedni sposób
do naszego query zaserwujemy ją to wtedy nasze query
zostanie wykonane poprawnie więc teraz skleimy to wszystko do kupy stąd
zabiorę sobie front matter i body wrzucę to w tym miejscu działać
działa teraz to query sobie skopiuje wrzucę
je tutaj podmienię je po prostu ono już wykorzystuje tutaj te zmienną i
teraz co zrobić żeby ta zmienna się pojawiła pamiętasz jak mówiłem w gatsby
node że w kontekście możemy wrzucać rzeczy które będą
później wykorzystywane zarówno w
naszym komponencie ale mogą też zostać wykorzystane w naszym query i teraz
nie pozostaje nam nic innego jak po prostu stworzyć zmienną slug która będzie kluczem
w naszym kontekście i która będzie zawierać już pewnie
zgadłeś lub zgadłaś właśnie naszego sluga więc
przekazuje po prostu zmienną do naszego graphql tak jak zrobiłem to w naszym
graphql tutaj na dole to robię dokładnie to samo tylko że
w kontekście który przekazuje do każdej strony która zostanie utworzona ona
zawiera slug po którym będziemy sobie robić query dla każdej
ze stron i będziemy wyciągać po prostu rzeczy z tego
query do naszego postu więc to page
context możemy sobie wywalić ono nie będzie nam potrzebne my potrzebujemy teraz tylko i wyłącznie data
i ten post który tu mieliśmy musimy zamienić
na data kropka mdx i
reszta powinna się zgadzać zaraz zobaczymy mdx
is undefined gdzieś popełniłem błąd zobaczmy
data wylogujemy sobie console loga gdzieś
tutaj musi być undefined
już wiem dlaczego dlatego że zmieniłem coś
w gatsby node a jeśli coś zostało zmienione w gatsby node to podobnie jak gatsby
config musi zostać przebudowany cały projekt więc
teoretycznie to powinno się a jeszcze chwilę zanim to się uruchomi
to jeszcze możemy tutaj wywalić parę rzeczy bo już tego nie potrzebujemy nie potrzebujemy body nie
potrzebujemy nic innego tak naprawdę jak tylko z slug
zobacz nasze query jest dużo czystsze i tylko to
jest jedyna informacja którą tutaj potrzebujemy do utworzenia każdej ze stron więc
jeszcze raz odpalamy gatsby develop i czekamy okej nasza strona się utworzyła
i okazuje się że jednak żadnego błędu tutaj nie popełniłem więc
to data jest mi niepotrzebne a nasza strona została wyrenderowana
poprawnie teraz jak przejdziemy sobie do
articles o mamy jakiś błąd tutaj poważny dobra articles
preview jest
okej articles tutaj mamy map i w map musimy
zawsze używać key i key może być na przykład slug ponieważ
jest indywidualny dla każdego postu więc spełni swoją rolę
jako klucz git tu się od nas odczepiło
więc teraz możemy sobie przejść do kilku podstron zobaczyć czy
wszystko jest na pewno okej super nasze
posty działają po prostu jak ta lala więc teraz nie pozostaje
nam nic innego jak tylko podmienienie jeszcze tego obrazka który obiecałem zrobić
już wcześniej tutaj podajemy propsa fluid to
wywalamy albo nawet inaczej zróbmy fixed zawsze
używamy tego fluid a może teraz użyjemy właśnie fixed żeby pokazać że
to jest tak elastyczne że można tutaj wykorzystać sobie jaki chcemy tak
naprawdę ten format tutaj tylko zmienimy width i
heigth
możemy wywalić wtedy jak pamiętasz będzie to dopasowane
do szerokości i tutaj użyjemy gatsby image
sharp fixed podkreślnik tracedSVG
odpala się query i
nasz obrazek działa pięknie zobacz w
tym miejscu już mogliśmy wykorzystać q query właśnie ten fragment który zaczytuje nam poprawny
obrazek więc wszystkie nasze posty działają poprawnie obrazki
są zoptymalizowane na naszej stronie wszystko działa tak jak chcieliśmy
więc po raz ostatni w tym dziale zerknijmy sobie co my tutaj tak naprawdę
zrobiliśmy z gatsby node stworzyliśmy sobie programatyczne tworzenie
stron na podstawie layoutu który przygotowaliśmy w folderze layouts post
pobraliśmy sobie informacje na temat każdej ze stron
wypluliśmy ją w postaci tablicy gdzie mieliśmy slug
czyli ten właśnie link ten ten ta ścieżka następnie
ten slug przekazaliśmy w kontekście tak aby można go było wykorzystać wewnątrz
query graphql na post js z racji że post js
jest jest traktowany tak samo jak każda inna strona w folderze pages możemy
tutaj takie graphql query wykorzystać dodatkowo wykorzystaliśmy
tutaj coś nowego czyli zmienne wewnątrz query graphql to
jest właśnie ten slug przekazywany przez context w gatsby node na
podstawie tego wszystkiego dostajemy dane które następnie jako
data podobnie jak w index js czy w articles js wyciągamy
sobie w naszym komponencie i możemy je użyć w każdym z postów i w ten sposób
w kilku krokach naprawdę nie trudnych krokach stworzyliśmy system
do blogowania za pomocą gatsby i mdx a już w następnym dziale
skoczymy o oczko wyżej o jeszcze poziom wyżej i pokażę ci jak to
zrobić przy wykorzystaniu bardzo popularnych teraz headless cms
a dokładnie datocms