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 zaczniemy już przygotowywanie sobie naszej struktury
projektu pod to co mamy tutaj w projekcie w figma w ogóle żeby dostać się
do tej figmy możecie wejść sobie na stronę bit.ly/eduweb-gatsby
taki jest adres i po wpisaniu tego w przeglądarkę
możecie sobie zobaczyć zarówno prezentacje które były w tym kursie
na przykład jeśli wolicie sobie przelecieć przez nie jak po slajdach zamiast
oglądać odcinek a zobaczycie też tutaj projekt oczywiście
który przygotowałem tak więc nasz projekt składa się ze strony głównej
i z czterech podstron gallery articles contakt i about i
teraz przejdziemy sobie do naszego kodu i zaczniemy przygotowywać to wszystko
pierwsze co ja lubię robić to wywalić po prostu niepotrzebne strony więc możemy wywalić sobie page 2
blog może zostać ponieważ będziemy mieć blog 404
pojawia się zawsze wtedy kiedy jakaś strona jest nieznaleziona więc
jeśli teraz odpalimy sobie gatsby develop i teraz przejdę sobie na
naszą stronę localhost 8000 i po slashu wpiszę coś co nie
istnieje na przykład roman to zobaczycie że mam tutaj
właśnie w stronę 404 i jest to strona należąca
do development czyli to nie jest ta strona którą zobaczył użytkownik
to jest strona która miała nam pomóc w developmencie czyli jeśli chcemy na przykład przejść
na inną podstronę to gatsby nam podpowie jakie inne podstrony istnieją
a istnieje na przykład strona główna blog i właśnie 404 a jeśli chcemy zobaczyć
czy strona 404 która jest przygotowana dla naszych użytkowników istnieje
no to możemy przejść sobie do preview custom 404 page
i tak wygląda ta strona którą mamy zamkniętą w tym oto
komponencie dobra tak naprawdę żeby wszystko było zgodne z projektem
to nasz blog powinien nazywać się articles żeby nam się nie myliło mamy
jeszcze stronę gallery później
mamy jeszcze stronę contact i
czy coś nam jeszcze zostało about jeszcze mamy about dobra
mamy wszystkie nasze podstrony które muszą się znaleźć jeszcze szybko tylko zmienię
nazwy komponentów żeby w każdej się zgadzało w
gallery będziemy mieć gallery
page w contact będziemy mieć contact
page articles mamy okej i
tutaj mamy about page zauważ że każdą stronę
żeby później w developmencie nam się nie myliły komponenty ze stronami każdą
stronę kończę na nazwę page żeby po prostu było wiadomo że
jest to strona nie jest to żaden pojedynczy komponent dobra i tak
jak już mówiłem będziemy w tym kursie wykorzystywać styled components więc teraz
pora na zainstalowanie ich jeśli wejdziemy sobie do dokumentacji gatsby i
wpiszemy styled components to znajdziemy nawet instrukcję jak to zainstalować w gatsby
większość takich popularnych paczek właśnie jest fajnie opisana tutaj w dokumentacji
gatsby a co więcej możemy sobie po prostu skopiować komendę która
instaluje nam wszystkie dependencje wrócić do naszego edytora wpisać
to tutaj poczekać aż się zainstaluje jedyne co musimy zrobić
to to co mamy opisane tutaj czyli modyfikacja
gatsby config tak żeby gatsby wiedział że korzystamy ze styled components teraz
wejdziemy sobie do bardzo ważnego pliku jest to gatsby config właśnie i
tutaj mamy jak widzisz wszystkie pluginy które mamy zainstalowane w naszym gatsby
mamy tutaj helmet który widziałeś widziałaś już
wcześniej w naszym komponencie seo to był ten komponent
odpowiedzialny za wstrzykiwanie danych do heada w naszym html
więc tutaj żeby helmet działał poprawnie to gatsby
jeszcze właśnie musi wykorzystywać specjalny plugin który nazywa
się jak react helmet i zauważ że deklaracja tego pluginu
tutaj w gatsby to jest po prostu zwykły string z nazwą jeśli
istnieją jakieś parametry które trzeba dodać do pluginu które trzeba sprecyzować żeby
ten plugin działał poprawnie albo w jakiś specyficzny sposób to wtedy robimy
obiekt w którym nazywamy nasz plugin w kluczu
kluczu resolve a następnie robimy obiekt options gdzie mamy dodatkowe
opcje dla naszego pluginu w przypadku styled components jedyne co
musimy zrobić to zadeklarować go na przykład tutaj w taki
oto sposób i nasze styled components już za chwilę zaczną działać jeśli chcesz
przeczytać więcej na temat samego pluginu styled components to wystarczy
że wyjdziemy sobie do zakładki plugins wejdziemy
tutaj i zobaczymy jakie mamy na przykład dodatkowe opcje tutaj mamy coś takiego
jak na przykład display name czyli
nadpisanie default wartości dla wyświetlania
nazw komponentów w html już później jakby w inspektorze
my chcemy żeby te nazwy zostały żeby łatwiej było nam debugowac w razie
gdyby coś się nam zepsuło więc zostawiamy sam string
gatsby plugin styled components to nam wystarczy jeśli zastanawiasz
się nad kolejnością czy na przykład ten plugin mógłby się znajdować tutaj albo tutaj to
pewnie mógłby i nic się nie stanie zazwyczaj kolejność tych pluginów
nie ma żadnego znaczenia w jakichś tam naprawdę skrajnych sytuacjach podobno
są jakieś przypadki które mogą coś tam tutaj namieszać ale jeszcze się nie spotkałem
w mojej pracy tutaj z takim przypadkiem więc raczej nie ma się czym martwić
przy okazji zerknijmy jeszcze jakie tutaj mamy pluginy do pododawane
mamy tutaj na przykład plugin manifest który zawiera po prostu
dane które później znajdują się w manifest json które następnie
zostanie wykorzystane przy feature'ach związanych z progressive web app takim
jak na przykład background color czyli jaki kolor paska
na telefonie pojawi się kiedy ktoś odpali właśnie na
telefonie z androidem naszą aplikację czy też akurat w
tym przypadku stronę mamy też link do ikonki która w tym momencie
znajduje się w images i za chwilkę będzie nam pluło tutaj błędem
ponieważ po prostu przeniesiemy ją w inne miejsce i też zmienimy ją
więc na razie może wyłącz my sobie ten plugin nie będzie on nam w tej
chwili potrzebny podobnie wyłączony mamy plugin gatsby
plugin offline który służy do tego żeby po prostu łatwiej cache'ować
assety które już pobrane zostały przez użytkownika i przez to
nasza strona będzie ładować się szybciej to na razie też nie jest nam potrzebne możemy to włączyć
dopiero przy samym deploymencie więc pozostaje nam tylko 5 pluginów
z czego wszystkie będą wykorzystywane więc tak już to zostawmy
na razie a my teraz przejdźmy sobie do jakiegoś komponentu i sprawdźmy czy
faktycznie nasze styled components zaczęły działać może wejdźmy sobie do
strony głównej zaimportujmy sobie styled do styled components
stwórz my sobie jakiś div który po
prostu będzie miał background color pink zawsze
używam różowego w tego typu przykładach nie wiem czemu okej
to jaki gatsby develop teraz zobaczymy
czy nasze styled components faktycznie działają mamy różowy
kwadrat więc wszystko jest jak najbardziej w porządku dobra więc
teraz jeszcze mały porządek w src tworzymy sobie assets to
zawsze w takim folderze trzymam wszystkie moje obrazki i też teraz go tutaj
przeniosę nasza strona główna się właśnie zepsuła ponieważ mamy tutaj obrazek
który sobie importowaliśmy więc teraz go po prostu stąd wywalmy tak
samo usuńmy sobie ten image stąd możemy
też usunąć layout który w naszym przypadku będzie wyglądał zupełnie inaczej i też inaczej
będziemy definiować sobie globalne style więc to wszystko możemy wywalić
header również jest nam niepotrzebny component seo myślę
że też możemy sobie na razie wywalić ewentualnie wrócimy do tego jak tworzyć tego typu
rzeczy na koniec tego kursu tak więc
w components nie mamy teraz absolutnie nic i może to co najpierw
sobie stworzymy to coś naprawdę prostego spójrzmy na nasz projekt
i myślę że możemy zacząć
sobie od komponentu nawigacji który znajduje się po prostu na każdej
naszej stronie więc teraz będąc w folderze components stworzę sobie po prostu
folder navigation a wewnątrz
niego plik navigation kropka js
wewnątrz niego stwórzmy jakiś
na razie bardzo podstawowy komponent za importujmy sobie reacta okej
i na tym się zatrzymamy mamy folder navigation który ma taką podstawową strukturę
w następnych lekcjach zaczniemy sobie to wszystko tutaj dopracowywać to
co jeszcze możemy zrobić to wywalić zarówno ikonę gatsby jak i
obrazek astronauty nie będą nam one potrzebne będziemy mieć swoje
obrazki i w ten sposób mamy taką podstawową strukturę przygotowaną
a w następnych lekcjach zaczniemy już dodawać kolejne elementy do
naszej układanki aby ostatecznie wylądować z czymś tak