Mis on React

React on JavaScripti teek kasutajaliideste loomiseks. Seda kasutatakse dünaamiliste ja interaktiivsete veebirakenduste arendamiseks. React võimaldab jagada kasutajaliidese väikesteks taaskasutatavateks komponentideks, mis muudab koodi loetavamaks ja paremini hallatavaks. Rakendus uuendub automaatselt state’i muutumisel ilma lehte värskendamata.

Mis on komponent?

Komponent on iseseisev kasutajaliidese osa, mida saab korduvalt kasutada.

Milleks kasutatakse state’i?

State’i kasutatakse muutuvate andmete hoidmiseks (nt otsingusõna ja lemmikfilmide nimekiri).

Miks on React kasulik?

React võimaldab luua struktureeritud ja loogilise rakenduse, kus andmed ja kasutajaliides on selgelt eraldatud.

Olulised mõisted

JSX – JavaScripti süntaks, mis võimaldab kirjutada HTML-sarnast koodi Reactis.
Component – Reacti ehitusplokk, mis tagastab kasutajaliidese osa.
Props – andmed, mida antakse vanemkomponendist alamkomponendile.
State – komponendi sees hoitavad muutuvad andmed.

React projekti loomine

Projekt loodi Vite abil:

npm create vite@latest movie-library -- --template react
cd movie-library
npm install
npm run dev

Rakenduse struktuur

Rakendus koosneb järgmistest komponentidest:

• App.jsx
• NavBar.jsx
• Home.jsx
• Favorites.jsx
• MovieList.jsx
• MovieCard.jsx

App.jsx — põhikomponent

App on rakenduse juurkomponent.

• Siin asub filmide massiiv (üks andmeallikas).
• Siin hoitakse lemmikfilmide ID-sid state’is.
• Siit edastatakse andmed Home ja Favorites komponentidele propside kaudu.
• Siin kasutatakse React Routerit lehtede vahetamiseks.

Home.jsx — avaleht

Home vastutab:

• Filmide kuvamise eest
• Otsingufunktsiooni eest

State:

• searchTerm salvestab kasutaja sisestatud teksti.

Filmid filtreeritakse tsükli abil:

Tulemuseks kuvatakse ainult need filmid, mille pealkiri vastab otsingule.

Favorites.jsx — lemmikute leht

Favorites kuvab ainult need filmid, mille ID on salvestatud lemmikute state’i.

• Kui lemmikuid pole, kuvatakse teade.
• Kui lemmikud on olemas, kuvatakse MovieList.

Filmid leitakse kahe tsükli abil (lihtne loogika, ilma keeruliste konstruktsioonideta).

MovieCard.jsx — üks film

MovieCard kuvab:

• Plakati
• Pealkirja
• Aasta
• Nupu “Add to Favorites” või “Remove from Favorites”

Nupu vajutamisel kutsutakse välja funktsioon, mis lisab või eemaldab filmi lemmikutest.

State’i kasutamine

Lemmikfilmid salvestatakse App komponendi state’i:

const [favoriteIds, setFavoriteIds] = useState([]);

Kokkuvõte

Projektis kasutati:

• Komponente (App, Home, Favorites, MovieList, MovieCard)
• Propside kaudu andmete edastamist
• State’i dünaamiliste andmete hoidmiseks
• Otsingufunktsiooni filter-loogikaga
• React Routerit lehtede vahel liikumiseks

Rakendus kuvab filmide nimekirja, võimaldab otsida filme ning lisada neid lemmikutesse.