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 zanim napiszemy jakikolwiek kod to najpierw warto
wytłumaczyć czym w ogóle jest mdx co to za twór co to za dziwadło kolejne
które nam wymyślili na frontendzie i musimy się go nauczyć otóż jest to po
prostu fuzja jsx z markdown jeśli nie znasz markdown to
polecam po prostu przejrzeć sobie pierwszy lepszy dokument czym to jest w mark
downie piszemy na przykład w takich plikach jak readme więc jeśli kiedykolwiek pisałaś
pisałaś readme to jesteś w domu wszystko wiesz to
wystarczy do tego typu lekcji bo tutaj nie będziemy się zagłębiać w jakieś super
skomplikowane rzeczy związane z markdown ale jak widzisz tu jest taki ciekawy
twist jak to że możemy pisać sobie w markdown na przykład header możemy
pisać sobie jakieś tam teksty i nagle mamy tutaj komponent react na
tym właśnie polega cała magia jsx że możemy łączyć jedno z drugim więc bez
większego gadania po prostu pokażę ci do czego możemy sobie to wykorzystać zaczniemy
od takich super prostych rzeczy żeby po prostu zrozumieć jak to działa w połączeniu
z gatsby natomiast później napiszemy sobie po prostu mechanizm do bloga
który będzie automatycznie generował nam podstrony z konkretnymi postami więc
naprawdę zapowiada się mega ciekawie przejdźmy sobie do zakładki gatsby jak
widzisz tutaj mamy gotową informacje o tym co trzeba zainstalować żeby w ogóle to
działało więc teraz sobie to zrobimy npm install wklejamy
sobie to co tutaj mieliśmy gatsby plugin mdx mdx js mdx
mdx js react to są trzy paczki które musimy zainstalować
w międzyczasie jak to się instaluje to ja mogę już wejść do gatsby config i
możemy sobie dopisać tutaj gdzieś na przykład pod tym sharpem gatsby plugin
mdx i póki
co to nam wystarczy żeby nasze pliki mdx były przetwarzane poprawnie
jeszcze chwilkę zaraz się zainstaluje okej mamy to i teraz odpalmy sobie
pages i podmieńmy którąś ze stron zobacz
jak wygląda nasz komponenty react zawierający stronę mamy tutaj
właściwie dwie rzeczy tylko napisane blog page i welcome to my blog i te
dwie rzeczy zajmują łącznie jakieś na oko 8 10
linijek kodu zobaczmy jak to będzie z markdownem podmienimy
sobie na razie nazwę tego komponentu tej strony na na przykład
contact old skopiujemy sobie to contact
i końcówka zamieniam ndx zauważ
przede wszystkim że mój edytor nie widzi i w ogóle że to jest mdx
nie rozumie tego najpierw może wywalimy wszystko co było związane
z react zostawię sobie tylko teksty
bo one nam się akurat przydadzą nic nie
muszę tutaj eksportować importować na razie dobra i
teraz żeby to wyglądało tak jak trzeba czyli żeby było jakkolwiek podświetlane
to muszę doinstalować sobie po prostu plugin mdx który będzie mi wspierał
podświetlanie składni o i teraz wygląda to dużo lepiej dobra
i co ja tutaj właściwie zrobiłem stworzyłem plik contact mdx w folderze
pages mamy tutaj tytuł i mamy
tutaj po prostu jakiś prosty tekst mogę nawet sobie tak pójść
grubo jeszcze o zrobić tutaj na przykład italikiem to i teraz po
wpisaniu gatsby develop zobacz co się stanie wchodzimy
sobie na naszą stronę wchodzimy sobie do zakładki kontakt i
zobacz to co my tutaj mamy tutaj mamy
italik więc to na pewno nie jest ta stara strona bo ta stara strona nic takiego nie miała
zresztą ja wpiszę sobie contact old to wejdziemy na naszą
starą stronę to jest ten plik contact old js natomiast pod
adresem contact kryje się nasz mdx po prostu więc
zauważ że możemy sobie po prostu pisać tutaj cokolwiek
nie wiem pierwsze co mi przyszło do głowy to ziemniaki i mydło ale zauważ że możemy sobie
tworzyć content po prostu w oparciu o markdown który
zostanie przetwarzany przez gatsby i wyświetlony na naszej stronie w poprawny
sposób i teraz to gdzie zaczynają się prawdziwe magiczne
rzeczy to że możemy sobie zaimportować na przykład naszego starego kolegę post
nie takiego starego z poprzedniej
lekcji załóżmy że tutaj to description nadal będzie przejdźmy sobie
to contakt mdx na samej górze zobacz co mogę zrobić import uwaga
i zobacz użyłem
właśnie komponentu react wewnątrz pliku niby
markdown ale to jest mdx właśnie więc możemy tutaj zrobić coś takiego że
mamy zarówno markdown
jak i jakieś komponenty react łatwo sobie wyobrazić taką
sytuację że na przykład to mógłby być jakiś input możemy
tu nawet wpisać taki komponent react nikt nam nie zabroni
tego zrobić różnica jest tylko taka że no tutaj nie
będziemy mogli się posługiwać czymś typu used state żeby
jakoś kontrolować te inputy które tutaj mamy ale jak najbardziej jak
najbardziej możemy sobie pisać tego typu rzeczy i one zostaną poprawnie wyświetlone
więc to było takie krótkie wprowadzenie do tego czym jest mdx
nie proponowałbym żeby wykorzystywać to do napisania na
przykład stron tutaj typowo raczej trzymałbym się tego js i styled
components ale oczywiście wybór jak zwykle pozostawiam tobie jeśli uznasz że w jakimś
projekcie będzie to po prostu lepsze zastosowanie to jak najbardziej możesz to zrobić
natomiast to do czego my wykorzystamy mdx to jest po prostu tworzenie
bloga i tworzenie contentu i utrzymywanie tego contentu wewnątrz repozytorium
bez żadnego cms z zewnątrz i to już w następnej lekcji