Sari la conținutul principal

Cerinte prealabile

Pentru dezvoltarea aplicației de frontend vom folosi biblioteca React.js și vom lucra in limbajul TypeScript. Typescript este un limbaj de scripting, un dialect mai tare tipat a lui JavaScript. Recomandăm folosirea limbajului TypesScript în loc de JavaScript din mai multe motive:

  • Preîntampină multe erori la runtime dacă sunt folosite tipuri de date în mod incorect ca intr-un context slab tipat.
  • E mai usor de modificat și întretinut codul întrucat se pot cunoaște dependente de date acolo unde se folosește un anumit tip de date.
  • Tipurile de date servesc și ca documentație pentru cei care vor folosi codul.

Dacă nu sunteți familiarizati cu JavaScript/TypeScript parcugeți introducerea în TypeScript.

Unelte

Înainte de a începe dezvoltarea efectivă, va trebuie să pregătiți următoarele:

  • Să instalați o versiune LTS de Node.Js (versiunea 18)
  • Să vă instalați un IDE pentru aplicații web: VSCode sau WebStorm (folosiți JetBrains Toolbox, pentru VSCode este necesar să instalați plugin-uri pentru HTML, JavaScript/Typescript, React.js si Node.Js, la WebStorm acestea sunt deja incluse.

📄️ Introducere în TypeScript

Vom face o scurtă prezentatare a limbajului TypeScript pentru a dezvolta aplicații de frontend. Modul de lucru cu Typescript este în mare același ca cu JavaScript dar beneficiază de faptul că sintaxa este constrânsă de tipurile de date declarate. Existența tipurilor de date, chiar dacă în acest caz sunt verificate doar la faza de transpilare (transpiling) unde codul de TypeScript este transformat în cod normal de JavaScript, ajută dezvoltatorii în a omite greșeli frecvente în limbaje slab tipate. Vom trece prin sintaxa specifică de TypeScript, pentru cei familiarizați cu limbaje C-like și orientate pe obiect sintaxa este ușor de învașat însă diferă în modul de utilizare față de aceste limbaje.

📄️ Gestionarea stării

În această secțiune vom intra în detaliu legat de gestionarea stării aplicației folosind funcții hook și Redux Toolkit. Motivul pentru care este nevoie de gestionarea stării aplicației este că anumite componente în diferite locații ale aplicației au nevoie să împartă aceleași date. O posibilitate pentru a propaga datele la mai multe componente este ca o compenta părinte să trimită la descendenții săi datele prin proprietăti din copil în copil, însa această abordare poate aglomera componentele și duce la cod greu de menținut. Alternativa cea mai bună este ca datele partajate de diferite componente să fie puse la dispoziție printr-o stare globală accesibilă prin funcții hook.