React frontend¶
Millal kasutada Reacti?¶
React on JavaScripti framework, mis hõlbustab veebirakenduste arendust. See aitab koodi taaskasutada läbi componentide ning lihtsustab keeruliste kasutajaliideste loomist.
Enne Reactiga alustamist on kasulik omada baasteadmisi HTML-ist ja CSS-ist, kuna need on Reacti põhikomponendid.
Kui midagi jääb segaseks, siis saate vaadata antud demo projekti koodi githubis.
Projekti seadistus¶
Kloonige enda Gitlabi iti0105-2024 repo oma eelistatud IDE-sse.

Veenduge, et teie iti0105-2024 repo on tühi (ilma HTML või CSS failideta). Varasemad failid saate mujale kopeerida.
Enne projekti seadistamist installige Node.js ja npm, kui olete need installinud, võiksite kontrollida olemasolu IDE terminalist järgnevate käskudega.
node -v
npm -v
IDE terminalist, jooksutage järgnevat käsku.
npm create vite@latest frontend -- --template react
Nüüd tekkis teie projekti frontend nimeline kaust, mille sees on Reacti projekt, paneme selle tööle. (NB! Projekti kaustas on .gitignore fail, mida ei tasu katsuda. See hoolitseb selle eest, et te ebavajalikud failid giti ei pushiks.)
Selle jaoks teeme terminalis eraldi järgnevad käsud
cd frontend
(viib frontend kausta),npm install
(tõmbab vajalikud package-d) janpm run dev
(käivitab lokaalselt lehe).Edaspidi, kui on vaja käivitada projekt lokaalselt, siis piisab
npm run dev
käsust, kui oletefrontend
kaustas terminalis. Kuid kui vahepeal on keegi tiimiliikmetest tõmmanud uusi library-si või package-id, siis tuleb enne sisestada kanpm install
käsk, sest siis tõmmatakse ka teie arvutisse vajalikud package-d, et projekti käivitada.Teie projekt on nüüd saadaval veebibrauseris aadressil http://localhost:5173/
Soovitame kustutada
frontend/src
kaustastApp.css
faili, et projekti oleks lihtsam hallata. Ollesfrontend
kaustas jõuamesrc
kausta käsugacd src
.Soovitame ka lisada meie poolt loodud stiilid
index.css
faili, et hoida lehte puhtana ja teil oleks lihtsam aru saada, et mis toimub. Hiljem võite seda enda maitse järgi muuta.index.css
faili nimi ei pea selline olema, aga tavaliselt index tähistab "peamist" faili. Näiteks kui olete veebilehti teinud puhta HTML ja CSS-iga, siis teate, et tihti nimetatakse avalehteindex.html
. Siin on põhjus umbes sarnane. Kuna kustutasiteApp.css
faili ära ning tekitasiteindex.css
, siis tuleb failisApp.jsx
asendada koodiridaimport ./App.css
koodireagaimport ./index.css
.
/* Lisame lehele ka lühikese CSS Reset-i */
/* https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
line-height: 1.5;
font-family: sans-serif;
}
img,
picture,
video,
canvas {
max-width: 100%;
display: block;
}
button,
input,
textarea,
select {
font: inherit;
}
a {
text-decoration: none;
color: inherit;
}
/* Siit maalt algavad meie lehe stiilid */
body {
background-color: lightgray;
}
.navbar {
background-color: gray;
display: flex;
justify-content: center;
gap: 16px;
padding: 4px;
}
Uue componenti loomine¶
Component on lihtsalt öeldes mingi element veebilehest, mis omakorda võib tehtud olla teistest componentitest. Ehk näiteks veebilehel saab olla üks component menüü riba, mille sees omakorda componentideks on nupud. Mida rohkem teha veebileht lahti tükkideks ehk componentideks, seda kergem on seda tulevikus hallata ja ümber disainida. Aga siiski tuleks luua componente ratsionaalsuse piires, igat teksti ja pealkirja pole mõtet ka componentiks teha. Componentid aitavad koodi taaskasutada, näiteks saab luua ühe nupu componenti ning seda hiljem kasutada nii mitmes kohas kui ise soovid. Lisaks kui tekib soov nuppu muuta, siis seda tuleb teha ainult ühes kohas ning kõik nupud muutuvad korraga.
Paremaks projekti organiseerimiseks, looge
src
kaustapages
kaust, sinna hakkate lisama enda lehti.Looge pages kausta sisse
Home.jsx
nimeline fail (hea tava on hoida funktsiooni ja faili nime samana, aga seda ei pea tegema, kuid siiski soovitame teil hoida samana). Mille sisu on järgnev:
function Home() {
return (
<div>
<h2>Koduleht</h2>
<p>Muu kirjeldav tekst!</p>
</div>
);
}
export default Home;
export default Home
see rida eksportib failist componenti välja, et see oleks kättesaadav teistest failidest. Eksporditava componenti nimi peab olema sama, mis funktsiooni nimi nagu on siin mõlema nimi Home
.
NB! Iga Reacti component sisaldab JavaScripti (välimine function, return, export jne) ja HTML-i (sisemine <div>
, <h2>
jne). Praegu on teil vaja keskenduda ainult HTML osale.
Eelnevalt loodud
Home.jsx
kuvamiseks, lisame selleApp.jsx
faili.Tühjendage olemasolev
App.jsx
fail ja lisage järgnev sisu:
import Home from "./pages/Home";
function App() {
return (
<div>
<Home />
</div>
);
}
export default App;
Nüüd peaksite avalehel nägema enda <Home>
componenti sisu. Lehel peaksite nägema tekste "Koduleht" ja "Muu kirjeldav tekst".
App.jsx
on nö kõige "kõrgemal" asuv component ehk selle sisse tuleb kogu veebileht. Selle faili nime me ei soovita muuta.
Uue alamlehe lisamine¶
Alamlehtede lisamiseks, nagu www.veebileht.ee/meist või www.veebileht.ee/kontakt, tuleb projektile lisada üks package. Selleks jooksutage projektiga seotud terminalis, frontend kaustas
npm install react-router-dom
. See käsk tõmbab react-router-dom package, mis aitab luua lehele navigeerimise süsteemi.NB! Kui üks tiimi liige installib projektile uue package'i, peavad järgmisel korral teised tiimiliikmed enne
npm run dev
käsku jooksutamanpm install
käsku.Teeme uue alamlehe, nimega Meist. Selle jaoks lisage
src/pages
kaustaMeist.jsx
fail, järgneva sisuga:function Meist() { return ( <div> <h2>Meist</h2> <p>Tekst teie endi kohta!</p> </div> ); } export default Meist;
Loome valmis ka lehe päise/headeri, et alamlehtede vahel liikuda. Selleks lisage
src/pages
kaustaHeader.jsx
fail, järgneva sisuga:import { Link } from "react-router-dom"; // Et kasutada eri failides <Link> tööriista, peate selle iga kord importima function Header() { return ( <div className="navbar"> {/* Linki sees to="" väärtus peab klappima App.jsx failis oleva Route path="" sisuga. */} <Link to="/">Avaleht</Link> <Link to="/meist">Meist</Link> </div> ); } export default Header;
Lisage
App.jsx
faili router, mis võimaldab alamlehtede vahel liikuda:import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import Header from "./pages/Header"; import Home from "./pages/Home"; import Meist from "./pages/Meist"; function App() { return ( <Router> <Header /> <Routes> {/* Siia saate lisada uusi alamlehti */} <Route path="/" element={<Home />} /> <Route path="/meist" element={<Meist />} /> </Routes> </Router> ); } export default App;
Nüüd saate navigeerida
avalehe
jameist
lehe vahel.
Componentide taaskasutatavus¶
Nüüd näitame teile, kuidas luua ühte componenti, milles saab olla erinev sisu. Samuti saab seda componenti mugavalt taaskasutada. Näiteks järgnevad 2 dünaamilist infokaarti saab lehele lisada kahe koodireaga.


