Cum pot sa progresez in React Js

Salut, de aproximativ 2 luni am inceput sa invat React de pe udemy, scrimba, youtube dar simt ca sunt intr-un moment in care am nevoie sa stiu mai multe lucruri despre arhitectura, sa pun toate piesele de la puzzele impreuna.
Simt ca stiu cat de cat partea teorectica dar daca urmez cursuri pe udemy care sunt foarte lungi ma plictisesc cam repede si parca unele lucruri de acolo sunt outdated… iar eu vreau sa fiu up to date si sa pot incepe sa creez aplicatii.

Cand doresc sa creez aplicatii ma lovesc de alte lucruri gen: daca sa folosesc redux (nu sunt bun la asta, inteleg ideea dar sunt confuz si nu stiu daca trebuie sa insist pe treaba asta), sa conectez aplicatia la backend(si aici iar m-am abaut de la drum ca sa invat mai mult despre baze de date, SQL, etc.)
Cum sa adaug CSS-ul, css module este preferatul meu, sa folosesc sau nu Sass, cum sa adaug state-ul, folosind React Hooks sau Redux/Redux Toolkit.

Sunt destul de confuz, acumulez destula informatie (incerc sa invat cat de mult pot in fiecare zi dar nu prea practic singur) si am impresia ca ma abat foarte mult de la drum dar nici nu-mi displace sa ma abat pentru ca invat lucruri noi.

Problema mea este ca vreau sa inteleg mai bine React-ul si sa creez aplicatii fara sa ma abat foarte mult de la asta deoarce am primit o oferta iar eu trebuie sa fiu ok pe partea de React (UI / CSS, HTML unde cred ma descurc destul de bine).

Ce sfaturi imi dati?

Fix asta trebuie să faci.

Clonează reddit, netflix, facebook etc și încearcă să reproduci cât mai multe funcționalități cu cât mai puține pachete externe. E.g. la Reddit cum ai trata problema listării elementelor + încărcarea comentariilor? Dar shortcuts? La netflix cum ai trata afișarea episoadelor în funcție de sezonul selectat? Dar autocomplete la căutare? Etc.

Fă-le tu, nu după tutoriale, cursuri sau altele.

Nu-ți bate capul cu partea de server, folosește ceva de genul și concentrează-te pe codul tău și obișnuiește-te cu ideea că nu vei „prinde” arhitectura din prima. Sau a doua.

Sau a treia.

Dar după ce îți formezi modele mentale și începi să think in React o să vezi că ți se va părea mult mai ușor să abordezi redux sau alte minuni.

2 Likes

Multumesc pentru raspuns. Ma simt in stare sa clonez orice aplicatie gen reddit/facebook/netflix/twiter etc in React, gen sa creez componentele si style-ul dar nu stiu exact cum sa abordez partea de functionalitate sau poate nu o abordez cum trebuie si aici ma refer la partea asta:

E.g. la Reddit cum ai trata problema listării elementelor + încărcarea comentariilor? Dar shortcuts? La netflix cum ai trata afișarea episoadelor în funcție de sezonul selectat? Dar autocomplete la căutare? Etc.

Si pentru partea asta doresc mai multe sfaturi, idei, tutoriale, articole… pana prind ideea de baza cand pornesc aceasta parte.
Adica inteleg partea de Route si pot sa o implementez, conditional rendering, useState, useEffect, dar nu stiu exact si unde le pot adauga.
La partea de state, unde este corect sa adaug acel state? Individual pentru fiecare componenta sau sa fie global gen in App.js
Probabil ma gandesc prea mult la cum, de ce, unde, oare este bine si aici clachez si ma gandesc ca poate mai am mult de invatat si sa ma indorc la cursurile alea plictisitoare fara sa actionez si sa pun in practica.

Cel mai bine inveti facand.

Poti sa te tot uiti la tutoriale de cum sa te dai pe bicicleta, tot o sa pici cand incerci prima data

Frameworkurile de frontend au la comun arhitectura pe componente, cu diferente in implementare.

Daca iti dezvolti gandirea asta pe componente esti peste majoritatea compatriotilor care lucreaza cu frameworkuri de genu.

Implementezi ceva si te uiti foarte atent peste cod. Cauti locuri unde poti sa-l imbunatatesti. Te gandesti la interactiunea dintre componente, mai specific daca interactiunea e prea incalcita, daca o componenta stie prea multe despre cum este folosita, daca o componenta face prea multe lucruri etc

De ex redux are sens cand ai nevoie de un loc central in care sa ti anumite date de care ai nevoie prin toata aplicatia ( de ex datele utilizatorului logat). Calcaiul lui Ahile la frameworkurile astea e faptul ca pasatu de date intre componente se rezuma la comunicare directa parinte-copil. Ori daca tu ti datele despre utilizator in cea mai parinte componenta si ai nevoie de ele intr-o componenta copil aflata la 10 componente dinstanta in ierarhie ar trebui sa pasezi datele utilizatorului prin toate alea 10, desi nu au nevoie. Cu redux le poti lua direct in orice componenta vrei, indiferent de ierarhie.

3 Likes

Code or GTFO! :joy:

Acu serios, este o diferență uriașă între „m-am uitat la ore de tutoriale și am impresia că pot face” și „am făcut asta”. Are și un nume (care îmi scapă) treaba asta indusă de privitul de tutoriale, dar îți dă o senzație falsă că stăpânești subiectul când, de fapt… nu.

PS: în ultimele versiuni de React utilitatea Redux a devenit tot mai greu de justificat. Ai Context, ai Hooks

5 Likes

Cred ca asta este

1 Like

Va multumesc pentru raspunsuri. Astept cate mai multe pentru ca doresc sa stiu asta de la persoane cu experienta. Criticile am sa le folosesc intr-un mod cat mai constructiv si am sa fiu mult mai motivat pentru a pune cat mai mult cod in practica.

Eu aș recomanda și să lași tutorialelor generaliste, și să mergi pe (sau să faci rost) pe lynda.com sau alte site-uri de genul, un curs întreg cap coadă, în care te duce printr-un proiect întreg, și abordează probleme cât mai diverse.

Mie mi s-au părut in genera mult mai utile. Începi cu cele simple și mergi spre cele mai avansate.

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.

1 Like