Prima ta aplicație React

Instagram, Netflix, Airbnb — interfețele lor sunt construite cu React, o bibliotecă în care pagina web e asamblată din piese numite componente. Azi intri în clubul ăsta: generezi o aplicație React reală, o pornești pe calculatorul tău și o transformi în pagina ta, cu un buton care numără apăsările. La finalul laboratorului vei avea aplicația rulând pe localhost, cu o componentă scrisă de tine și primul tău state — date care, când se schimbă, redesenează pagina singure.

Ce îți trebuie

• Node.js — motorul care rulează unelte JavaScript pe calculatorul tău. Descarci versiunea LTS de pe site-ul oficial Node.js (cauți „Node.js LTS") și instalezi cu setările implicite. Verificare în terminal: node --version și npm --version răspund amândouă cu numere.
• VS Code — vechea cunoștință.
• Documentația oficială, pentru mai târziu: react.dev.
• Cont: niciunul. Internet: da, la generarea proiectului (se descarcă pachete).
• Timp: 20 minute generare + tur, 45 minute construcție, restul misiune.

Generarea: o aplicație întreagă dintr-o comandă

1. În terminal, în folderul tău de proiecte:

npm create vite@latest prima-app -- --template react

Răspunde la eventualele întrebări cu Enter (numele e deja dat, framework React, varianta JavaScript).

2. Apoi, exact cum îți spune și mesajul de final:

cd prima-app
npm install
npm run dev

npm install descarcă dependențele — durează un minut și umple folderul node_modules cu mii de fișiere care nu te privesc. npm run dev pornește serverul de dezvoltare.

3. Terminalul afișează o adresă de forma http://localhost:5173. Deschide-o în browser: o pagină cu logo-uri care se rotesc și un buton count is 0. Aia e aplicația ta, servită de calculatorul tău — „localhost" îl știi de la laboratorul de GitHub din anii trecuți.

4. Deschide folderul prima-app în VS Code (lasă terminalul cu serverul pornit!). Turul rapid al proprietății: în src/ stă codul tău — App.jsx e componenta principală, main.jsx o montează în pagină, restul e decor deocamdată.

Componenta ta: JSX și primul superputere — reîncărcarea live

1. În App.jsx, șterge tot conținutul și pune în loc:

function App() {
  const nume = "Andrei"

  return (
    <div>
      <h1>Pagina lui {nume}</h1>
      <p>Construita cu React, in laboratorul de informatica.</p>
    </div>
  )
}

export default App

2. Salvează și uită-te la browser fără să dai refresh: pagina s-a schimbat singură. Serverul de dezvoltare urmărește fișierele și împinge modificările pe loc — cel mai plăcut mod de lucru pe care l-ai avut până acum.

Ce ai scris se numește JSX: arată ca HTML-ul pe care îl știi, dar trăiește în JavaScript, iar între acolade poți pune orice expresie — acolo unde scrie numele, React a înlocuit expresia cu valoarea variabilei. O componentă e exact asta: o funcție care returnează bucata de pagină pe care o descrie.

3. O regulă JSX de care te vei lovi azi: o componentă returnează un singur element rădăcină — de-asta totul stă împachetat în acel div exterior. Și atributul class din HTML se scrie className aici.

4. Scrie acum o componentă separată și folosește-o de mai multe ori — pentru asta există React:

function Materie(props) {
  return <li>{props.nume} — ziua preferata: {props.zi}</li>
}

function App() {
  return (
    <div>
      <h1>Orarul meu, pe scurt</h1>
      <ul>
        <Materie nume="Informatica" zi="marti" />
        <Materie nume="Matematica" zi="joi" />
        <Materie nume="Educatie fizica" zi="vineri" />
      </ul>
    </div>
  )
}

export default App

Aceeași piesă, Materie, montată de trei ori cu date diferite prin props — parametrii componentelor, verii direcți ai parametrilor de funcții din laboratorul 2.

State: butonul care numără

Până aici pagina e statică — frumoasă, dar surdă. Intră în scenă state: date pe care componenta le ține minte și care, la schimbare, redesenează automat tot ce depinde de ele.

import { useState } from 'react'

function App() {
  const [contor, setContor] = useState(0)

  return (
    <div>
      <h1>Numaratoarea de aplauze</h1>
      <p>Ai apasat de {contor} ori.</p>
      <button onClick={() => setContor(contor + 1)}>
        Aplauda
      </button>
    </div>
  )
}

export default App

Linia-cheie, despachetată: useState(0) creează o valoare de state care pornește de la 0 și îți dă înapoi perechea — valoarea curentă (contor) și funcția de schimbat (setContor). Regula de fier: nu modifici niciodată contor direct; ceri schimbarea prin setContor, iar React redesenează ce trebuie. La click, funcția săgeată () => setContor(contor + 1) face exact această cerere.

Compară cu jocul din laboratorul 1: acolo, după fiecare schimbare a contorului, scriai tu print-ul. Aici afișarea se ține singură la zi. Asta cumpără React.

Dacă nu merge

• npm: command not found: Node.js nu e instalat sau terminalul e deschis de dinainte de instalare. Reinstalează / redeschide terminalul, apoi node --version.
• Pagina albă + erori roșii în terminal: cel mai des, JSX invalid — un tag neînchis sau două elemente rădăcină. Eroarea din terminal (sau din consola browserului, tasta F12) indică fișierul și linia; mesajul Adjacent JSX elements must be wrapped... înseamnă exact regula elementului unic.
• Modificările nu mai apar în browser: serverul s-a oprit (poate ai închis terminalul). Repornește cu npm run dev din folderul proiectului.
• localhost:5173 refuză conexiunea: alt port — citește adresa exactă din terminal, Vite alege 5174+ dacă 5173 e ocupat de alt coleg de proiect.
• Ai scris class și nu se aplică stilul: în JSX e className. Avertismentul apare în consola browserului, nu în terminal — obișnuiește-te să te uiți în ambele.

Misiunea ta

Nivel de bază (obligatoriu): aplicația rulează local cu o pagină personală: titlu cu numele tău, o listă construită dintr-o componentă cu props folosită de cel puțin 3 ori, și butonul-contor funcțional.

Extindere: butonul „Reset" + un al treilea buton care scade. Contorul nu are voie să coboare sub 0 — decizia o iei în funcția de click.

Provocare: afișează sub contor un mesaj care depinde de valoare — sub 5 aplauze „Publicul e timid", peste 20 „Ovatii!". În JSX, condiționarea se scrie cu operatorul ternar: {contor > 20 ? "Ovatii!" : "..."}. Caută „conditional rendering" pe react.dev dacă vrei varianta elegantă.

Ai terminat când:

• npm run dev pornește aplicația fără erori, din folderul proiectului, demonstrat de la zero;
• poți arăta cu degetul pe ecran: componenta, props-urile, state-ul — și spui ce face fiecare;
• contorul funcționează cu regula „nu sub 0";
• un coleg schimbă o valoare de props în codul tău și pagina lui reflectă schimbarea fără refresh manual.