Iseseisev töö “React”

Mis on React?

React on JavaScripti teek (library), mida kasutatakse kasutajaliideste loomiseks. See võimaldab arendajatel ehitada veebirakendusi väikeste taaskasutatavate osade ehk komponentide abil. React uuendab ainult neid lehe osi, mis muutuvad, mistõttu rakendus töötab kiiremini ja efektiivsemalt. Seda kasutatakse sageli üheleheliste rakenduste (SPA) loomiseks, nagu sotsiaalvõrgustikud ja veebipoed.

Mis on komponent?

Komponent on iseseisev ja taaskasutatav kasutajaliidese osa, mis tagastab HTML-i sarnase struktuuri (JSX).

Milleks kasutatakse state´i?

State’i kasutatakse komponendi muutuvate andmete hoidmiseks, mis mõjutavad seda, kuidas kasutajaliides ekraanil kuvatakse.

Miks React on kasulik veebirakenduste tegemiseks?

React võimaldab luua kiireid, dünaamilisi ja hästi struktureeritud veebirakendusi ning muudab koodi hooldamise ja taaskasutamise lihtsamaks.

Tähtsad mõisted:

  • JSX – JavaScripti laiendus, mis võimaldab kirjutada HTML-i sarnast süntaksit otse JavaScripti sees.
  • Component – funktsioon või klass, mis loob ja tagastab osa kasutajaliidesest.
  • Props – andmed, mida vanem komponent annab lapse komponendile.
  • State – komponendi sees olevad muutuvad andmed, mis põhjustavad kasutajaliidese uuendamise.

React projekti loomine

  1. Ava terminal.
  2. Käivita järgmine käsk:
//käsk React projekti loomiseks
npm create vite@latest
cd my_movie_app
npm install
//Terminal kuvab lokaalse aadressi (nt http://localhost:5173/), kus saad rakendust näha brauseris.
npm run dev

App.js

  • Peamine komponent
  • Haldab state’i
  • Edastab andmeid alamkomponentidele

Näite:

MovieList.js

  • Kuvab filmide nimekirja
  • Võtab andmed props’ina
  • Loob MovieCard komponendid

Näide:

MovieCard.js

  • Kuvab ühe filmi info

Näide:

Otsingufunktsiooni lisamine

Funktsioon filmi otsimiseks nime järgi

API

Fail filmide toomiseks API kaudu

Koduleht

Otsing leht

Lemmikfilmid leht