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+
Za nami kilka godzin naprawdę intensywnego kursu to było wprowadzenie
do gatsby mam nadzieję że ten kurs ci się podobał dla
mnie gatsby jest naprawdę ulubioną technologią frontendową w tym momencie korzystam
z niej bardzo często więc przejdźmy teraz przez takie krótkie podsumowanie
co my w ogóle tutaj zrobiliśmy przede wszystkim ogarnęliśmy
stronę dla architektki ogarnęliśmy stronę która naprawdę mogłaby
ujżeć światło dzienne wygląda naprawdę spoko nie chcę tutaj sam
siebie chwalić bo to brzmi nieskromnie ale naprawdę jest ona okej myślę
że mogłaby spełniać swoją rolę właśnie jako takie portfolio dla dla kogoś
kto tworzy tego typu rzeczy mieliśmy tutaj bloga mieliśmy tutaj galerię
podstronę about i contakt która zostanie stworzona na
warsztatach które będą dołączone do tego kursu i jeśli poszukujesz
zapłaty za to zlecenie wykonania tej strony dla architektki to na
pewno musisz się zwrócić do naszej bohaterki która sprzyjała nam
przez całą tę drogę ponieważ jej nazwisko bardzo często było wykorzystywane nazywa się abigail donutdough
i to ona musi nam zapłacić za tę stronę więc to
jest na pewno taki action point który trzeba wykonać po zakończeniu tego kursu
ale teraz do rzeczy w ogóle co my ogarnęliśmy tutaj przez co
przeszliśmy w tym kursie przede wszystkim dowiedzieliśmy się czym jest gatsby dowiedzieliśmy
się jak go konfigurować dowiedzieliśmy się czym jest routing i jak działa w ogóle gatsby
o co w nim chodzi jak pod maską on ogarnia routing jaką
bibliotekę do tego wykorzystuje przypomnę że jest to reach router i wiele
wiele innych rzeczy które pozwoliły nam efektywnie działać z tą biblioteką dodatkowo
poznaliśmy czym jest graphql i nagle tutaj pojawiło się mnóstwo po prostu
eksplozja możliwości ponieważ mieliśmy tutaj cms dowiedzieliśmy
się czym jest headless cms dowiedzieliśmy się jak pisać cms za pomocą mark
downa czyli w mdx jak to renderować dodatkowo stworzyliśmy
sobie konto na datocms i wykorzystywaliśmy to api do zarządzania treścią
na naszej stronie było tego naprawdę sporo dodatkowo
mieliśmy jeszcze na przykład image sharp który optymalizował w locie nasze obrazki co
jest naprawdę ogromną rewolucją w stosunku do tego co było parę lat temu kiedy frontendowcy
sami w photoshopie musieli wyklikiwać sobie jakość i wielkość obrazków
więc to było naprawdę świetne wyjście ze strony gatsby że wykorzystali
właśnie ten sharp transformer dowiedzieliśmy się jak deployować stronę ale
teraz pytanie co po tym kursie co teraz należy zrobić przede
wszystkim nie przestawaj się uczyć gatsby jest niczym innym jak reactem
więc jeśli masz do zrobienia jakąś aplikację to pomyśl czy nie lepiej byłoby ją napisać
w gatsby po tym co tutaj zobaczyłeś zobaczyłaś jak łatwo się to
konfiguruję i naprawdę gatsby jest bardzo ciekawą alternatywą
dla create react app i nie chcę tutaj zapeszać ani krakać
ale mam wrażenie że przyjdzie taki moment kiedy gatsby wyprzedzi create react app
ponieważ w niczym mu jakby nie ulega jest
równie pełnoprawną jakby maszyną do tworzenia aplikacji tam
gdzie chcemy możemy mieć content statyczny ale tam gdzie chcemy możemy mieć w pełni
dynamiczne widoki i nic nam w tym nie przeszkodzi cytując
kyle matthews które go spotkałem w pradze na evencie reactive conf
kyle powiedział że gatsby naprawdę nie ma żadnych ograniczeń w
stosunku do react dlatego ja jestem naprawdę wielkim zwolennikiem używania
tej technologii jest super wygodna dodatkowo na przykład takie rzeczy jak
konfiguracja webpacka która jest jakoś tam customowa dla projektu
w gatsby jest możliwa bez żadnego ejectowania tak zwanego co
jednak w create react app jest wymagane a wiadomo że jak się zejectuje
create react app to możemy być po prostu bardzo bardzo
smutnymi ludźmi mam nadzieję że ten mój entuzjazm względem tej technologii przeszedł
również na ciebie już nie mogę się doczekać jak pochwalisz się swoimi efektami pracy
koniecznie napisz do mnie maila na helloroman.vlog@gmail.com
jestem ciekaw jakie eksperymenty z gatsby ty poczynisz
do usłyszenia i wielkie dzięki za obejrzenie tego kursu