Miesiąc: maj 2020

Spis treści

1. Wprowadzenie
2. react-hook-form
   1. Przykład prosty
   2. Przykład zaawansowany
3. formik
   1. Przykład prosty
   2. Przykład zaawansowany
   3. Walidacja za pomocą Yup
4. react-final-form
   1. Przykład prosty
   2. Przykład zaawansowany
5. Podsumowanie

Wprowadzenie

Zarządzanie formularzami nie jest proste – należy pilnować walidacji danych, pokazywać użytkownikowi błędy, ukrywać te błędy w odpowiednim momencie. React jako biblioteka nie dostarcza zaawansowanych sposobów obsługi formularzy – możesz uznać to jako zaletę, ponieważ łatwiej dostosować rozwiązanie pod Twój konkretny przypadek. Z drugiej strony musisz jednak napisać sporo kodu – tutaj z pomocą biblioteki, które pozwolą również obsłużyć edge-case’y.

Ręczna obsługa formularzy potrafi napsuć krwi i zająć sporo czasu – biblioteki które zostaną opisane zdejmują z programisty ogrom odpowiedzialności związanej z obsługą walidacji, edge-case’ów, dzięki nim nie trzeba ręcznie przetrzymywać stanu formularza. Upraszczają zaawansowane przypadki takie jak bardzo customowe kontrolki, które nawet nie muszą być elementami formularza by móc je pod formularz podpiąć.

Stąd zdecydowanie warto zaznajomić się z podstawami korzystania z tych bibliotek – ten wpis jako pierwszy z serii pokrótce każdą z nich przedstawi, a kolejne wpisy z serii będą dedykowane już konkretnym bibliotekom – by pokazać pełnię ich zaawansowanych możliwości.

W tym wpisie zobaczysz więc wprowadzenie do najpopularniejszych bibliotek do obsługi formularzy w React.

Czytaj dalej „Biblioteki do formularzy w React #1 – sprawdź wprowadzenie do 3 najpopularniejszych bibliotek”

W poprzednich postach opisywałem sposoby na zarządzanie stanem w React -Redux, Context API, MobX czy MobX State Tree – pewne problemy jednak pozostają nierozwiązane.
Powyższe rozwiązania sprawdzą się jako magazyn na dane – nie powiedzą nam jednak nic o systemie. Nie określą w jednoznaczny sposób możliwych stanów jakie wystąpią podczas działania aplikacji, nie walidują poprawności przejścia pomiędzy jednym stanem a drugim – musi o to zadbać ręcznie programista.
Często też wiedza o tych stanach ginie w trakcie rozwoju projektu – w miarę jak przybywa kodu i funkcjonalności, gdy odchodzą programiści znający system i przychodzą nowi, którzy muszą się go uczyć.

W rozwiązaniu tego problemu sprawdzają się skończone maszyny stanowe – definiują skończoną ilość dostępnych stanów i przejścia z jednego stanu w drugi.

Spis treści

1. Czym jest skończona maszyna stanowa
2. Biblioteka XState
   1. XState visualizer
   2. Maszyna stanowa
3. Integracja biblioteki XState z Reactem
4. Podsumowanie

Czytaj dalej „Poznaj zastosowanie maszynie stanowej XState w React”