Front Cave

Ten post jest ostatnim artykułem w serii o obsłudze formularzy w React:

Biblioteki do formularzy w React #1 – sprawdź wprowadzenie do 3 najpopularniejszych bibliotek

Biblioteki do formularzy w React #2 – react-hook-form

Biblioteki do formularzy w React #3 – formik

---

Spis Treści

1. Wprowadzenie
2. Przykład prosty
   1. Walidacja
      1. Walidacja prosta
      2. Walidacja asynchroniczna
   2. Pełny kod przykładu prostego
   3. Repozytorium przykładu prostego na Github
3. Przykład zaawansowany
   1. Problemy wersji 6.4.0 z walidacją asynchroniczną
   2. CSS GRID
   3. Dodawanie zdjęć do galerii za pomocą customowego komponentu
   4. Walidacja rozmiarów obrazka
   5. Pełny kod przykładu zaawansowanego
   6. Repozytorium przykładu zaawansowanego na Github
4. Podsumowanie

---

Wprowadzenie

Biblioteka Final Form jest biblioteką bazującą na modelu subskrypcyjnym, pozwalającą subskrybować zmiany wartości, walidacji czy aktywności danego pola. Biblioteka nie jest związana z żadnych konkretnym frameworkiem, natomiast posiada wrapper dla Reacta – React Final Form i to on omówiony zostanie w tym artykule.

Dlaczego powinno zależeć Ci na poznaniu biblioteki Final Form? Ponieważ znacząco ułatwia takie rzeczy jak:

• przekazywanie danych z i do formularza
• skomplikowane, customowe walidacje
• walidacja asynchroniczna
• zarządzanie stanem formularza (by np pokazywać użytkownikowi których pól jeszcze nie “dotknął”)
• podpinanie customowych komponentów do zautomatyzowanej logiki biblioteki

Czytaj dalej „Biblioteki do formularzy w React #4 – Final Form”

Ten post jest trzecią częścią serii o obsłudze formularzy w React:

Biblioteki do formularzy w React #1 – sprawdź wprowadzenie do 3 najpopularniejszych bibliotek

Biblioteki do formularzy w React #2 – react-hook-form

Spis Treści

1. Wprowadzenie
2. Prosty przykład
   1. Baza do dalszych prac
      1. Wersja klasyczna
      2. Wersja z hookami
   2. Walidacja
      1. Prosta walidacja
      2. Asynchroniczna walidacja
      3. Walidacja z pomocą biblioteki Yup i tworzenie schematów
      4. Pełny kod walidacji
   3. Customowe komponenty z hookiem useField
3. Przykład zaawansowany
   1. Brak obsługi plików w Formik
   2. Komponent FieldsArray
   3. Wyświetlanie za pomocą CSS GRID
   4. Pełny kod
4. Podsumowanie

Wprowadzenie

Formik to jedna z najbardziej uznanych bibliotek do zarządzania formularzami w React. Jej autor, Jared Palmer, jest autorem wielu projektów których my jako programiści używamy na codzień.

Formik upraszcza codzienną pracę z formularzami, ułatwiając zarządzanie wartościami w formularzu, walidacją i jego stanem wewnętrznym. Dzięki bibliotece możesz w prosty sposób:

• podpiąć customowe walidacje które podepniemy tak prosto jak walidacje natywne,
• podpiąć walidacje asynchroniczne
• sygnalizować użytkownikowi, które pola zostały już przez niego wypełnione
• obsługiwać tablice i obiekty jako pola formularza

Oraz wiele innych, jednocześnie używając prostego i czytelnego API.
Formik wspiera integrację z TypeScript. Obsługuje również React Native, dzięki czemu raz zdobyta wiedza może być użyta w aplikacji internetowej i aplikacji natywnej.
Wiedza jaką zdobędziesz czytając ten wpis pozwoli Ci używać biblioteki Formik w codziennej pracy, oszczędzając Ci wielu nieprzyjemności ręcznej obsługi formularzy.
Zahaczymy również o CSS GRID – jeśli chcesz dowiedzieć się o nim czegoś więcej, możesz obejrzeć prezentację jaką miałem podczas webinaru dla lokalnej grupy Tarnów Devs:

W opisie filmu znajdziesz link do slajdów na Google Drive oraz link do repo na Githubie do playgroundu którego w prezentacji używałem.

Czytaj dalej „Biblioteki do formularzy w React #3 – formik”

Ten post jest kontynuacją serii o obsłudze formularzy w React:

Biblioteki do formularzy w React #1 – sprawdź wprowadzenie do 3 najpopularniejszych bibliotek

Spis Treści

1. Wprowadzenie
2. Prosty przykład
   1. Baza do dalszych prac
   2. Walidacja
      1. Prosta walidacja
      2. Customowa walidacja
      3. Asynchroniczna walidacja
      4. Wiadomości dla błędów walidacji
   3. Obsługa stanu formularza – obiekt formState
      1. Informowanie o tym, że trwa wysyłanie formularza
      2. Oznaczanie pól, które zmodyfikował użytkownik
   4. Pełny kod prostego przykładu
3. Zaawansowany przykład
   1. Obsługa tablic i obiektów jako pól formularza
   2. Walidacja rozmiarów obrazka
   3. Pełny kod pierwszej wersji
   4. Ostateczna wersja
   5. Pełny kod wersji ostatecznej
4. DevTools dla React Hook form
   1. Podpięcie DevTools
   2. Wyświetlanie DevTools tylko podczas developmentu
5. Podsumowanie

---

Wprowadzenie

Jeżeli szukasz biblioteki, która pozwoli Ci zachować formularze proste i czytelne, nie powodując dużego narzutu na kod i nie narzucając zbyt wielu własnych rozwiązań – a jednocześnie dającej duże możliwości zarządzania stanem formularza, walidacją itd to react-hook-form jest rozwiązaniem stworzonym dla Ciebie.

Czytelne i proste API oparte na hookach, dedykowane narzędzie do debugowania powodują, że react-hook-form jest rozwiązaniem pierwszego wyboru do zarządzania formularzami.

Czytaj dalej „Biblioteki do formularzy w React #2 – react-hook-form”

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”

Rx jest biblioteką ułatwiającą programowanie asynchroniczne, implementującą paradygmaty programowania funkcyjnego.
Jest już niemalże standardem w świecie Androida, zdobywa również coraz większą popularność w świecie frontendu gdzie implementacją jest biblioteka RxJS – której pod spodem używa choćby framework Angular.
RxJS pojawił się również w świecie Reacta, użyty w bibliotece Redux Observable – dość w nim popularnej choć sama biblioteka nie jest z Reactem powiązana.
W tym poście przedstawione zostaną trzy kroki, których przejście pozwoli na zapoznanie się z podstawami bibliotek RxJS i Redux Observable – przeczytanie go będzie dobrą bazą do dalszej nauki.

Lista kroków do przejścia

1. Poznanie czym są subjecty w RxJS
2. Podstawowe operatory RxJS
3. Pierwszy epic w Redux Observable

Zapoznawanie się z podstawami Redux Obervable zacznijmy od podstaw RxJS

Czytaj dalej „Przejdź te 3 kroki, by poznać podstawy Redux Observable”