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+
Przyszła pora na ostylowanie naszego headera i przygotowanie
w ogóle całej strony głównej więc teraz zajmiemy się właśnie stworzeniem
tego tutaj elementu zanim zaczniemy cokolwiek stylować to jeszcze musimy dodać font
montserrat który wykorzystałem tutaj w tym kursie to jest google
font więc bardzo łatwo będzie można go załadować użyjemy do tego kolejnego pluginu
nazywa się gatsby plugin prefetch google fonts nazwa dość długa
ale sam plugin jest bardzo przydatny więc teraz po prostu go zainstalujemy
mogę sobie skopiować jego nazwę wpisujemy
npm install save nazwa pluginu czekam
aż paczka się zainstaluję a w tym czasie dodamy jego deklaracje tutaj w tym miejscu i
w tym przypadku jak widzisz tutaj jest to plugin który jednak
potrzebuje trochę więcej informacji więc teraz możemy nawet skopiować sobie
ten obiekt który mamy tutaj w dokumentacji gatsby na
szczęście potrzebujemy tylko fragmentu więc nie musisz tego wszystkiego przepisywać lub wchodzić
do dokumentacji i kopiować wystarczy nam jedna rodzina
fontu w family
wpisujemy montserrat subsets
nam niepotrzebne jeszcze widziałem że tutaj memy o klucz variants
który będzie nam potrzebny ponieważ potrzebujemy aż trzech grubości naszego
fontu będzie to regular bold
i semibold czyli 400 600 i 700
400 600 700 już mamy i
w ten sposób na przykład został zaczytany możemy sobie przejść do naszej nawigacji
i ostylować nasz component będziemy mieć tutaj tak
naprawdę kilka rzeczy pierwszą będzie navigation wrapper czyli to najpierw
zainstalujemy sobie styled w tym pliku nazwiemy to
na przykład navigation wrapper okej
zobaczmy co my tutaj mamy to jest po
prostu wrapper który ma wszystkie itemy na flex nie
będzie tu żadnej skomplikowanej filozofii na potrzeby tego kursu nie przygotowujemy
wersji mobilnej dla tej strony to by była trochę przesada szkoda na to
czasu jeśli chcesz możesz sobie spokojnie ten layout dostosować też
do wersji mobilnej możesz to potraktować jako ćwiczenie najbardziej w ramach tego
kursu można coś takiego zrobić natomiast my tutaj skupimy się tylko na
wersji desktopowej dlatego nie będzie tutaj żadnych media queries tu
mam po prostu display flex align items ceter justify content
start flex start podmieniamy
nasz pierwszy element odpalimy sobie serwer deweloperski
żeby zobaczyć czy nasza strona faktycznie wygląda tak jak
trzeba żeby to zrobić jeszcze musimy po prostu zaimportować naszą
nawigację do którejkolwiek ze stron wybierzmy sobie na przykład pierwszą z brzegu wywalmy
nasz layout nie będzie nam już potrzebny zresztą chyba go usunęliśmy nawet
przed chwilę seo
również styled div nie będzie nam potrzebny link
może sobie zostać okej mamy jeszcze jeden błąd
gatsby source file system ma niepoprawną ścieżkę wynika
to z tego że w gatsby config tutaj mamy src images nie ma takiej
ścieżki mamy src assets images więc możemy
po prostu poprawić i na razie to
powinno nam załatwić sprawę dobra
mamy jeszcze jeden błąd nie można odpalić seo w 404
wywalamy seo jak najbardziej nie jest to nam potrzebne layout
podobnie
zobaczmy jeszcze pozostałe strony tutaj też na
pewno mielibyśmy ten sam błąd z każdej strony po prostu usuwamy
ten layout okej wchodzimy
mi na 8000 i mamy naszą nawigację by
było nam łatwiej podzieliłem teraz ekran na pół i teraz przystąpimy do dalszej
części naszego stylowania więc wszędzie gdzie będziemy mieć jakiekolwiek
fonty chcemy żeby to było font family montserrat teraz zobaczymy czy się
zmieniał elegancko zmieniły się teraz możemy
ostylować sobie logo w naszym przypadku będzie to span
nasze logo jest pisane sprawdźmy tylko jakiej to
jest wielkości tu mamy 20 font-size
20 pikseli dobra i pozostało nam teraz
jeszcze tylko navigation items możemy to nazwać navigation
menu albo navigation
list tutaj
zawsze resetuje sobie te wszystkie domyślne
wartości dla listy musimy podmienić
tylko naszą l dobra i
jeszcze jedna rzecz display flex żebyśmy mieli to wszystko w jednej linijce
linki z tego co pamiętam mamy semibold albo
możemy to zrobić w sumie dla navigation list item styled
li w tym przypadku i tu mamy font-weight tu
będzie 600 myślę że font size może być troszkę
mniejszy niż teraz spróbujemy 15 podmienimy
sobie wszystkie li i jeszcze
musimy dodać tylko margines z lewej strony ponieważ
tak mamy tutaj że każdy link z lewej
strony ma około 40 pikseli
tu mamy między poszczególnymi linkami 32 a między logiem
mamy 43 więc możemy zrobić tak a logo
dostanie jeszcze margin-right 10 pikseli i nasze menu
wygląda już tak jak w projekcie nie zapominajmy jednak że to są linki
do poszczególnych stron więc tutaj też musimy zawrzeć linki i dlatego teraz
zagnieździmy sobie jeszcze wewnątrz li po linku z gatsby
więc teraz importujemy sobie link to będzie named import
czyli w nawiasach klamrowych i
teraz w każdym linku musimy dodać jeszcze propsa to który
będzie właśnie nas prowadził do poszczególnych stron w przypadku articles
będzie to articles generalnie nazwy są takie same jak
nazwy naszych linków a nazwy do których prowadzimy tutaj wynikają
bezpośrednio z nazw plików które mamy w folderze pages więc jeśli chcemy
żeby nasz link prowadził do strony articles to ta strona
musi nazywać się articles kropka js a nasz link musi prowadzić do slash
articles tylko wtedy ten link zadziała sprawdźmy to teraz stylami
się na razie nie przejmujemy prostu klikniemy sobie na articles i jak widzisz mamy
tutaj stronę articles jeśli sobie wrócimy do about to mamy stronę about gallery
gallery i contact i generalnie tak właśnie działa
routing w gatsby nie musimy tu mieć żadnego react router mamy tutaj
zaszyty pod maską reach router to jest inny router dla
react natomiast my nie mamy za bardzo do niego dostępu
to znaczy jeśli chcielibyśmy wykorzystać jakieś bardziej zaawansowane opcje to jak najbardziej mamy
tutaj dostęp do link api i on jest dobrze opisany
w dokumentacji gatsby natomiast na potrzeby teraz tego kursu i właściwie tej lekcji
to nie musimy tutaj nic więcej grzebać wystarczy że zaimportujemy sobie link
właśnie z gatsby podamy mu propa to gdzie podamy nazwę
strony a właściwie pliku js tylko oczywiście bez końcówki js i
tak właśnie działa routing tak przenosi nas gatsby do poszczególnych stron więc
teraz jeszcze jedną małą zmianą którą chcemy tutaj wprowadzić jest to żeby te linki faktycznie
wyglądały tak jak wcześniej a nie były podkreślonymi
niebieskimi linkami więc możemy zrobić to na dwa sposoby albo moglibyśmy
ostylować sobie link albo możemy po prostu wewnątrz naszego navigation list-item
zagnieździć sobie a ponieważ jeśli wejdziemy sobie do inspektora
klikniemy na któryś link to zobaczymy że jest to po prostu tak a zagnieżdżone
wewnątrz navigation list item więc spokojnie możemy sobie to też zagnieździć nie
ma potrzeby żeby stylować to osobno tutaj robimy text-decoration none
color inherit i
nasze linki z powrotem są czarne zapomnieliśmy jeszcze o jednej rzeczy tak
naprawdę to ja zapomniałem nasze logo też jest linkiem więc tutaj możemy
zrobić sobie link i
z racji że nasze logo prowadzi do strony głównej to link do tego
będzie po prostu pustym slashem to znaczy pojedynczym slashem i to wszystko możemy
teraz sobie skopiować style dla a i wrzucić je do logo albo
możemy zrobić jeszcze inną opcję czyli to a zagnieździć
sobie w navigation wrapper i wtedy nie musimy się przejmować ani w logo ani
w navigation list item tymi elementami ponieważ one zostaną odziedziczone
z tego najbardziej zewnętrznego elementu i
wszystko gra nasze menu wygląda spoko jedynym problemem jaki teraz widzisz
jest to że jak przyjdziemy sobie do innej strony to już to logo nam znika ponieważ ono
zostało zawarte tylko i wyłącznie w index js a my chcemy żeby
ono należało tak naprawdę do tego layoutu i tym zajmiemy się już w następnej lekcji