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 przechodzimy do kolejnego etapu więc teraz pokażę ci
w jaki sposób możemy utworzyć trochę bardziej zaawansowane graphql queries
przy właśnie zaczytywaniu obrazków ale z wykorzystaniem narzędzia o którym mówiłem
już trochę wcześniej natomiast teraz przyszła pora na kompletne jego wyjaśnienie chodzi
oczywiście o transformer sharp i plugin sharp w gatsby to
jest generalnie transformer sharp to jest zewnętrzna biblioteka która nie jest dedykowana
wyłącznie dla gatsby ona polega na tym że po prostu możemy za pomocą niej
modyfikować obrazki możemy je zmniejszać zwiększać zmieniać ich kolory i tak dalej
to wszystko zaraz ci wytłumaczę do tego ona jakby służy i wraz
z nią powstał plugin do gatsby który umożliwia nam wykorzystywanie
w bardzo fajny sposób za pomocą właśnie queries w graphql specjalnych metod
pozwalających na optymalizację obrazków zmiany ich wyglądu więc
za chwilkę pokażę ci krok po kroku jak to wszystko zrobić natomiast zanim
do tego przejdziemy to ostylujmy sobie naszą stronę w taki sposób żeby ona wyglądała już tak
jak na naszym projekcie zajmie nam to dosłownie chwilkę więc teraz uwaga
robimy to naprawdę mega szybko więc wszystkie style
zawrę tutaj wewnątrz naszego pliku żeby po prostu były w jednym miejscu
zwłaszcza że ten layout jest dość prosty nasza strona jest w ogóle
banalna więc nie ma co tutaj się za bardzo rozdrabniać i tworzyć jakiś osobnych
plików jeśli chcesz to zrobić zachęcam oczywiście możesz sobie zrobić na przykład osobny
plik layout który później po prostu będzie służył za template dla tej
strony natomiast ja to zrobię wszystko tutaj zaczniemy sobie od wrappera który będzie
nam oplatał cały content ten navigation możemy sobie wywalić nazwiemy go wrapper
oczywiście przez content mam na myśli wszystko oprócz
obrazka czyli te tekstowe rzeczy może nawet go nazwę
content wrapper żeby nie było i
tutaj myślałem o gridzie ale tak naprawdę jak sobie spojrzymy na te
rzeczy to zobaczymy że mamy tutaj zawsze taki padding dookoła i tak
dalej i na gridzie byłby problem bo jak bym zrobił grida to ten padding byłby
uwzględniany więc ten obrazek tutaj po prawej musi być na absolucie żeby
po prostu dotykał krawędzi ekranu więc zrobimy to trochę inaczej zrobimy
tutaj sobie szerokość powiedzmy 60% text
align zrobimy do prawej strony wrzucimy
sobie tutaj wszystkie nasze elementy zrobimy jeszcze const image
wrapper tutaj
będzie img position absolute
od góry 0 od prawej 0 width
zrobimy sobie powiedzmy 35 zobaczymy jak tutaj będzie 35%
oczywiście i object-fit zrobimy cover tak
żeby nasz obrazek się tutaj zmieścił i
mamy prawie że nasz efekt gotowy tutaj myślę że można troszkę jeszcze
poprawić zrobimy sobie może 65% dobra
możemy zrobić sobie display flex na kolumnie czyli
flex-direction column i justify-content-center
w tym momencie będziemy mieć wszystko
na środku jeszcze tylko trzeba dodać oprócz
width height 100 ovh z
tym tylko wyjątkiem że od góry tutaj mamy w naszym global
styles właśnie 80 pikseli paddingu więc możemy zrobić sobie
tutaj calc 100 ovh minus 80 pikseli
i w tym momencie to powinno już być na środku możemy
ostylować sobie h1 już wewnątrz tego wrappera żeby zaoszczędzić czas
damy tutaj jakieś 85 pikseli dla font size margin
dla h1 zrobimy zero dla p zrobimy w
taki sposób i myślę że jeszcze można
tutaj dodać że width może mieć 40% szerokości
naszego o naszego kontenera jeszcze
tutaj do image wrapper dodałem 100 ovh żebyśmy nie mieli scrolla na tej
stronie i w tym momencie mamy praktycznie gotowy nasz
hero zmienimy tylko
tutaj napis i żeby go łamać możemy go coś tutaj złamać
w ten sposób with 40% on się powinien elegancko
super złamać line-height widzę że jest nie do końca fajny
09 myślę że da radę git myślę że możemy
ten layout przyjąć zaakceptowalny oczywiście można by było się tutaj jeszcze
troszkę pobawić jeśli masz ochotę to zachęcam natomiast my już wracamy tutaj do
pracy nad naszymi obrazkami