React projekt

Ülesanne 1 — Sissejuhatus ja arusaamine

Reacti lühikokkuvõte: React on JavaScripti teek, mida kasutatakse dünaamiliste ja interaktiivsete kasutajaliideste loomiseks. See võimaldab arendajatel ehitada rakendusi üksikutest taaskasutatavatest osadest, muutes koodi haldamise lihtsamaks ja kiiremaks. React uuendab ekraanil ainult neid komponente, mille andmed on muutunud, tagades sujuva kasutajakogemuse.

Vastused küsimustele:

  • Mis on komponent? Komponent on Reacti rakenduse põhiosa – iseseisev ja taaskasutatav JavaScripti funktsioon, mis tagastab osa kasutajaliidesest (nt nupp, päis või filmikaart).
  • Milleks kasutatakse state’i? State ehk olek on komponendi sisemine mälu, kus hoitakse andmeid, mis võivad rakenduse töö ajal muutuda (nt kasutaja sisestatud tekst või laetud filmide nimekiri).
  • Miks React on kasulik veebirakenduste tegemiseks? See on kasulik, kuna võimaldab koodi taaskasutada, on tänu virtuaalsele DOM-ile väga kiire ja muudab keeruliste kasutajaliideste haldamise loogiliseks.

Olulised mõisted:

  • JSX – JavaScripti laiendus, mis võimaldab kirjutada HTML-koodi sarnast struktuuri otse JavaScripti sees.
  • Component – Rakenduse ehitusplokk, mis defineerib, kuidas üks osa veebilehest välja näeb ja käitub.
  • Props – Atribuudid, mida kasutatakse andmete edastamiseks ülemkomponendilt alamkomponendile.
  • State – Objekti kujul olevad andmed komponendi sees, mis määravad selle hetkeseisu ja reageerivad muudatustele.

Ülesanne 2 — Koodiga töötamine (Konspekt)

1. React projekti loomine

Videos kasutatakse projekti algatamiseks Vite tööriista (mis on kiirem alternatiiv vanale create-react-app-ile).

  • Projekti loomiseks terminalis: (npm create vite@latest front-end)
  • Valitakse raamistik: React ja keel: JavaScript.
  • Seejärel installitakse vajalikud paketid käsuga (npm install) ning rakendus käivitatakse käsuga (npm run dev).

2. Komponentide kasutamine Reactis

Filmirakenduse struktuur jaguneb järgmisteks loogilisteks osadeks:

  • App.js: Rakenduse peamine komponent, mis haldab lehekülgede vahelist liikumist (navigatsiooni) ja koondab kogu rakenduse struktuuri.
  • MovieList.js: Komponent, mis vastutab filmide massiivi vastuvõtmise ja nende rühmitatud kuvamise eest ekraanil.
  • MovieCard.js: Üksik filmikaart, mis kuvab konkreetse filmi pildi, pealkirja, ilmumisaasta ja võimaldab lisada filmi lemmikute hulka.

3. State’i kasutamine

Filmide nimekirja kuvamiseks kasutatakse (useState) konksu (hook). Rakenduse alguses võib see olla näidisandmetega massiiv:

const [movies, setMovies] = useState([
  { id: 1, title: "Inception", poster: "pilt1.jpg" },
  { id: 2, title: "The Matrix", poster: "pilt2.jpg" },
  { id: 3, title: "Interstellar", poster: "pilt3.jpg" },
  { id: 4, title: "Batman", poster: "pilt4.jpg" },
  { id: 5, title: "Titanic", poster: "pilt5.jpg" }
]);

Kui kasutaja teeb päringu või lisab filme, uuendatakse seda massiivi funktsiooniga (setMovies), mispeale React värskendab automaatselt vaadet.

4. Otsingufunktsiooni lisamine

Otsingufunktsioon põhineb kasutaja sisestatud teksti jälgimisel:

  1. Luuakse state (nt searchQuery), mis salvestab otsingukasti kirjutatud teksti.
  2. Vormi saatmisel (onSubmit) käivitatakse funktsioon, mis filtreerib olemasolevaid andmeid või teeb uue päringu välisesse API-sse, kasutades sisestatud märksõna.
  3. Tulemused kuvatakse ekraanil tänu state’i uuenemisele.