React on JavaScripti teek, millega ehitatakse kasutajaliideseid (UI) komponentidest. See aitab teha veebirakendusi nii, et leht reageerib kiiresti kasutaja tegevustele (nt otsing, filtrid, nupuvajutused) ilma, et peaks iga kord tervet lehte uuesti laadima.

Mis on komponent?
Komponent on väike iseseisev UI-osa (nt nupp, kaart, filmide nimekiri), millel on oma struktuur ja loogika ning mida saab korduvalt kasutada.

Milleks kasutatakse state’i?
State hoiab komponente “muutuvat infot” (nt filmide nimekiri, otsingusõna) ja kui state muutub, siis React renderdab vajaliku osa ekraanil automaatselt uuesti.

Miks React on kasulik veebirakenduste tegemiseks?
Sest React teeb lihtsaks dünaamilise UI loomise: komponentide korduvkasutus, selge struktuur, kiire uuesti-renderdamine ainult seal, kus vaja, ja loogiline viis hoida rakenduse andmeid (state/props).

Tähtsad mõisted

• JSX – süntaks, mis näeb välja nagu HTML, kuid on tegelikult JavaScripti osa ja võimaldab mugavalt UI-d kirjeldada.
• Component – funktsioon või klass, mis tagastab UI (JSX-i) ja mida saab lehel kasutada nagu “ehitusklotsi”.
• Props – andmed, mida antakse parent-komponendist child-komponendile (nagu parameetrid funktsioonile).
• State – komponendi sisemine muutuja(d), mis võivad ajas muutuda ja põhjustavad UI uuesti-renderdamise.

React Movie Library – konspekt

1. React-projekti struktuur

Projekt on loodud Reacti ja Vite abil. Rakendus on jagatud loogilisteks osadeks: pages (lehed) ja components (komponendid). Selline struktuur teeb koodi arusaadavaks ja lihtsamini hallatavaks.

React-projekti struktuur (pages ja components kaustad).

2. App.jsx – rakenduse põhikomponent

App.jsx on rakenduse põhikomponent.
See määrab, millised lehed kuvatakse ja kasutab React Routerit navigeerimiseks.

App.jsx:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/favorites" element={<Favorites />} />
</Routes>

Routes määrab, millised lehed rakenduses on olemas

Route ütleb, millist komponenti näidata kindla aadressi (URL) puhul

“Kodu” lehel:

“Lemmikud” lehel:

App.jsx: lehtede vahel liikumine React Routeri abil.

3. State’i kasutamine (Home.jsx)

Komponendis Home.jsx kasutatakse state’i, et hoida:

• filmide nimekirja
• otsingu teksti

Kui state muutub, uuendab React automaatselt kasutajaliidest.

1) State

const [movies, setMovies] = useState([]);
const [searchQuery, setSearchQuery] = useState("");

State hoiab andmeid.
movies sisaldab filmide nimekirja ja searchQuery kasutaja otsingusõna.

2) useEffect

useEffect(() => {
  loadPopularMovies();
}, []);

useEffect käivitub lehe avamisel.

3) Otsing

<form onSubmit={handleSearch}>

Kasutaja saab filme otsida.
Sisestatud tekst salvestatakse state’i ja selle järgi otsitakse filme.

4) MovieList

<MovieList movies={movies} />

Filmid kuvatakse eraldi komponendis.
Home saadab filmide nimekirja MovieList komponendile.

• Home.jsx, kus on useState
• veebileht, kus filmid on kuvatud

State’i kasutamine filmide ja otsingu hoidmiseks.

4. Filmide laadimine API kaudu

Filmid saadakse välisest andmeallikast – TMDB API.
API-võti on salvestatud .env faili ja seda ei avaldata GitHubis.

Pildista: api.js fail

Koodilõik (api.js):

const API_KEY = import.meta.env.VITE_TMDB_API_KEY;

Koodilõik (api.js):

export const getPopularMovies = async () => {
  const response = await fetch(
    `${BASE_URL}/movie/popular?api_key=${API_KEY}`
  );
  const data = await response.json();
  return data.results;
};

Lihtne selgitus:

• funktsioon laadib populaarsed filmid TMDB API-st
• fetch saadab päringu serverisse
• vastus muudetakse JSON-iks
• tagastatakse filmide nimekiri

veebileht, kus populaarsed filmid on nähtavad

Filmide laadimine TMDB API kaudu.

5. Otsingufunktsioon

Kasutaja saab sisestada otsingusõna.
Sisend salvestatakse state’i ja kasutatakse filmide otsimiseks API kaudu.

Home.jsx:

<form onSubmit={handleSearch}>
  <input
    value={searchQuery}
    onChange={(e) => setSearchQuery(e.target.value)}
  />
</form>

kasutaja sisestab teksti otsingukasti

sisestatud tekst salvestatakse state’i (searchQuery)

vormi saatmisel käivitatakse handleSearch funktsioon

Enne:

Pärast:

Filmide otsing: nimekiri muutub vastavalt otsingusõnale.

6. MovieList.jsx – filmide nimekiri

MovieList on komponent, mis saab filmide massiivi props kaudu ja kuvab iga filmi eraldi kaardina.

MovieList.jsx:

{movies.map((movie) => (
  <MovieCard key={movie.id} movie={movie} />
))}

MovieList komponent: filmide kuvamine map() meetodiga.

7. MovieCard.jsx – üksik film

MovieCard vastutab ühe filmi info kuvamise eest (pealkiri, pilt jne).

MovieCard.jsx:

function MovieCard({ movie }) {
  return <h3>{movie.title}</h3>;
}

MovieCard.jsx fail

MovieCard komponent: ühe filmi andmete kuvamine.

8. Tulemus

Valminud React-rakendus kuvab:

• populaarseid filme
• otsingutulemusi
• kasutab komponente, state’i ja props’e

Projekt aitas mõista Reacti põhialuseid ja välise API kasutamist.

GitHub Code