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+
Cześć zapraszam cię na mój
kurs poświęcony gatsby js oparty na react generatorowi stron
statycznych i progresywnych aplikacji webowych gatsby wdarł się na frontendowe
salony niczym prawdziwa gwiazda unikalne rozwiązania dające ogromną swobodę
deweloperom w połączeniu z potężnym ekosystemem react sprawiły
że już dawno żadna technologia nie wzbudziła takiego entuzjazmu i zainteresowania
ostatni rok zdecydowanie należał właśnie do niego jeśli chodzi
o wzrost popularności ale także o komfort z jakim można pisać w nim projekty ciężko
ignorować rozwiązanie które moim zdaniem stanowi poważną konkurencję
dla popularnej paczki create react app w tym kursie dowiesz się
na czym polega sekret tej fenomenalnej technologii programiści
często myśląc o gatsby widzą pewne ograniczenia z nim związane w końcu
na samym początku nazywano go wyłącznie generatorem stron statycznych przechodząc
jednak przez poszczególne działy kursu pokażę ci że o ograniczeniach nie ma tutaj mowy
są za to przemyślane i wygodne rozwiązania pozostaje jednak pytanie czy
gatsby to nadal jest react i tak i nie gatsby to
faktycznie react tylko że wzbogacony o pewne supermoce w pierwszej
części kursu opowiem ci jak te moce poprawnie wykorzystywać zobaczysz jak
działa routing jak tworzy się uniwersalne layouty dla stron i globalne
style przy wykorzystaniu staled components pokażę ci też jak wykorzystywać
największą przewagę gatsby czyli jego pluginy już teraz mogę
ci powiedzieć że jest ich ponad 1500 w dalszej części kursu
poznasz też podstawy graphql rewolucyjnego rozwiązania stworzonego
przez facebooka to właśnie graphq zasila gatsby w warstwie
danych nieważne czy mówimy obrazkach o plikach markdown json
yaml czy po prostu o api aby to wszystko ze sobą pogodzić
musisz znać graphql nie znasz go nie przejmuj się wspólnie
przejdziemy przez podstawy i zobaczysz że korzystanie z niego to czysta przyjemność kiedy
już poczujesz się pewnie w graphql przejdziemy do jednego z najciekawszych rozwiązań które
oferuje nam gatsby czyli do automatycznego przetwarzania i optymalizowania
obrazków za pomocą kilku linijek graphql zobaczysz
jak prosto możemy tworzyć wiele opcji tego samego obrazka dostosowanych
do różnych rozdzielczości koniec grzebania w photoshopie i dopasowywanie
obrazków niech kod zrobi to za nas a jeśli uważasz że używanie
graphql to przesada do zaczytania zwykłego obrazka to uwierz
mi że po tym kursie ciężko będzie ci wrócić do tradycyjnych rozwiązań pewnie
wiesz że gatsby jest dość popularną technologię wybieraną do tworzenia blogów
e-commerce i innych stron na których mamy jakieś powtarzalne elementy
żeby pomóc ci zrozumieć jak ten mechanizm działa stworzymy sobie w kursie
bloga opartego o markdown a potem przeniesiemy go do headless
cms swoją drogą headless cms to również jedno z częściej pojawiających
się haseł w ciągu ostatnich kilku miesięcy dlatego już nie mogę się doczekać aż pokażę
ci jak prosto zarządzać treścią z poziomu właśnie tego narzędzia kiedy
już stworzymy naszą stronę podepniemy cms wygenerujemy automatycznie podstrony
zoptymalizujemy obrazki w końcu nadejdzie ten moment aby wdrożyć
naszą stronę czy też zapożyczając słówko od anglików wydeployować w
tym celu uzyjemy znanego i lubianego netlify dzięki któremu w ciągu
zaledwie kilku minut nasza strona pojawi się pod prawdziwym adresem internetowym to
co lecimy pisać kod