Kako radi React?

React je JavaScript biblioteka za kreiranje korisničkih interfejsa.

Osnovni principi i mehanizmi React-a uključuju:

1. Pristup zasnovan na komponentama: Korisnički interfejs je podeljen na nezavisne, ponovo upotrebljive komponente. Svaka komponenta ima stanje (state) i svojstva (props) koja određuju njeno ponašanje i izgled.

2. Virtuelni DOM: React kreira laganu reprezentaciju stabla DOM-a u memoriji (virtuelni DOM). Kada se podaci promene (stanje ili svojstva), React gradi novo virtuelno stablo DOM-a.

3. Algoritam poređenja stabala (Diffing): React upoređuje novo virtuelno stablo DOM-a sa prethodnim. Ovaj proces se naziva "diffing". Algoritam brzo pronalazi razlike između stabala.

4. Rekonsilijacija: Na osnovu pronađenih razlika, React izračunava minimalni skup operacija potrebnih za ažuriranje pravog DOM-a.

5. Ažuriranje pravog DOM-a: React primenjuje te minimalne promene na pravi DOM, čime se minimiziraju skupovi skupih operacija manipulacije DOM-om i poboljšava performanse.

6. Jednosmerni tok podataka: Podaci u React-u se obično prenose od vrha nadole, od roditeljskih komponenti ka decom, putem svojstava (props). Ovo olakšava praćenje promena i otklanjanje grešaka.

7. JSX: Ekstenzija sintakse JavaScript-a koja omogućava opis strukture UI koristeći sintaksu sličnu HTML-u, direktno unutar JavaScript koda. JSX se kompajlira u obične pozive funkcija React-a (npr., React.createElement).

// Primer jednostavne React komponente
function WelcomeMessage(props) {
  return <h1>Zdravo, {props.name}!</h1>;
}

// Korišćenje komponente
const element = <WelcomeMessage name="Svet" />;