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+
Skoro już udało nam się wyczarować pierwsze podglądy dla postów to teraz zaczniemy
sobie od brancha 05.4 w którym dokonałem takich początkowych zmian
które ułatwią nam po prostu development żebyśmy nie musieli się skupiać aż tak na stylach
więc teraz jeśli przyjdziemy sobie do strony to powinna ona wyglądać mniej więcej tak jak
widzisz parę rzeczy się tutaj pozmieniało dodałem komponent na samej górze który się
nazywa page info i teraz to tutaj będziemy dodawać dane dotyczące
początku strony czyli ten tytuł i ten paragraf tutaj
to właśnie będzie zawarte w tym miejscu dodatkowo pojawił się jeszcze
artykuł preview czyli taki komponent który ma właśnie ten
prostokąt ze zdjęciem w tle z tytułem i z tym excerpt
tutaj naszym czyli tym wyrywkiem który zaczyna nam jakąś historię
o tym artykule który będziemy czytać zachęcam cię do tego żeby sobie szybko
przejrzeć jak te komponenty są napisane dodam tylko że ten obrazek na razie nie pochodzi
z nikąd po prostu to jest tak zwany dummy image czyli po prostu wrzucamy tutaj
na pałę obrazek z unsplash a teraz już właśnie pokażę
ci jak zastosować obrazki które mamy w
naszym blogu które będą wykorzystywane do naszego bloga czyli te z projektu tutaj
w naszych podglądach do postów dodałem oczywiście te
obrazki one teraz znajdują się w images w folderze blog i tutaj
mamy wszystkie te obrazki które będą nam potrzebne zauważ
że tytuły tych obrazków odpowiadają slugom z naszych plików
mdx więc jeśli mamy dine and design to tutaj mamy dine
and design kropka jpg i teraz właśnie skoro już tutaj jesteśmy w tym mdx gdzie
to wydaje mi się że to jest dobry moment żeby pokazać ci jak możemy wkomponować
obrazek w we front matter tak naprawdę naszego
posta zanim to jednak zrobię to dołożę może jeszcze tak ze dwa trzy posty tutaj
żeby nasza strona po prostu wyglądała troszkę lepiej więc teraz odpalimy
sobie serwer deweloperski i zaczniemy pracę
skopiujemy sobie po prostu ten jeden artykuł jeszcze tak ze
3 razy po drodze zmienimy mu jeszcze nazwy
trzeci artykuł to będzie tidy
or messy kolejny to będzie 04 colorful ideas i ostatni możemy
zrobić 05 where do you keep it
okej mamy nasze trzy artykuły tutaj podmienimy
jeszcze tytuły okej
dodaliśmy sobie kilka artykułów sprawdźmy teraz naszą stronę jak
widzisz pojawiły się one również tutaj także wszystko działa jak należy nasze
dane dodają się już automatycznie więc teraz przyszła pora na obrazki
najłatwiejszym sposobem na dodanie obrazków w pliku mdx
jest po prostu użyć jakiegoś specjanego pola na przykład image
albo featured image może użyjmy tutaj właśnie featured
image i musimy tutaj podać
ścieżkę relatywną względem naszego postu
do naszego obrazka więc tutaj musimy wyjść z folderu
articles wyjść z folderu data wejść do folderu assets wejść
do folderu images wejść do folderu blog i wpisać nawet
żeby się nie pomylić to sobie możemy tego slug tutaj skopiować kropka
jpg i te samą operacje teraz wykonamy
dla każdego innego posta najpierw
sobie powklejam później po podmieniam i teraz podmieniamy dine and
design dobra mamy wszystkie nasze obrazki
przynajmniej ścieżki do nich i teraz co możemy zrobić żeby te
obrazki wyciągnąć w naszym front matter przede wszystkim przebuduje my sobie
nasz projekt czyli gatsby develop odpalimy jeszcze raz dla
pewności żeby nasz graphql załapał te zmianę która zaszła tutaj on
musi teraz jeszcze raz utworzyć jakby zmapować sobie te query i te pola które możemy
właśnie wyciągać przez graphql więc teraz jak
sobie tu wejdziemy odświeżymy stronę to powinniśmy
tutaj mieć kolejne pole control spacja mamy featured images
i teraz to co jest naprawdę najciekawsze w tym wszystkim to
po prostu aż mi serce szybciej bije kiedy o tym myślę zobacz co możemy
tutaj zrobić child image sharp możemy sobie wybrać
na przykład fluid max width dajmy sobie 700
max height 500 kto nam
zabroni i tutaj wyciągnijmy sobie tylko src kopiujemy
to query wrzucamy je do naszego articles
tutaj z racji że to będzie
super długi obiekt to teraz możemy zrobić sobie jeszcze coś takiego
że
z data wyciągniemy sobie parę rzeczy tutaj
możemy sobie wywalić w takim razie to oczywiście
jak zwykle w moim przypadku literówkę dobra strona nadal działa
i teraz wewnątrz tego item tutaj możemy sobie
też zrobić destrukturyzację czyli z item wyciągniemy
sobie front matter tak na pewno excerpt i z
front matter możemy wyciągnąć sobie jeszcze albo dobra
to zamiast tego front matter pierwszego po prostu wyciągniemy to co
on ma w bebechach tutaj czyli title slug author
featured image teraz tak to możemy
wywalić to możemy wywalić i
jako background czyli nowy prop który jeszcze nie istnieje w tym
komponencie podamy sobie featured image kropka
tutaj muszę się zawsze posiłkować child image sharp
fluid src przejdźmy sobie
teraz do article preview wyciągnijmy sobie background
tutaj jako kolejny prop możemy go podać do naszego wrappera w ten sposób
i
teraz jedyne co musimy zrobić to to zastąpić propem
który sobie podaliśmy nazywa się background i
teoretycznie to powinno zadziałać pięknie
nasze obrazki się podmieniły więc prześledzimy teraz po kolei
co my tutaj zrobiliśmy żeby to jak zwykle wyjaśnić krok po kroku dodaliśmy
sobie nowe pole do mdx nazywa się featured image ono mogłoby się nazywać featured
kangur dobrze mnie znasz wiesz że mógłbym to zrobić mamy tutaj ścieżkę
relatywną do obrazka który znajduje się w tym folderze teraz
ścieżka relatywna jest względem naszego piku mdx więc jakby
musimy sobie wyobrazić że siedzimy razem z tym plikiem w folderze articles i musimy
przejść z nim całą drogę wpisujemy te ścieżkę wtedy mamy
możliwość zrobienia query w graphql na naszej stronie
articles js z racji że we front matter
znajduje się ścieżka do naszego pliku to możemy wykorzystać sharp jako
transformer do obrazków możemy cokolwiek zrobić z tym obrazkiem co chcemy
i na przykład wyciągnąć z niego src ale moglibyśmy z niego wyciągnąć na przykład sourced
moglibyśmy z niego wyciągnąć sizes moglibyśmy z niego wyciągnąć gatby sharp
image fluid jak to tam było zawsze
nie pamiętam no base 64 na przykład i teraz uwaga podpowiedź
dla ciebie i też zadanie domowe spróbuj w komponencie
articles preview zamienić ten preview wrapper z
background na to żebyśmy mieli tutaj normalnie gatsby image
do którego możemy podać gatsby image sharp fluid
tracedSVG tak żeby on się pojawiał dokładnie tak samo jak
na naszej stronie głównej pojawia się o ten obrazek to
jest twoje zadanie domowe znajdziesz rozwiązanie oczywiście w następnej lekcji