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 po krótkim wstępie do formatu mdx myślę że możemy sobie w
końcu zacząć pisać naszego bloga i tutaj tylko takie uprzedzenie
i nie będziemy za bardzo korzystać z tej funkcji x w skrócie mdx
czyli nie za dużo będziemy pisać javascriptu w samym markdown będziemy raczej
posługiwać się tym markdown po to żeby faktycznie używać go do takiego data
layer w naszej aplikacji to znaczy że będziemy tam trzymać artykuły będziemy
tam trzymać jakieś informacje natomiast nie koniecznie będziemy akurat w tym kursie wykorzystywać
jakieś zaawansowane funkcje jsx które możemy sobie tam osadzić
jeśli masz ochotę na takie szaleństwa jak najbardziej możesz to zrobić możesz tam osadzić
na przykład jakiś nie wiem like button albo cokolwiek innego co pozwoli na jakąś
tam interakcje my tutaj zajmujemy się głównie tym żeby gatsby poprawnie
obsługiwał te dane które będziemy tam zapisywać jeśli spojrzymy sobie
na naszą stronę to teraz będziemy się zajmować głównie właśnie stroną articles
czyli tym naszym blogiem gdzie będziemy wyświetlać listę artykułów które
się znajdują na naszym blogu a następnie będzie można sobie przejść do konkretnego
poprzez kliknięcie i tutaj uprzedzam że będziemy powoli odchodzić od takiego
pixel perfect podejścia to znaczy że raczej będziemy skupiać się na tym żeby
funkcjonowało to poprawnie natomiast jeśli chcesz żeby to wyglądało również tak
jak na projekcie to gorąco zachęcam gdzie do tego żeby w ramach ćwiczeń właśnie sobie to zrobić
żeby sobie wykonać ten projekt żeby ostatecznie wylądować z taką gotową stroną
mam takie podejście ponieważ uważam że wykonanie jakiegoś kursu
po prostu ręka w rękę z prowadzącym to jest jedno i faktycznie można się trochę
nauczyć natomiast taka samodzielna praca danie kursantom jakiegoś
takiego projektu który można jeszcze samodzielnie sobie dopieścić wykonać na podstawie
gotowego tak naprawdę projektu który mamy teraz w figma do którego również masz dostęp
to jest też bardzo fajna opcja żeby po prostu sobie to wszystko poćwiczyć żeby jeszcze
bardziej obezwać się w tym całym rozkładzie gatsby w tym
funkcjonowaniu gatsby tym jak to wszystko działa i przykładem takiej strony której na przykład
nie wykonany w tym kursie a zachęcam do tego żeby zrobić ją samodzielnie jest galeria ponieważ
już wiesz jak obsługiwać obrazki i ja tobie zostawiam to w jaki
sposób rozwiążesz kwestie wyświetlania tych obrazków gdzie będziesz trzymać
te dane jak będzie się zaczytywać i tak dalej potraktuj to jako ćwiczenie ja tylko podpowiem
że jeśli wejdziesz sobie do graphql to możesz zrobić na przykład takie
query jak all file file w którym możesz
zrobić filter i filtr może zawierać absolute
path czyli taką absolutną ścieżkę najpierw ci pokażę
jak wygląda może tak absolutna ścieżka file absolute path mamy tylko jeden
plik więc to będzie to hero jpg które mamy w assets images
to jest ten folder który zawiera nasz plik jpg jeśli
chcesz wszystkie pliki na przykład zamieścić w folderze
gallery załóżmy że images to byłoby gallery i tam by były wszystkie
te obrazki z galerii którą musisz stworzyć to możesz zrobić coś takiego
jak o all file filter absolute
path i tutaj nie equalls tylko regex i w regex
możesz zrobić sobie na przykład gallery wewnątrz
all file musisz użyć nodes które będzie zawierać wszystkie
obrazki zawarte właśnie we wskazanym w folderze stąd
możesz już po prostu sobie pociągnąć public url wiadomo że nie ma takiego folderu
jak gallery ale jak wpiszemy images to wyświetli nam się właśnie ten
jeden obrazek który tutaj mamy więc to taka podpowiedź jak możesz sobie wrzucić
coś do jednego folderu i później wyciągnąć za pomocą query w graphql a resztę
zostawiam tobie a teraz już przechodzimy do naszego kodu i stwórzmy w końcu strukturę
dla naszego bloga pierwsze co musimy stworzyć to jakiś folder który będzie trzymał te
wszystkie artykuły ponieważ tak jak mówiłem dane będą trzymane w repozytorium a nie w
żadnym cms i teraz to gdzie to zrobimy naprawdę nie ma żadnego
znaczenia to może być na przykład w folderze src ja bym się do tego skłaniał
ale może być też na przykład w zewnętrznym folderze w sensie hatta website jeśli chcesz
tym root folderze tak zwanym ja to zrobię w src i dam tutaj
po prostu folder data który będzie zawierał folder
articles i wewnątrz folderu articles stworzymy sobie teraz
nasz pierwszy artykuł do bloga można go numerować
na przykład w taki sposób że zrobimy sobie 01 i tutaj
sprawdźmy jak się nazywał nasz pierwszy comfortable bedroom
dobra oczywiście zrobiłem literówkę
a co gorsza nie dodałem w końcówki
mdx teraz jest okej teraz zrobimy coś
o czym jeszcze wcześniej nie mówiłem nazywa się to front matter i to jest taki to
jest takie metadata w mdx czy też markdown polega
to na tym że zrobimy sobie takie płotki na samej górze i
możemy tutaj jak na przykład w yaml plikach osadzić jakieś
dane to może być na przykład title to może być path albo slug
na przykład zaraz ci wytłumaczę czym jest slug jeśli nie wiesz i na przykład author
i możemy jeszcze zrobić a na razie zostańmy przy tym
tytuł oczywiście mamy comfortable bedroom
slug to jest nic
innego jak nazwa która będzie mogła być użyta w
ścieżce do bloga w sensie będzie mieć na przykład hatta kropka
com slash blog slash i tutaj właśnie może być na przykład comfortable
bedroom moglibyśmy zrobić
taką funkcję w javascript która często się nazywa slugify i która
po prostu bierze tę nazwę i zamienia ją w taką nazwę natomiast my
po prostu możemy sobie to kebab case napisać kebab case to taki case
kiedy ma prostu myślnikami oddzielone różne słowa
i w ten sposób będziemy mogli te informacje w bardzo prosty sposób wykorzystać
później więc sobie to tak zostawimy i nasza autorka nazywa się uwaga to
było jakieś trudne nazwisko abigail donutdough okej
i w takim formacie możemy zapisywać sobie dowolne informacje ważne
żeby każdy z plików mdx miał dokładnie takie same informacje więc trzeba się tego
trzymać dlatego mdx nie jest może najlepszym wyborem dla ludzi
którzy są nie techniczni którzy mieliby pisać bloga no bo łatwo o czymś
zapomnieć tutaj nie mamy żadnej walidacji ani nic takiego dlatego zawsze
polecam mdx jako rozwiązanie dla blogów które są prowadzone przez
programistów po prostu albo przez osoby które chociaż trochę kumają na czym
polega kod w jaki sposób będziemy zaciągać sobie te dane to za chwilkę ci pokażę
w graphql natomiast teraz jeszcze stwórzmy sobie jakieś tutaj content nie przejmuj
się tym co tutaj wpisałem to jest jakieś tam dummy data zaciągnięte z neta jeśli
bardzo chcesz to możesz z brancha 05.3-finish
sobie pobrać również ten pliczek ja zrobię jeszcze jeden taki
plik nazwę go jakoś inaczej jak tutaj mamy dine
and design tu będzie nasz drugi plik mieliśmy zrobić
dine and design kropka mdx trzeba
jeszcze tutaj wszystko popoprawiać zaraz
sobie pobierzemy jakiś inny bardzo nie lubię korzystać z lorem
ipsum uważam że to trochę tak zabija przyjemność z pisania jakiś fajnych rzeczy więc
lubię sobie po prostu wyciągnąć jakieś pierwszy lepszy artykuł który po prostu
wygląda jakby człowiek go napisał o i zrobić coś takiego i
w ten sposób mamy trochę ładniejszą strukturę jeszcze
tutaj oczywiście musimy zmienić autorka zostaje
ta sama jeszcze tylko tutaj nasz slug dime
and design dobra
napisaliśmy nasze pierwsze dwa artykuły teraz to co musimy zrobić to
sprawić żeby gatsby wiedział że w ogóle te artykuły istnieją żebym mógł sobie parsować
więc to co musimy zrobić to pójść do naszego gatsby source filesystem on
będzie dobrze współgrał z plugin mdx który będzie parsował ten mdx natomiast
musimy zrobić sobie po prostu drugą instancję naszego gatsby source filesystem i
wpisać tutaj na przykład blog w ten sposób odróżniamy jedno źródło
od drugiego i tutaj oczywiście będzie src mieliśmy
tutaj data articles to może zmieńmy też blog na articles
żeby już być konsekwentnym w tym nazewnictwie tych instancji
gatsby source filesystem może mieć wiele zależnie od tego właśnie jakie typy danych chcemy
mieć i wiadomo że one są często w różnych folderach więc w ten sposób wskazując
gatsby gdzie te dane można sobie zaczytywać on będzie po prostu porządkował
to wszystko w graphql teraz odpalimy sobie graphql i zaraz pokażę
ci nasze pliki będą dostępne tam i zwłaszcza ten front matter który pewnie
cię dość ciekawi jak to w ogóle będzie pobierane jeszcze tylko jedna rzecz bo
niepotrzebnie wpisałem tutaj dwa tytuły tutaj mamy tytuł i tutaj mamy tytułu one są takie same
możemy sobie ten jeden wywalić wtedy też trochę ten artykuł będzie czytelniejszy
nie potrzebujemy dwóch tytułów okej odpalamy graphql
i teraz zauważ że gatsby plugin mdx dodał
nam tutaj nowe pole nazywa się all mdx mamy
też pole mdx po prostu ale z racji
że chcemy sobie zaczytać wszystkie nasze artykuły to wykorzystamy all mdx
i dlatego na początku tej lekcji celowo pokazałem ci all files żebyś sama sam
mógł stworzyć sobie galerię a tutaj właśnie wykorzystamy all
mdx i podobnie jak w all file mieliśmy nodes tak tutaj też musimy właśnie
użyć nodes zawsze kiedy korzystamy z query które zaczyna się na all to
znaczy że musimy w środku użyć właśnie nodes czyli jakby wszystkich
elementów zawartych w tym podzbiorze o tak tak można to nazwać
teraz wewnątrz nodes możemy już sobie wyciągnąć na przykład front
matter i teraz zobacz co mamy we front matter title slug
i author czyli te trzy pola które sami tutaj opisaliśmy jeśli
tutaj byśmy wpisali sobie na przykład zgadnij co wpiszę kangur
to mielibyśmy również takie pole we front matter więc to
jest o tyle fajne że jest bardzo konfigurowalny i możemy tutaj naprawdę takie customowe dane jakieś
na własne potrzeby też użyć nam te trzy na razie wystarczą uwaga
puszczam query i mamy tutaj dostęp do informacji
o naszych dwóch artykułach co jeszcze możemy sobie tutaj wyciągnąć
z tego na przykład excerpt czyli taki skrót
taki wycinek jakby wyrywek artykułu to jest pierwsze
ileś tam znaków można też stworzyć sobie coś takiego jak na przykład prune length
i wtedy mamy chyba 20 znaków jeśli tak zrobię o to
mamy ograniczenie tych znaków jeśli na przykład wiemy że miejsce na
ten wyrywek będzie na prawdę niewielkie to możemy na przykład zrobić właśnie coś takiego żeby
ten początek artykułu sobie jakoś elegancko obciąć już na etapie
graphql jest naprawdę świetne no bo wtedy nie musimy się w javascripcie o to martwić
dobra i zobaczmy co możemy sobie tutaj włączyć w tym query jakie pola jeszcze
mamy do wyboru mamy na przykład body które jak sobie to odpalimy to zobaczymy
ciąg bardzo długich dziwnych znaków i to będzie nam bardzo potrzebne
ale dopiero w momencie kiedy będziemy mogli programatycznie tworzyć nasze strony więc
na razie sobie to wywalimy i teraz skopiujmy sobie te query i
wróćmy do naszego kodu napiszmy sobie coś na naszej stronie articles
napiszmy kod który pozwoli nam wykorzystać to wszystko więc teraz po
prostu robimy export const query przypominam że jesteśmy w komponencie
który znajduje się wewnątrz pages czyli jest po prostu stroną a z racji że jest stroną
to możemy tutaj na legalu wykorzystać graphql co
teraz uczynimy musimy
go tylko zaimportować z gatsby dobra
musimy też wyciągnąć sobie data żebyśmy
mieli dostęp do tych informacji które tutaj pobraliśmy i teraz nodes będzie
tablicę która będzie zawierać poszczególne informacje tutaj więc możemy
sobie stworzyć coś takiego na razie na sam początek data
all mdx nodes map
będziemy mapować sobie każdy artykuł możemy
go nazwać na przykład item i możemy tutaj sobie zwracać na przykład
item front matter title author
możemy zrobić h2 tutaj zamiast p i
na przykład jeszcze item excerpt dobra
i mamy błąd oczywiście zrobiłem literówkę i tutaj jeszcze
w naszym graphql musimy oczywiście zrobić coś takiego nie
nazwaliśmy sobie tego query a jeśli go nie nazwaliśmy to
przynajmniej puste klamry powinny być tutaj dobra
i teraz powinno zadziałać wróćmy sobie do naszej strony localhost
8000 przechodzimy do artykułów i zobacz mamy
wyplute tutaj nasze dwa artykuły elegancko wszystko działa
jak należy więc teraz nie pozostaje nic innego jak to tylko na szybkości ostylować
i będziemy musieli jeszcze pododawać obrazki ale to za chwilkę sobie o tym
porozmawiamy jak możemy to zrobić