EN
React – biblioteka, a w zasadzie framework do tworzenia interfejsów użytkownika jest oparty na komponentach, które zarządzają własnym stanem, dzięki czemu budowa aplikacji staje się zabawą klockami LEGO. W tym wpisie przedstawimy zasady, którymi warto kierować się przy tworzeniu reacta.
Co oznacza robić react-a dobrze?
Punkt pierwszy, ostatni, jedyny… – nie popsuć sobie zabawy.
Zacznij od pytań zadanych klientowi
Kto pyta nie błądzi. Rozmawiaj z klientem (nawet jeżeli jesteś nim sam), o tym co chcesz zobaczyć w finalnej wersji, o tym co chcesz zapewnić odbiorcy, jakimi wektorami masz się kierować podczas tworzenia aplikacji „na papierze”. Błędem jest (w mojej opinii) rozpoczęcie rozmowy od pytania „Jakie kolorki dajemy?” lub „nawigacja na górze czy z boku?”, głowa w której narodził się pomysł jest jak załzawione oko, którego percepcja skupiona jest na kluczowym elemencie, zacznij od niego i z czasem wyostrzaj okoliczne ramki.
Kolejny krok – implementacja routera
W rzeczywistości nigdy tak nie będzie, bo kod wie co nam przyszłość przyniesie. Osobiście zawsze rozpoczynam pracę od implementacji routera. Czy ktoś wymyślił coś lepszego niż React Router (https://reactrouter.com)?
Gdy to już za mną, przychodzi czas na implementację stanu globalnego aplikacji, czy to wbudowany w React-a context (https://react.dev/learn/passing-data-deeply-with-context), czy to Redux (https://redux.js.org), im wcześniej tym lepiej.
Krok trzeci, framework css. Tym tematem można rozpętać trzecią wojnę światową, pozostawmy to na kiedy indziej.
Zastosowanie Storybooka
Czy możemy już zaczynać? I tak i nie. Przyszła pora na rzeczy, które są, ale ich nie widać. Zacznijmy od tempa z jakim będzie powstawać aplikacja. W wielu edytorach możemy tworzyć tak zwane „Snippets”. Są to predefiniowane fragmenty kodu, które wywołujemy za pomocą odpowiedniego macro. Moim zdaniem, każdy plik w swojej kategorii powinien zawierać swój szablon. Idąc dalej, zaproponuję coś bardzo kontrowersyjnego. Dokumentacja, zwykle ratuje tyłek, ale zwykle nie nam.
Co powiecie na samo tworzącą się dokumentację? Storybook (https://storybook.js.org), to świetne narzędzie, nie tylko dla tych którzy wracają do kodu naszej aplikacji, ale i dla tych którzy są w trakcie jej tworzenia.
Rozpoczęcie pisania kodu
Niech będzie, pozwalam. Mam jednak swoje 3 grosze w tej sprawie. Nie chcę, aby twoja kolejna aplikacja wyglądała jak ściana divów nazywanych klasami, czy identyfikatorami. Nigdy mi się to nie podobało, więc zostawię Cię ze świadomością istnienia biblioteki Styled Components (https://styled-components.com). Wiem że nie wszyscy potrzebują, wiem że znajdą się uparci dla których jest to kolejny niepotrzebny addon. Dla mnie jest to niezbędny element każdego projektu React i nie wyobrażam sobie tworzenia struktury z wykorzystaniem div-a zamiast Wrapper-a.
Kontynuacja projektu
Projekt już trochę żyje lub przewidujesz wieloletnie wsparcie? Przyda się coś co pozwoli zadbać o kod, tak by potomni nie pytali: „po co?”, „dlaczego?” i „kto był tak pomysłowy?”. Niestety na to nie ma prostego lekarstwa, każdy projekt ma swoje zasady, każdy developer ma swoje nawyki, każda firma ma swoje standardy. To co mogę zaproponować to prosty szablon projektu, który wykorzystuję od kilku lat. Do tej pory nie zawiódł, a co najlepsze, nieraz uratował życie, gdy wracało się do 2+ letnich projektów.
assets – czcionki, zdjęcia, css-y, w skrócie wszystko co kodem nie jest.
pages – źródło z którego czerpać będzie nasz router.
services – operacje na danych, to jest właśnie odpowiednie miejsce.
-> actions – wszelkie helpery dedykowane pod projekt.
-> contexts – folder dedykowany mechanizmom zarządzania stanem aplikacji.
-> hooks – pojemnik na custom hooks
utils – paczka narzędzi którą bez problemu można skopiować pomiędzy projektami, w idealnym świecie byłby to kolejny moduł npm,
components – tej gwiazdy nie trzeba nikomu przedstawiać, w środku szkielet strony, pojedyncze komponenty jak i całe schematy, możemy zarządzać tu dowolną metodologią, np. Atomic Design
Przykładowy projekt react
Na potrzeby artykułu stworzyłem podstawowy projekt wizualizujący co i gdzie leży, w jakim celu zostało tam umieszczone i gdzie będzie wykorzystane.
Kod projektu dostępny online: https://github.com/Klaku/react-example-app.