Hello, Gatsby!

Bloga rozpoczynam serią wpisów o Gatsbym, popularnym i coraz popularniejszym frameworku Reacta.

Zainteresowanym Gatsbym polecam:

• darmowy kurs Przeprogramowanych: Gatsby - krok po kroku, od zera do gotowej aplikacji, jest to seria, w tej chwili siedmiu artykułów, na pewno wartych przeczytania. Lektura obowiązkowa. Ponadto trzy wpisy na blogu Łukasza Zielińskiego 3 post(ów) z tagiem “Gatsby.js”
• artykuł na mojej stronie: GatsbyJS, choć, prawdę mówiąc, po wykasowaniu / przeniesieniu zdublowanej treści niewiele tam już pozostało.

Wszystkie przedstawione tu rozwiązania sprawdziłem, nie jest to copypaste dokumentacji. Jednak żadnej gwarancji nie mogę udzielić, bo na pewno wkradło się tu trochę błędów. Będę wdzięczny za wskazanie ich i wszystkie tak szybko jak to będzie możliwe, poprawię. Kontakt przez formularz kontaktowy na stronie lub facebooka dygresje.info.

Innym rodzajem błędu, który mogłem tu popełnić, jest uznanie czegoś za zbyt oczywiste i pominięcie tego w opisie. Tutaj też proszę o zwrócenie uwagi.

Dotychczasowe wpisy

• Gatsby cz. 1 - instalacja - Ogólne informacje, czym jest Gatsby, metody instalacji i własny Gatsby From Scratch, hierarchia katalogów, konfiguracja, React Fragments, komponent Link, pierwsza działająca strona.
• Gatsby cz. 2 - komponenty - Komponenty, layout.js i komponenty layoutu. Budowa struktury strony. Przekazywanie propsów i sterowanie wyświetlaniem elementów strony. Web API Location.
• Gatsby cz. 3 - CSS - Jak w Gatsbym zastosować CSS: global.css, CSS-in-JS, frameworki i biblioteki CSS, preprocesory, Font Awesome, Google Fonts, Bootstrap Icons.
• Gatsby cz. 4 - GraphQL & obrazki - GraphQL zastępuje REST API i plugin gatsby-plugin-image
• Gatsby cz. 5 - pluginy - Najbardziej potrzebne pluginy: dostęp do plików, obrazki, SEO, breadcrumb itd.
• Gatsby cz. 6 - dawaj, dawaj, deploy - Publikacja strony online. Czym jest CI/CD i do czego nam jest potrzebne. Znaczenie gita, GitHub. Hosting: GitHub Pages, Netlify, Gatsby Cloud, Vercel i wreszcie... zwykły serwer.
• Gatsby cz. 7 - blog MDX cz. 1 - Markdown a MDX, programistyczne tworzenie stron z gatsby-node.js i File System Route API, automatycznie generowane tagi
• Gatsby cz. 8 - menu RWD z Hamburgerem - Responsywne menu Hamburger, Dropdown Menu oraz Mega Menu

Co dalej?

W lipcu i sierpniu 2021 w ciągu dwóch tygodni napisałem / dopracowałem siedem wpisów, które były już wcześniej w różnym stopniu gotowe, w tym dwa kompletnie od zera. To było interesujące, ale potem nastąpiły inne obowiązki, m.in. ruszyłem z cyklem wpisów o Enigmie. Dlatego nastąpiła dłuższa przerwa.

Teraz w maju 2022 dodałem wpis o menu i w tym roku pojawią się kolejne wpisy, które jak sądzę zamkną ten cykl aż do czasu kiedy / jeśli w architekturze Gatsby'ego pojawia się poważne zmiany.

Plan jest dość płynny, ale na tę chwilę przedstawia się następująco:

• Blog cz. 2: chmura tagów, paginacja, poprzedni / następny, automatyczna publikacja danego dnia, komentarze...
• Headless CMS: Wordpress, Drupal, Strapi i inne.
• Integracje, szablony, PWA, SSR itp. itd.

Docelowo powinno wyjść około 12 wpisów i w tej formule seria powinna się zamknąć do jesieni 2022. Oczywiście w miarę rozwoju Gatsby'ego będą się pojawiać nowości i dopóki będę zainteresowany tym frameworkiem, treść będzie aktualizowana.

Możliwe, że z czasem będę przenosił treść z wpisu do wpisu; może w ogóle inaczej to zorganizuję. Więc wszystko może się zmienić, ale w razie gdyby jakaś informacja zniknęła z dotychczasowego miejsca - ten adres: `https://dygresje.info/blog/gatsby` zostaje i nie ulegnie zmianie.

Założenia

Co zaś do formuły treści: mnie najbardziej interesuje nie teoria, a konkretny sposób budowania rzeczy. Więcej się nauczyłem z analizy kodu niż kilobajtów dokumentacji (ma to też wiele wad, więc nie zalecam; niech każdy robi tak jak lubi/chce/musi, w tej kolejności). Dlatego często jest to prezentacja większych fragmentów kodu z kilkoma ważnymi elementami i w miarę dokładnym opisem tego, co się tam dzieje. Uważam, że jest to szybsze niż składanie działającej maszyny z drobnych porozrzucanych po całym artykule kawałków. Mając od razu działający kod szybko można przejść do eksperymentów i łatwiej zapamiętać to, co się udało zrozumieć.

Założeniem każdego odcinka serii jest bycie success-complete, chodzi o to, żeby po przeczytaniu można było coś zbudować. Już w pierwszym odcinku zobaczysz własną stronę w Gatsbym.

Zakładam, że czytelnik dobrze zna podstawy JS, rozumie jak działa React i zna JSX, używa gita, umie poruszać się w konsoli i wie, jak działa strona WWW. Pisząc o konsoli, mam na myśli konsolę linuksową i naprawdę tylko podstawowe polecenia typu cd, mkdir, rm, ls.

Postaram się też odróżniać, kiedy używamy mechanizmów Gatsby'ego, kiedy samego Reacta, a kiedy jest to sam JS.