Confirm ce zice Emanuel, https://www.udemy.com/course/complete-react-developer-zero-to-mastery/
Andrei Neagoe e foarte bun, e up to date și te introduce în tot ce e important. Totul e gândit în master projects.
Acum Redux e simplu de înțeles, problema e să înțelegi când sa il folosești. Poți să faci aplicații foarte complexe în care să nu găsești un use case bun pentru el. Cu useState și useRef poti face multe. Dacă folosești o librarie bună de graphql și tot ce randezi e data-driven nu îți trebuie redux dacă gândești totul cum trebuie. E un antipattern să salvezi fiecare rezultat la query-uri in redux înainte să îl folosești în componente. Redux ti-ar trebui când apare problema de shared state la componente nelegate. De exemplu un dispatch la delete la un widget care e în altă componenta.
La redux ce mi s-a părut mie complicat e să ai grijă la referințe și la ce iei din state în map state to props ca să nu rerandezi tot dacă îl schimbă ceva de mai jos la un dispatch.
Dacă trebuie să izolezi ceva din state trebuie să faci un selector cu reselect.
Următorul catch vine dacă nu vrei să folosești connect (container pattern-ul) fiindcă connect face memoizare și optimizari ce se pierde cu useSelector.
Trebuie să prezez și să folosești redux toolkit, nu e necesar să scrii un action și reducer cu boilerplate-ul cu action și payload.
În ultimul rând la unit teste trebuie să faci un stub la state și să testezi că s-a schimbat state-ul după ce un action a fost chemat. E mai complicat dacă chemi multe action-uri una după alta.
Pentru acțiuni asincron se folosesc thunks sau sagas, eu prefer thunks, dar sagas e mai simplu de testat. La thunks trebuie să mockuiesti tot ce e asincron ca să testezi tot.
Hooks e mai simplu dar nu înseamnă că e trivial, dar dacă înveți useRef e probabil de ajuns pentru tine. Ce poate fi dificil e să știi când să faci wrap la ceva cu useCallback/useMemo. Dacă ai ceva ce trebuie condiționat poți crea o componenta care returnează null și nu mai randează nimic.
Pe front-end cele mai complexe task-uri sunt listele virtuale, formularele (validarea), reutilizarea componentelor din alte locuri când nu se potrivesc la props (trebuie să dai de sus în jos fiecare prop), rutarea dinamică, chart-urile, integrarea altor proiecte intr-unul singur (cu iframe sau componente), iar dacă ai componente legate de date (prin websockets) e distracție să înveți backend-ul.
Ai multe librării pe lângă react, în funcție de proiect se schimbă. Nu exista un mod corect de a folosi React cu o anumită structură, există pattern-uri care se aleg în funcție pro și cons.
Înainte să pui mâna pe React ar fi bine să știi bine ES6, TypeScript, câte ceva despre jest, cum extragi un modul (o componenta) intr-un alt pachet npm, CSS (layout cu flexbox eventual CSS grid, box model) și HTML. La HTML evidențiez că e așa numitul event bubbling și că unele elemente au un default behavior (formulare/input/butoane de submit) care cer un preventDefault.
Mie îmi trebuie și un design înainte să ma apuc de vreo componenta, îl faci tu sau ceri de la designer.
