Posted in

React projekt

by maksimts•

Mis/Milleks see on?

React on JavaScripti teek (tööriistakomplekt), mida kasutatakse kasutajaliideste ehitamiseks. See võimaldab sul ehitada veebilehe väikestest iseseisvatest tükkidest ehk komponentidest. Seda kasutatakse kiirete ja interaktiivsete veebirakenduste loomiseks, kus sisu muutub dünaamiliselt ilma, et peaksid tervet lehte uuesti laadima (nt Facebook).

Küsimused

Vastan küsimustele selle video põhjal!

Mis on komponent?

Komponent on iseseisev ja korduvkasutatav koodiplokk (tavaliselt JavaScripti funktsioon), mis moodustab osa kasutajaliidesest ja tagastab JSX-koodi, mida ekraanil kuvatakse.

Milleks kasutatakse state’i?

State’i ehk olekut kasutatakse komponendi dünaamiliste andmete (näiteks kasutaja sisendi või API vastuste) hoidmiseks; kui olek muutub, renderdab React komponendi automaatselt uuesti, et kuvada värskeid andmeid.

Miks React on kasulik veebirakenduste tegemiseks?

React on kasulik, kuna see võimaldab jagada keeruka kasutajaliidese väiksemateks, hallatavateks ja korduvkasutatavateks komponentideks, muutes koodi kirjutamise ja hooldamise lihtsamaks ning rakenduse töö kiiremaks.

Mõisted

  • JSX – JavaScripti süntaksi laiendus, mis võimaldab kirjutada HTML-i laadset koodi otse JavaScripti failides kasutajaliidese struktuuri kirjeldamiseks.
  • Component – Rakenduse modulaarne ja korduvkasutatav funktsioon, mis koondab endas nii välimuse (HTML/JSX) kui ka loogika (JavaScript).
  • Props – Omadused (lühend sõnast properties), mida kasutatakse andmete edastamiseks ühest komponendist teise, võimaldades komponendil olla dünaamiline ja kohandatav.
  • State – Komponendi sisemine mälu, mis hoiab infot rakenduse hetkeolukorra kohta ja mille muutumine käivitab kasutajaliidese uuenemise.

React projekti loomine

Selles projektis on kasutatud Vite tööriista.

Sammud

Käsuviiba avamine: Ava terminal ja liigu kausta, kuhu soovid projekti luua.

# Powershell
cd .\react-test\

Loomise käsk: Kirjuta järgmine käsklus uue projekti algatamiseks: npm create vite@latest

  • Seejärel küsitakse projekti nime (näiteks maksim-app).
  • Vali raamistikuks React.
  • Vali keeleks JavaScript.

Tähelepanu! Sulle on vaja paigaldada Node.js enne selle tegemist!

# Powershell (.\react-test\)
npm create vite@latest

Avame localhost:5173

Järgmised sammud pole kohustuslikult vaja teha

Sõltuvuste installimine: installi vajalikud sõltuvused käsuga npm install.

# Powershell (.\react-test\)
cd .\maksim-app\
npm install

Rakenduse käivitamine: Arendusrežiimi käivitamiseks kasuta käsku: npm run dev

# Powershell (.\react-test\maksim-app\)
npm run dev

Ja näeme sama pilt nagu siin

Komponentide kasutamine

App.jsx

See on rakenduse juurkomponent. See seob kogu rakenduse kokku.

Eesmärk:

  • Määrab marsruutimise (Routes, Route), st millist lehte näidatakse (nt Avaleht / või Lemmikud /favorites).
  • Sisaldab üldist paigutust, nagu navigatsiooniriba (NavBar), mis on nähtav igal lehel.
  • Pakub andmete konteksti (MovieProvider), et lemmikfilmid oleksid kättesaadavad terves rakenduses.

MovieList.jsx

See komponent vastutab filmide nimekirja loogika eest. See on andmete hoidja ja kuvaja.

Eesmärk:

  • Pärib andmed (API kaudu või loeb massiivist).
  • Hoiab lehe olekut (kas laeb, kas on viga, mis filmid on nimekirjas).
  • Kasutab .map() funktsiooni, et luua iga filmi jaoks eraldi kaart (MovieCard).

MovieCard.jsx

See on esitluskomponent, mis kuvab ühe kindla filmi info. See on visuaalne “ehituskivi”.

Eesmärk:

  • Võtab vastu andmed props kaudu (nt filmi pealkiri, pilt, aasta).
  • Kuvab filmi plakati ja nupu lemmikutesse lisamiseks.
  • See komponent on “rumal” – ta teab ainult seda, mida talle ette antakse, ega tegele andmete pärimisega.

State’i (oleku) kasutamine

Reacti state (olek) on nagu komponendi mälu. Kui state muutub, joonistab React komponendi uuesti, et näidata uut infot.

Selles projektis kasutatakse useState hooki filmide nimekirja hoidmiseks:

const [movies, setMovies] = useState([]);

Kui API-st saabuvad andmed, kasutatakse funktsiooni setMovies(popularMovies), mis uuendab nimekirja ja kuvab filmid ekraanil.

Näide lihtsast JavaScripti massiivist

Kui me ei kasutaks API-t, võiks algne state välja näha selline:

const algsedFilmid = [
  { id: 1, title: "The Matrix", poster: "matrix.jpg" },
  { id: 2, title: "Inception", poster: "inception.jpg" },
  { id: 3, title: "Interstellar", poster: "interstellar.jpg" },
  { id: 4, title: "Joker", poster: "joker.jpg" },
  { id: 5, title: "Avengers", poster: "avengers.jpg" }
];

const [movies, setMovies] = useState(algsedFilmid);

Selgitus: Ülaltoodud koodis on movies muutuja, mis hoiab massiivi. Rakendus kasutab map funktsiooni, et käia läbi see massiiv ja luua iga objekti jaoks <MovieCard />.

Otsingufunktsiooni lisamine

Otsing võimaldab kasutajal filtreerida kuvatavat sisu. Selles projektis töötab see järgmiselt:

Kasutaja sisend: Luuakse state searchQuery, mis hoiab seda teksti, mida kasutaja otsingukasti kirjutab.

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

Sisestuse jälgimine: Input väljal on onChange sündmus. Iga kord, kui kasutaja trükib tähe, uuendatakse searchQuery väärtust.

Filtreerimine / Päring:

  • Kui kasutaja vajutab “Search” nuppu, käivitatakse funktsioon handleSearch.
  • See funktsioon saadab searchQuery väärtuse API-sse (funktsioon searchMovies).
  • API vastus (filtreeritud filmide nimekiri) salvestatakse setMovies abil, mis asendab ekraanil olevad filmid otsingutulemustega.

Kodulehe pilt