React în practică
Un curs pentru cei care deja scriu HTML și CSS și vor să construiască interfețe în React. Analizăm starea, hook-urile, datele de la server și rutarea, iar la final publicăm online un magazin funcțional, cu coș și plată.
Ce vei putea face
12 module, un singur proiect
01 Primele componente și JSX3 lecții · 2 h 16 minDeschis
Instalăm proiectul, ne orientăm în structura folderelor și în sintaxa JSX. Luăm macheta catalogului din cursul de HTML și CSS și o împărțim în componente care mai târziu cresc în magazin.
02 Props și compunerea componentelor3 lecții · 2 h 16 min
Învățăm să transmitem datele în jos pe arbore și să construim blocuri complexe din unele simple. Analizăm children, valorile implicite și granița dintre o componentă și setările ei.
03 Stare și hook-uri3 lecții · 2 h 17 min
Starea componentei, reacția la evenimente și efectele pentru lucrul cu lumea exterioară. Mutăm logica repetitivă în hook-uri proprii și analizăm greșelile frecvente legate de dependențe.
04 Liste, chei și randare condiționată2 lecții · 1 h 34 min
Randăm catalogul dintr-un array, lămurim cheile și motivul pentru care lista «sare». Arătăm stările goale, filtrele și sortarea fără redesenări inutile.
05 Formulare și validare3 lecții · 2 h 16 min
Câmpuri controlate, starea formularului și validare fără biblioteci externe. Construim un formular de comandă în mai mulți pași, cu mesaje de eroare clare și blocarea trimiterii repetate.
06 Date de la server3 lecții · 2 h 19 min
Cerem catalogul de la server: async/await, anularea cererilor expirate și cursa răspunsurilor. Adăugăm căutare și încărcare paginată fără a strica starea ecranului.
07 Încărcare, erori și reîncercări2 lecții · 1 h 34 min
Cele două stări care se uită de obicei: cât timp se încarcă și când s-a stricat. Skeletoane, reîncercări, error boundary și mesaje pe înțelesul utilizatorului.
08 Rutare3 lecții · 2 h 12 min
Împărțim magazinul pe pagini: catalog, produs, coș, comandă. Parametri de URL, rute imbricate cu layout comun, redirecționări și acces doar pentru utilizatorii autentificați.
09 Starea comună a aplicației3 lecții · 2 h 21 min
Când props-urile nu mai ajung: context pentru temă și utilizator, useReducer pentru coș. Comparăm abordările și mutăm coșul într-un store extern, păstrat între sesiuni.
10 Performanță și randări repetate3 lecții · 2 h 16 min
Căutăm cauzele redesenărilor inutile în profiler și le reparăm. memo, useMemo și useCallback folosite la obiect, virtualizarea unui catalog lung și măsurători înainte și după.
11 Testarea scenariilor de bază3 lecții · 2 h 19 min
Scriem teste care verifică comportamentul, nu structura HTML. Clic pe buton, trimiterea formularului, adăugarea unui produs în coș și mock-uri pentru cererile de rețea.
12 Build, deploy și proiectul final3 lecții · 2 h 20 min
Facem build-ul de producție, lămurim variabilele de mediu și dimensiunea bundle-ului. Terminăm plata comenzii, publicăm magazinul online și îl verificăm pe un domeniu real.
Ce primești
Un proiect-șablon cu structura catalogului, machetele cardurilor și un API de practică, ca să începi din prima lecție fără configurarea mediului.
Lista verificărilor înainte de merge: structura props-urilor, efectele secundare, cheile din liste, tratarea erorilor, accesibilitatea și randările repetate.
Fișe scurte cu semnături, greșeli tipice și exemple pentru useState, useEffect, useMemo, useCallback, useReducer și hook-uri proprii.
Implementarea de referință a magazinului, cu coș, plată și deploy, ca să îți compari soluțiile după predare și să discuți punctele discutabile.
Primul modul este deschis în întregime
Urmărește lecțiile primului modul și prima temă. Dacă formatul nu ți se potrivește, nu ai pierdut nimic.