Pre nego što počnemo sa ovom interesantnom temom, podsetimo se šta smo učili u prethodnoj lekciji, pogledajte ovde. Upoznali smo se sa tim šta je JSX i šta je JSX renderovanje i kreirali smo jednu jednostavnu React komponentu Book List - listu knjiga. Takođe smo objasnili strukturu foldera i fajlova koju kreira za vas React kad god kreirate novu React aplikaciju. To nismo objašnjavali u prvoj lekciji, pogledajte ovde; da vas nebi odmah pored potrebni instalacija opteretili sa previše informacija. Iako, kroz praktične primere sve o React razvoju je toliko jednostavno da se možete pitati šta ste radili sve ove godine bez React komponenti. Zbog jednostavnosti od ove lekcije se više okrećemo praksi i kodiranju, jednostavnim primerima koji će ubrzati vaše učenje i razumevanje, ali vas nećemo ostaviti bez objašnjenja šta koristite dok kreirate neverovatne stvari na tako jednostavne načine. Efikasnost je ključni faktor prilikom razvoja React aplikacija, a jedan od najvažnijih elemenata koji utiču na njih su Props - svojstva, State - stanje i Context - kontekst. To su osnovni gradivni blokovi React komponenti. Razumevanje kako svaki od ovih elemenata radi i kako ih pravilno koristiti može značajno poboljšati performanse i održivost vaše aplikacije. Ono što ste učili do sada u ovom tutorijalu vas može dovesti samo do ovog React nivoa. Za sledeći nivo su vam potrebni podaci koji će popuniti strukturu vaših React komponenti. Dok sledeća lekcija React tutorijala će vam predstaviti rad sa Hooks-ima.
Kao što smo naveli osnovni gradivni elementi React komponenti su Props, State i Context. Prilikom razvoja React aplikacija, važno je balansirati između upotrebe Props-a, State-a i Context-a kako bi se postigla optimalna efikasnost i održivost. Previše Props-a može dovesti do nepotrebnog opterećenja aplikacije, dok prekomerna upotreba State-a može dovesti do gubitka performansi. Context treba koristiti tamo gde je to stvarno potrebno, izbegavajući prekomernu kompleksnost i nepreglednost koda. U krajnjem slučaju, pravilno razumevanje i upotreba Props-a, State-a i Context-a će vam pomoći da razvijete efikasne i održive React aplikacije koje pružaju brzo i intuitivno korisničko iskustvo.
- Props – svojstva ili properti, ponekad iste zovu i atributi; su način da React komponente prenesu podatke jedna drugoj. Jednostavno, kroz Props, React komponente mogu komunicirati i deliti informacije, čime se olakšava modularnost i ponovno korišćenje koda. Međutim, treba biti pažljiv prilikom prenosa velikih objekata putem Props-a, jer to može dovesti do nepotrebnog opterećenja aplikacije i smanjenja performansi. Uvek je preporučljivo prenositi samo neophodne podatke putem Props-a i izbegavati prenos kompleksnih struktura podataka kada to nije potrebno.
- State – stanje predstavlja interni status komponente koji se može menjati tokom vremena. Pravilno upravljanje State-om je ključno za efikasno upravljanje stanjem aplikacije i reaktivno ažuriranje korisničkog interfejsa. Međutim, prekomerno korišćenje State-a može dovesti do prekomernog re-renderovanja komponenti i gubitka performansi. Stoga je važno da se State koristi samo tamo gde je to stvarno potrebno, i da se izbegava njegovo prekomerno proširivanje.
- Context – kontekst je mehanizam koji omogućava deljenje podataka između komponenti u stablu komponenti, bez potrebe da se Props prenosi kroz sve nivoe. Ovo može biti korisno kada želite da određene informacije budu dostupne svim komponentama unutar određenog dela aplikacije, kao što su informacije o korisniku ili temi. Međutim, treba biti oprezan prilikom korišćenja Context-a, jer prekomerna upotreba može dovesti do nepreglednog koda i smanjenja čitljivosti.
U ovoj lekciji ćemo preći kroz tri praktična primera koja će vam na praktičan način ilustrovati svaki od navedeni osnovnih gradivni elemenata React komponenti.
Props, kako da kreiram User komponentu koja prosleđuje podatke?
Props - svojstva su podaci koji se prenose od Parents – roditeljski do Children – dečiji React komponenti. Props su uvek immutable – neizmenjivi, što znači da se podaci ne mogu direktno menjati unutar same React komponente koja iste prima. Koriste se za prenošenje podataka od viših nivoa komponente prema nižim nivoima, omogućavajući komunikaciju između različitih delova aplikacije. Inače Props se definišu u roditeljskoj komponenti i prosleđuju kao argumenti prilikom renderovanja dečiji komponenti. Sledeći primer ilustruje kako se to kodira i kako funkcioniše. U folderu react_tutorial kreirajte novi folder i nazovite ga lesson3. Pozicionirajte se u njega i pokrenite Visual Studio Code sledećom komandom.
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ code .
Otvorite Terminal Panel u Visual Studio Code-u. Otkucajte
sledeću komandu.
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ npx create-react-app props
Potrebno je oko 6
minuta, zato sačekajte to vreme da se sve instalira. U folderu public,
pronađite fajl index.html i promenite HTML elemenat title.
<title>React Props</title>
Kreirajte novi folder u src folderu i nazovite isti components i u tom folderu kreirajte novi fajl i nazovite ga User.jsx Obratite pažnju da naziv ovog fajla u praksi uglavnom ima prvo slovo veliko. U User.jsx fajl ukucajte sledeći JavaScript kôd.
import PropTypes from 'prop-types';
function User(props) {
return(
<div>
<p>User: <strong> {props.user} </strong></p>
<p>Status: <strong> {props.status} </strong></p>
<p>Age: <strong> {props.age} </strong></p>
<p>Premium: <strong> {props.isPremium ? "Yes" : "No"} </strong></p>
);
}
// checks if pass values are correct data type
User.propTypes = {
user: PropTypes.string,
status: PropTypes.string,
age: PropTypes.number,
isPremium: PropTypes.bool,
}
export default User
Prvu stvar na koju trebate obratiti pažnju u ovom kodu je biblioteka prop-types. Nju možete pronaći u direktorijumu node_modules. To je biblioteka u React ekosistemu koja se koristi za proveru tipova type checking props koji se prosleđuju React komponentama i koristi se kao dodatak u razvoju React aplikacija. Kroz ovu biblioteku možete kreirati i default svojstva prosleđenih podataka, ali u našem primeru to radimo na nivou HTML elemenata. Dok proveru tipova podataka shvatite ozbiljno, to se uvek radi i na nivou React komponente jer olakšava pronalaženje grešaka. User React komponenta prikazuje informacije o korisniku koje su prosleđene kao Props. Svaki od navedeni svojstava se koristi za prikaz određenih informacija o korisniku. U src folderu, kliknite na fajl App.js i promenite sadržaj sledećim.
import React, { useState } from 'react';
import User from './components/User';
function App() {
const [status, setStatus] = useState('');
const [age, setAge] = useState('');
const [isPremium, setIsPremium] = useState(false);
const [userName, setUserName] = useState('');
const [userData, setUserData] = useState(null);
const handleStatusChange = (event) => {
setStatus(event.target.value);
};
const handleAgeChange = (event) => {
setAge(event.target.value);
};
const handlePremiumChange = (event) => {
setIsPremium(event.target.value === 'Yes');
};
const handleNameChange = (event) => {
setUserName(event.target.value);
};
const handlePrintUserData = () => {
setUserData({
user: userName,
status: status,
age: age,
isPremium: isPremium
});
};
return (
<div>
<p><input
type="text"
value={userName}
onChange={handleNameChange}
placeholder="Enter User
Name"
/></p>
<p><select value={status} onChange={handleStatusChange}>
<option value="">Select Status</option>
<option value="Professor">Professor</option>
<option value="Student">Student</option>
<option value="Guest">Guest</option>
</select></p>
<p><input
type="number"
value={age}
onChange={handleAgeChange}
placeholder="Enter Age"
/></p>
<div>
<p><label>
Premium:
<input
type="radio"
value="Yes"
checked={isPremium}
onChange={handlePremiumChange}
/>
Yes
</label>
<label>
<input
type="radio"
value="No"
checked={!isPremium}
onChange={handlePremiumChange}
/>
No
</label></p>
</div>
<button onClick={handlePrintUserData}>Print Data</button>
{userData && <User {...userData} />}
</div>
);
}
export default App;
Ovaj kôd bi mogao za početnike izgledati kompleksan, ali jednostavno kad bi izdvojili izgled veb stranice u fajl index.html, bio bi mnogo kraći. U suštini, kôd predstavlja definisanje stanja React komponente User. Takođe definiše funkcije za rukovanje promenama. Setite se da Props ne mogu da menjaju vrednosti koje su im prosleđene u React komponenti. Nemojte Props na primer da mešate sa propetijima u C# programskom jeziku. Zatim definiše i funkciju za prikaz podataka klikom na dugme Print Data. Ostalo je JSX renderovanje. Kad izvršite ovu aplikaciju dobićete rezultate slične kao na sledećoj slici.
State, kako da kreiram LikeDislikeCounter React komponentu koja broji lajkove i dislajkove?
State - stanje je interni podatak komponente koji može evoluirati tokom vremena kao odgovor na korisničke akcije, događaje ili promene u aplikaciji. On je mutable - mutabilan što za razliku od svojstva znači da se može direktno menjati unutar same komponente koja ga poseduje, obično kroz funkciju setState. Koristi se za čuvanje informacija koje se mogu promeniti tokom vremena, poput korisničkog unosa, rezultata asinhronih poziva, ili bilo kojeg podatka koji utiče na UI – korisnički interfejs. State se definiše u konstruktoru komponente i može se ažurirati koristeći funkciju setState, koja automatski re-renderuje komponentu kada se stanje promeni. U folderu react_tutorial otvorite projekat lesson3 u Visual Studio Code-u. I u istom projektu kreirajte novu React aplikaciju.
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ npx create-react-app props
U folderu public,
pronađite fajl index.html i promenite HTML elemenat title.
<title>React - Like and Dislike Counter</title>
Kreirajte novi folder u src folderu i nazovite
isti components i u tom folderu kreirajte novi fajl i
nazovite ga LikeDislikeCounter.jsx Obratite pažnju da
naziv ovog fajla u praksi uglavnom ima prvo slovo veliko. U LikeDislikeCounter.jsx fajl ukucajte
sledeći JavaScript kôd.
import React, { useState } from 'react';
const LikeDislikeCounter = () => {
const [likes, setLikes] = useState(0);
const [dislikes, setDislikes] = useState(0);
const incrementLikes = () => {
setLikes(likes + 1);
};
const incrementDislikes = () => {
setDislikes(dislikes + 1);
};
return (
<div>
<button onClick={incrementLikes}>Like</button>
<span> Likes: <strong>{likes}</strong></span>
<button onClick={incrementDislikes}>Dislike</button>
<span> Dislikes: <strong>{dislikes}</strong></span>
</div>
);
};
export default LikeDislikeCounter;
U prethodnom kodu obratite pažnju na uvoz React biblioteke i funkcije useState koja se koristi za definisanje stanja React komponente. Zatim se definiše React komponenta LikeDislikeCounter, definiše se i oba stanja LikeDislikeCounter React komponente; likes i dislikes stanja koja čuvaju broj lajkova i dislajkova dok ne refrish-ujete veb stranicu. Zatim se definiše funkcije koje vrše inkrementaciju i likes i dislikes brojača, tj. njihovo uvećavanje za 1 kada se pritisne određeno Like ili Dislike dugme. U src folderu, kliknite na fajl App.js i promenite sadržaj sledećim.
import React from 'react';
import LikeDislikeCounter from './components/LikeDislikeCounter';
const App = () => {
return (
<div>
<h1>React Like and Dislike
Counter</h1>
<LikeDislikeCounter />
</div>
);
};
export default App;
Ovaj jednostavan kôd predstavlja osnovnu strukturu React aplikacije koja se sastoji od jedne glavne React komponente App i jedne pod komponente LikeDislikeCounter. React komponenta App prikazuje naslov i komponentu LikeDislikeCounter unutar sebe, što omogućava korisniku da interaktivno koristi brojač lajkova i dislajkova. Kad izvršite ovu aplikaciju dobićete rezultate slične kao na sledećoj slici.
Kako izgleda kodiranje prethodne aplikacije možete pogledati i u video-u.
Context, kako da kreiram NavBar React komponentu koja koristi Button komponentu?
Context - kontekst je još jedan ključni koncept u React koji omogućava deljenje podataka između React komponenti koje se nalaze u različitim granama stabla komponenti, bez potrebe da se Props - svojstva prosleđuju kroz svaku pojedinačnu komponentu. Dok Props služe za prenošenje podataka od roditeljske prema dečijoj komponenti i dok State - stanje predstavlja interni podatak komponente koji se može menjati tokom vremena; Context se koristi za deljenje podataka vertikalno kroz više nivoa React komponenti. Context je posebno koristan kada se određeni podaci koriste u velikom broju komponenti unutar aplikacije jer ručno prosleđivanje tih podataka kroz Props postaje nepraktično i nepregledno. Tipični primeri podataka koji se mogu deliti putem Context-a uključuju informacije o korisniku, temu aplikacije, jezik, autentifikacione informacije itd. U našem primeru mi koristimo Context da bi vam predstavili kako da pozovete MyNavBar React komponentu, koja opet poziva MyButton komponentu. U folderu react_tutorial otvorite projekat lesson3 u Visual Studio Code-u. I u istom projektu kreirajte novu React aplikaciju.
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ npx create-react-app mycontext
U folderu public,
pronađite fajl index.html i promenite HTML elemenat title.
<title>React - Context</title>
Kreirajte novi folder u src folderu i
nazovite isti components i u tom folderu kreirajte
nove fajlove i nazovite iste MyNavBar.jsx i MyButton.jsx. U LikeDislikeCounter.jsx fajl ukucajte
sledeći JavaScript kôd.
import React from "react";
import MyButton from "./MyButton";
function NavBar() {
return (
<div className="nav">
<MyButton />
</div>
);
}
export default NavBar
Ova React komponenta MyNavBar prikazuje navigacionu traku aplikacije koja može sadržavati različite elemente, ali u ovom slučaju, sadrži samo komponentu MyButton. Ovaj kod pokazuje kako se komponente mogu koristiti za organizaciju i strukturiranje korisničkog interfejsa aplikacije. U React komponentu MyButton ukucajte sledeći JavaSript kôd.
import React, {useContext} from 'react';
import { Context } from '../App';
function MyButton() {
const [signedIn, setSignedIn] = useContext(Context);
return (
<button onClick={() => setSignedIn(!signedIn)}>
{signedIn ? 'Sign out' : 'Sign in'}
</button>
);
}
export default MyButton
Ova React komponenta koristi Context - kontekst kako bi dobila informaciju o tome da li je korisnik trenutno prijavljen ili ne, i omogućava mu da se prijavi ili odjavi klikom na dugme. Ovo demonstrira kako se kontekst može koristiti za deljenje podataka između komponenti bez potrebe za prosleđivanjem Props - svojstava kroz svaki nivo u hijerarhiji React komponenti. I u App.js fajl, promenite sadržaj u sledeći.
import React, { useState } from 'react';
import MyNavBar from './components/MyNavBar'
export const Context = React.createContext();
function App() {
const [signedIn, setSignedIn] = useState(false)
return (
<div style={{ color: signedIn ? 'blue' : 'red' }}>
<Context.Provider value={[signedIn, setSignedIn]}>
<MyNavBar />
<h1>{signedIn ? "Signed in" : "Signed out"}</h1>
</Context.Provider>
</div>
);
}
export default App;
Ovaj kôd pokazuje kako se Context koristi za deljenje podataka; u ovom slučaju, informacije o prijavljivanju korisnika između komponenti unutar aplikacije. React komponenta App postavlja vrednost Context-a i omogućava potomcima da pristupe tom kontekstu i koriste te informacije. Kad izvršite ovu aplikaciju dobićete rezultate slične kao na sledećoj slici.
Kako izgleda kodiranje prethodne aplikacije možete pogledati i u video-u.
No comments:
Post a Comment