React projekt

Mis on React?

React on JavaScripti raamatukogu kasutajaliideste loomiseks, eriti üheleheküljeliste rakenduste (SPA) arendamiseks React projekt.
See võimaldab jagada kasutajaliidese väikesteks, korduvkasutatavateks komponentideks.
React kasutab virtuaalset DOM-i, et muuta rakendused kiireks ja tõhusaks.
State ja props võimaldavad andmeid dünaamiliselt kuvada ja uuendada.
Seda kasutatakse tänapäeval paljudes suurtes veebirakendustes.

Mis on komponent?

Komponent on sõltumatu ja taaskasutatav osa kasutajaliidesest, mis tagastab JSX-i Reactis.

Milleks riiki kasutatakse?

State’i kasutatakse komponentide andmete salvestamiseks ja dünaamiliseks uuendamiseks, mis põhjustab kasutajaliidese automaatse uuesti renderdamise.

Miks on React kasulik veebirakenduste loomiseks?

React muudab koodi modulaarseks, kiireks ja lihtsasti hooldatavaks ning võimaldab luua interaktiivseid kasutajaliideseid.

Important terms

JSX – JavaScripti laiendus, mis võimaldab kirjutada Reactis HTML-i sarnast süntaksit.
Komponent – korduvkasutatav kasutajaliidese osa, mis tagastab JSX-i.
Props – vanemkomponendist alamkomponendile edastatavad andmed.
State – komponendi sisemised muutujad.

React project creation

React-projekti alustamiseks kasutatakse kõige sagedamini tööriista create-react-app või moodsamat Vite’i. (Ma kasutasin Visual Studio’t.)

# Powershell
npx create-react-app movie-library
cd movie-library

# Powershell
npm start

Kasutatakse Localhost:3000

Reacti installimise kohta: saate selle installida Dockeriga, kuid kõige lihtsam on see alla laadida Windowsist, see on seal all:

Link: https://nodejs.org/en/download
saate lihtsalt installida msi kaudu

Komponendid, mida me kasutame:

Pärast komponentide seadistamist jäävad alles muud failid ja md-failid, need võite lihtsalt alles jätta :3

App.js – see on peamine (juur)komponent. See sisaldab kogu rakenduse loogikat, haldab filmide nimekirja seisundit ja kutsub teisi komponente.

MovieList.js – Selle komponendi ülesanne on võtta vastu filmide nimekiri (props-ina) ja kuvada need. See toimib n-ö konteinerina filmikaartidele.

MovieCard.js – see on väikseim komponent, mis vastutab konkreetse filmi kohta teabe (pilt, pealkiri, aasta) kuvamise eest. Seda kasutatakse korduvalt iga filmi puhul.

Riigi kasutamine filmide näitamiseks

const movies = [
  { id: 1, title: "Inception", image: "https://m.media-amazon.com/images/I/912AErFSBHL._AC_SL1500_.jpg" },
  { id: 2, title: "Interstellar", image: "https://upload.wikimedia.org/wikipedia/en/b/bc/Interstellar_film_poster.jpg" },
  { id: 3, title: "The Matrix", image: "https://m.media-amazon.com/images/I/51EG732BV3L.jpg" },
  { id: 4, title: "Avatar", image: "https://m.media-amazon.com/images/I/41kTVLeW1CL._AC_.jpg" },
  { id: 5, title: "Titanic", image: "https://m.media-amazon.com/images/I/811lT7khIrL._SL1500_.jpg" }
];

Kui soovite pilte kuvada, peate need kopeerima ja kleepima pildi URL-ist.

Riigi kasutamine:

const [movieList, setMovieList] = useState(movies);

Kui olek muutub, renderdatakse kasutajaliides automaatselt uuesti.

Otsingufunktsiooni lisamine

Otsingu lisamiseks vajame kahte asja:

Kohta, kuhu kasutaja kirjutab (input väli).
Funktsiooni, mis filtreerib filme vastavalt sisestatud tekstile.

Tavaliselt tehakse seda nii, et luuakse uus state muutuja searchTerm ja kasutatakse API päringut või filter() meetodit.

Loogika:

Kasutaja kirjutab otsingukasti sõna (nt “Batman”).
onChange sündmus uuendab searchTerm olekut.
Vajutades otsingunuppu, käivitatakse funktsioon, mis otsib filme (kas API-st või olemasolevast massiivist), mille pealkiri sisaldab sõna “Batman”.

Sisend:

<input
  type="text"
  placeholder="Search movie..."
  onChange={(e) => setSearch(e.target.value)}
/>

Filtreerimine:

const filteredMovies = movieList.filter(movie =>
  movie.title.toLowerCase().includes(search.toLowerCase())
);