Looge
src
kausta sissecomponents
kaust. Sinna sisse hakkate enda taaskasutatavaid componente lisama, alustadesContactCard.jsx
failist.function ContactCard() { return ( <div> <h4>Mathias</h4> <p>Vanus: 21</p> </div> ); } export default ContactCard;
Et kuvada loodud componenti Meist lehel, lisame
Meist.jsx
faili algusesseimport ContactCard from "../components/ContactCard";
ja keskele, HTML osa sisse<ContactCard/>
component.import ContactCard from "../components/ContactCard"; function Meist() { return ( <div> <h2>Meist</h2> <p>Tekst teie endi kohta!</p> <ContactCard /> </div> ); } export default Meist;
Aga sooviks, et kaart näeks parem välja, selle jaoks lisame CSS stiile. Anname klassile nime
className
abil.function ContactCard() { return ( <div className="contact-card"> <h4>Mathias</h4> <p>Vanus: 21</p> </div> ); } export default ContactCard;
Nüüd saame
index.css
faili lisada meie klassi nime kohta stiilid..contact-card { background-color: gray; padding: 6px 20px; border-radius: 8px; width: fit-content; margin-top: 8px; }
Hetkel mitu korda
<ContactCard>
componenti kasutades, oleks meil alati sama sisu. Muudame selle dünaamiliseks Reacti propside abil. Printsiip on sarnane nagu nt Pythoni funktsioonides, lisame componentile parameetridname
jaage
ning kasutame neid HTML-i sees.function ContactCard({ name, age }) { return ( <div className="contact-card"> <h4>{name}</h4> <p>Vanus: {age}</p> </div> ); } export default ContactCard;
Nüüd peame
Meist.jsx
failis olevale<ContactCard>
componentile argumendid sisse andma, seda saame teha järgnevalt.import ContactCard from "../components/ContactCard"; function Meist() { return ( <div> <h2>Meist</h2> <p>Tekst teie endi kohta!</p> <ContactCard name={"Mathias"} age={21} /> <ContactCard name={"Martin"} age={20} /> </div> ); } export default Meist;
Nüüd peaks lehel näha olema teie poolt sisestatud andmetega
<ContactCard>
componentid.
Mock data¶
Kui hakkame backendist andmeid frontendi tooma, tulevad need tavaliselt listina. Seetõttu on kasulik hoida ka oma staatilisi andmeid listis, et backendi ühendamine oleks hiljem lihtsam ja kiirem protsess.
Samuti saame kasutada map()
funktsiooni, et loopida üle listi ja ei pea iga kord käsitsi componente, nagu siinkohal <ContactCard>
, välja kirjutama.
<ContactCard name={"Mathias"} age={21} />
<ContactCard name={"Martin"} age={20} />
Impordi
useState
ja loo list algandmetega: Mis on useState?// Fail Meist.jsx import { useState } from "react"; import ContactCard from "../components/ContactCard"; function Meist() { const [contacts, setContacts] = useState([ { name: "Mathias", age: 21 }, { name: "Martin", age: 20 }, ]); return ( <div> <h2>Meist</h2> <p>Tekst teie endi kohta!</p> <ContactCard name={"Mathias"} age={21} /> <ContactCard name={"Martin"} age={20} /> </div> ); } export default Meist;
const [contacts, setContacts] = useState([{ name: "Mathias", age: 21 },{ name: "Martin", age: 20 },])
Selle reaga me loome muutuja
contacts
ja selle muutuja muutmiseks funktsioonisetContacts()
.useState()
sulgude vahele tulebcontacts
muutuja algväärtus ehk selleks on list[{ name: "Mathias", age: 21 },{ name: "Martin", age: 20 }]
. Näiteks kui tahaksime nüüd muutacontacts
väärtust, siis tuleks teha seda niisetContacts([{ name: "Kaido", age: 32 },{ name: "Merily", age: 30 }])
. React-is on tavaks see, et kui lood muutuja nimegax
, siis muutujat muuteva funktsiooni nimi onsetX
ehk "set" tuleb ette.Loopi üle listi, map() funktsiooni abil ja renderda
<ContactCard>
componendid:// Fail Meist.jsx import { useState } from "react"; import ContactCard from "../components/ContactCard"; function Meist() { const [contacts, setContacts] = useState([ { name: "Mathias", age: 21 }, { name: "Martin", age: 20 }, ]); return ( <div> <h2>Meist</h2> <p>Tekst teie endi kohta!</p> {contacts.map((contact) => ( <ContactCard name="{contact.name}" age="{contact.age}" /> ))} </div> ); } export default Meist;
Kokkuvõte¶
NB! Soovitame teil nüüd mõned nädalad projekti ise edasi arendada. Saate lisada rohkem alamlehti ja neid disainida. Kindlasti looge erinevaid componente, et mitmekesi koos arendamine oleks sujuvam ja kood oleks taaskasutatavam.
Küsimuste tekkimisel proovige alguses vastuseid leida internetist, kuna see arendab teid kõige rohkem. Spetsiifiliselt Reacti kohta õppimiseks on hea materjal nende enda lehel asuv dokumentatsioon.