Zašto profesionalci koriste React

Sjetit ćeš se muke iz razine 1 – i razumjeti zašto su izumili komponente. Lekcija samo za čitanje.

Sjećaš li se kopiranja izbornika?

U razini 1 imao si zaglavlje s izbornikom na svakoj stranici. I kad god si dodao novu stranicu, morao si kopirati izbornik – i popravljati ga svugdje pri svakoj promjeni. Dosadno s tri stranice, noćna mora s trideset. I ta muka je točno početak naše priče.

Komponente: napiši jednom, koristi svugdje

Profesionalci su pomislili: što ako bi izbornik bio jedan komad koda koji se samo “ubaci” na svaku stranicu? Promijeniš na jednom mjestu – mijenja se svugdje. Takav komad zove se komponenta.

I nije samo izbornik. Pogledaj svoju web stranicu očima kockica:

kartica igrača (imaš je 4× – a razlikuje se samo imenom i pozicijom),
fotografija u galeriji (10× – razlikuje se samo slikom),
gumb (svugdje – razlikuje se samo tekstom).

Profesionalčeva web stranica nije hrpa HTML datoteka. To je kutija LEGO kockica: nekoliko vlastitih blokova (komponenti) složenih u cijelu aplikaciju.

Što je React

React je alat (biblioteka) za JavaScript koji rješava takvo slaganje. Izumili su ga na Facebooku, besplatan je, a ogroman dio interneta je izgrađen na njemu: Facebook, Instagram, Netflix, Airbnb… Komponenta u Reactu izgleda ovako – ne brini, samo gledamo:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

I koristi se kao prilagođeni HTML tag:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Prepoznaješ? To je funkcija (iz razine 2) koja vraća HTML. Kartica je napisana jednom i koristi se s različitim podacima – kao gumeni pečat s zamjenjivim slovima.

Supermoć broj dva: React rješava ponovno crtanje

U razini 2 si pisao: “pronađi element, promijeni tekst, dodaj klasu…” U velikim aplikacijama ima toliko ručnog preuređivanja da se možeš izgubiti. React to okrene:

Opisuješ kako stranica treba izgledati za zadane podatke. Kad se podaci promijene, React sam shvati što treba ponovno nacrtati.

Rezultat se promijeni s 0 na 1? Ne tražiš nikakav element – samo promijeniš broj, a React ponovno nacrta što treba. Vidjet ćeš to u lekciji o stanju.

Što te čeka u ovoj razini

Instalirat ćeš profesionalne alate: terminal i Node.js (sljedeća lekcija).
Postavit ćeš svoju prvu React aplikaciju pomoću Vitea.
Naučit ćeš komponente, props i state.
Pregradit ćeš svoju web stranicu iz razine 1 u Reactu.
Napravit ćeš vlastiti Node.js server i povezati s njim knjigu gostiju.

💡

Ne moraš sve iz današnje lekcije potpuno razumjeti. Zapamti samo jednu rečenicu: React = komponente (LEGO kockice) + automatsko ponovno crtanje. S ostalim ćeš se rukomalo u sljedećim lekcijama.

Što ćeš ponijeti iz ove lekcije

Kopiranje istog koda na više mjesta je zamka – to si već sam otkrio u razini 1.
Komponenta je funkcija koja vraća dio stranice. Napiši je jednom, koristi je mnogo puta s različitim podacima.
React ponovno crta stranicu za tebe: ti mijenjaš podatke, on mijenja ekran.