React

Mis on React?

React on JavaScripti teek, millega tehakse veebilehtede kasutajaliideseid.
Reactiga saab teha selliseid veebirakendusi, mis muutuvad ilma et terve leht uuesti laadiks.
See töötab komponentide süsteemiga, mis tähendab, et leht on jagatud väikesteks osadeks.
Reacti kasutatakse palju tänapäeva veebiarenduses, sest see teeb arendamise lihtsamaks ja kiiremaks.
React teeb koodi organiseeritumaks ja lihtsamini hallatavaks. Samuti muudab see veebilehe kiiremaks, sest see ei lae tervet lehte iga kord uuesti.

Mõisted

JSX
JSX on viis kirjutada HTML-i sarnast koodi JavaScripti sees.

Component
Komponent on nagu väike tükk veebilehest, millel on oma ülesanne. Näiteks nupp või kaart filmi infoga.
Komponent on eraldi kasutajaliidese osa, mida saab uuesti kasutada.

Props
Props on andmed, mida üks komponent annab teisele.

State
State hoiab andmeid, mis võivad muutuda. Kui state muutub, siis React uuendab automaatselt seda osa lehelt.
State on muutuja komponendi sees, mis võib ajas muutuda.

React projekti loomine

React projekti saab teha käsurealt.

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

See loob uue projekti ja paneb selle tööle brauseris.

Komponentide kasutamine Reactis

Selles projektis on kolm peamist komponenti:

• App.js
  App on peamine komponent. See on nagu kogu rakenduse “keskus”.
  Siin kuvatakse pealkiri ja MovieList komponent.
• MovieList.js
  MovieList näitab kõiki filme nimekirjana.
  See kasutab .map() funktsiooni, et teha iga filmi jaoks eraldi kaart.
• MovieCard.js
  MovieCard näitab ühe filmi infot, näiteks pilti ja pealkirja.
  See saab andmed propside kaudu.

Rakenduse käivitamine (main.jsx)

Failis main.jsx käivitatakse kogu rakendus:

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

BrowserRouter võimaldab lehtede vahel liikumist.
App on peamine komponent.
StrictMode aitab arendamisel vigu leida.

App.jsx – Rakenduse struktuur

<MovieProvider>
  <NavBar />
  <main className="main-content">
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/favorites" element={<Favorites />} />
    </Routes>
  </main>
</MovieProvider>

MovieProvider annab kogu rakendusele ligipääsu lemmikfilmide state’ile.
NavBar on ülemine menüü.
Routes määrab, milline leht kuvatakse.

NavBar.jsx – Navigeerimine

<Link to="/">Home</Link>
<Link to="/favorites">Favorites</Link>

NavBar võimaldab liikuda:

• Avalehele (Home)
• Lemmikute lehele (Favorites)

Home.jsx – Filmide kuvamine ja otsing

Home komponendis on mitu state’i:

const [searchQuery, setSearchQuery] = useState("");
const [movies, setMovies] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);

Populaarsete filmide laadimine:

useEffect(() => {
  const loadPopularMovies = async () => {
    const popularMovies = await getPopularMovies();
    setMovies(popularMovies);
  };
  loadPopularMovies();
}, []);

Kui leht avaneb, laetakse populaarsed filmid API-st.

api.js – Andmete toomine API-st

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

export const searchMovies = async (query) => {
  const response = await fetch(
    `${BASE_URL}/search/movie?api_key=${API_KEY}&query=${encodeURIComponent(query)}`
  );
  const data = await response.json();
  return data.results;
};

Siin kasutatakse fetch, et tuua filmid The Movie Database API-st.

Otsingufunktsioon

<form onSubmit={handleSearch}>

Kui kasutaja kirjutab otsingusse ja vajutab Search, siis:

const searchResults = await searchMovies(searchQuery);
setMovies(searchResults);

Filmid uuendatakse vastavalt otsingule.

MovieCard.jsx – Ühe filmi kuvamine

<img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title}/>
<h3>{movie.title}</h3>
<p>{movie.release_date?.split("-")[0]}</p>

MovieCard kuvab filmi pildi, pealkirja ja väljalaskeaasta.

Lemmikute süsteem (Context API)

Failis MovieContext:

const [favorites, setFavorites] = useState([]);

Lemmikutese lisamine:

const addToFavorites = (movie) => {
  setFavorites(prev => [...prev, movie]);
};

Eemaldamine:

const removeFromFavorites = (movieId) => {
  setFavorites(prev => prev.filter(movie => movie.id !== movieId));
};

Kontroll kas on lemmik:

const isFavorite = (movieId) => {
  return favorites.some(movie => movie.id === movieId);
};

Favorites.jsx – Lemmikute kuvamine

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

Siin kuvatakse kõik filmid, mis on lisatud lemmikutesse.

Kui lemmikuid pole, kuvatakse teade:

No Favorite Movies Yet