Kako zgraditi preprosto aplikacijo za števec v Reactu

React je ena najbolj priljubljenih sprednjih knjižnic JavaScript. Mnoga podjetja uporabljajo React za razvoj svojih uporabniških vmesnikov in med razvijalci je pridobil veliko popularnost.

Z Reactom je preprosto sestaviti preprost program, kot je ta osnovna aplikacija števcev. Začetek z enostavno vadnico vam bo pomagal razumeti nekaj osnovnih, a pomembnih konceptov Reacta.

Funkcije aplikacije Counter

V tem projektu boste razvili aplikacijo števca z naslednjimi funkcijami:

1. Gumb za povečanje števila: To bo povečalo število za eno.
2. Gumb za zmanjšanje števila: To bo zmanjšalo število za eno.
3. Gumb za ponastavitev: S tem bo števec nastavljen na nič.

Osnovni koncepti Reacta

Preden nadaljujete, morate razumeti nekaj teh osnovnih konceptov v Reactu, ki jih boste uporabljali v tem projektu:

1. Komponente: Komponente so glavni gradniki aplikacij React. Vsebujejo neodvisno kodo za večkratno uporabo. S komponentami lahko uporabniški vmesnik razdelite na ločene dele. Te dele lahko nato ponovno uporabite in z njimi delate neodvisno.
   instagram viewer
2. Država: V Reactu lahko uporabite objekt za shranjevanje podatkov, ki predstavljajo stanje komponente. To komponentam omogoča upravljanje in posodabljanje lastnih podatkov. Stanje komponente določa, kako se upodobi in obnaša.
3. Funkcionalne komponente: Reactova funkcionalna komponenta je preprosto funkcija JavaScript, ki sprejme props kot argument in vrne element React (JSX).
4. Rekviziti: Uporabite lahko rekvizite – okrajšavo za "lastnosti" – za prenos podatkov iz nadrejene komponente v podrejeno komponento. Rekviziti so eden od sestavnih delov Reacta in lahko uporabite rekvizite za izvajanje več operacij v Reactu.
5. Kljuke: React Hooks so vgrajene funkcije ki vam omogočajo upravljanje stanja in drugih funkcij React, kot so metode življenjskega cikla znotraj funkcionalnih komponent. Prav tako vam lahko pomagajo napisati jedrnato in jasno kodo. Kmalu boste videli, kako lahko upravljate stanje z useState() kavelj.

Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT.

1. korak: Nastavitev projekta

Odprite terminal in za začetek zaženite naslednji ukaz:

npx ustvariti-react-aplikacija react-counter-aplikacija

To bo ustvarite novo aplikacijo React, pripravljeno, da začnete graditi svoj projekt. Ustvaril bo strukturo datotečnega sistema z več datotekami in mapami.

Za zagon razvojnega strežnika v terminalu zaženite naslednji ukaz:

npm začetek

Ta ukaz bi moral odpreti nov zavihek v vašem brskalniku, ki kaže na http://localhost: 3000. Vse spremembe, ki jih boste naredili v projektu, bodo tukaj samodejno posodobljene.

2. korak: Ustvarjanje okostja aplikacije Counter

Odprite src/App.js datoteko in izbrišite vso privzeto kodo, ki je tam prisotna. Zdaj ustvarite okostje aplikacije z naslednjo kodo:

uvoz Odziv, {useState} od"reagirati";
funkcijoaplikacija() {
konst [count, setCount] = useState(0);
pustiti incrementCount = () => {
// Dodati pozneje
 };
pustiti decrementCount = () => {
// Dodati pozneje
 };
pustiti resetCount = () => {
// Dodati pozneje
 }
vrnitev (
<divclassName="aplikacija">
<str>Število: {count}str>
<divclassName="gumbi">
div>
div>
);
}
izvozprivzeto aplikacija;

Prvi stavek uvozi useState kavelj iz reagirati modul. Uporabite ga za ustvarjanje štetje stanje in ga inicializirati na 0. Lahko spremenite vrednost štetje uporabljati setCount funkcijo.

Uporabili boste incrementCount, decrementCount, in resetCount pozneje deluje za povečanje, zmanjšanje in ponastavitev vrednosti števca.

Morda boste opazili zavite oklepaje { }, ki se uporabljajo okoli spremenljivke štetja v oznaki. To razčlenjevalniku JSX v bistvu pove, da mora obravnavati vsebino znotraj teh oklepajev kot JavaScript.

3. korak: Dodajanje funkcionalnosti aplikaciji Counter

Za izvajanje funkcionalnosti aplikacije števca morate ustvariti tri gumbe: gumb za zmanjšanje števila, gumb za povečanje števila in gumb za ponastavitev. Dodajte naslednjo kodo znotraj gumbi div:

<Gumbnaslov={"Zmanjšaj"} ukrepanje={decrementCount} />
<Gumbnaslov={"Prirastek"} ukrepanje={incrementCount} />
<Gumbnaslov={"Ponastaviti"} ukrepanje={resetCount} />

Ko kliknete te gumbe, se decrementCount, incrementCount, in resetCount funkcije se bodo izvajale. Upoštevajte, da ste mimo naslov in ukrepanje rekviziti od staršev aplikacija komponento za otroka Gumb komponento.

Posodobite te funkcije v App.js datoteko z naslednjo kodo:

pustiti incrementCount = () => {
 setCount (štetje + 1);
};
pustiti decrementCount = () => {
 setCount (štetje - 1);
};
pustiti resetCount = () => {
 setCount (0);
}

The setCount bo posodobila stanje štetje.

Upoštevajte, da še niste ustvarili komponente Button. Ustvari novo komponente mapo v src in nato ustvarite novo datoteko z imenom Button.js. Dobro je, da vse komponente hranite v isti mapi.

Dodajte naslednjo kodo v komponente/Button.js mapa:

uvoz Reagiraj od"reagirati";
funkcijoGumb(rekviziti) {
pustiti { dejanje, naslov } = rekviziti;
vrnitev<gumbonClick={dejanje}>{title}gumb>;
}
izvozprivzeto gumb;

The Gumb komponenta prejema podatke prek props. Funkcija nato dsestrukturira te rekvizite v ločene spremenljivke in jih uporabi za zapolnitev oznake, ki jo vrne.

Koda trikrat ponovno uporabi to komponento, da ustvari gumbe za povečanje, zmanjšanje in ponastavitev.

Končno uvozite komponento Button na vrhu App.js stran z naslednjo kodo:

uvoz Gumb od"./components/Botton";

Takole bo videti končna koda v App.js mapa:

uvoz Odziv, {useState} od"reagirati";
uvoz Gumb od"./components/Button";
funkcijoaplikacija() {
konst [count, setCount] = useState(0);
pustiti incrementCount = () => {
 setCount (štetje + 1);
 };
pustiti decrementCount = () => {
 setCount (štetje - 1);
 };
pustiti resetCount = () => {
 setCount (0);
 }
vrnitev (
<divclassName="aplikacija">
<str>Število: {count}str>
<divclassName="gumbi">
<Gumbnaslov={"Zmanjšaj"} ukrepanje={decrementCount} />
<Gumbnaslov={"Prirastek"} ukrepanje={incrementCount} />
<Gumbnaslov={"Ponastaviti"} ukrepanje={resetCount} />
div>
div>
 );
}
izvozprivzeto aplikacija;

Sledite najboljšim praksam React

Kodo React lahko napišete na različne načine, vendar je pomembno, da jo strukturirate čim bolj čisto. To vam bo zagotovilo enostavno vzdrževanje in lahko pripomoglo k izboljšanju splošne učinkovitosti vaše aplikacije.

Upoštevate lahko več praks React, ki jih priporoča skupnost React, na primer izogibanje ponavljajoči se kodi, pisanje testov za vsako komponento React, uporaba destrukturiranja objektov za rekvizite in sledeče poimenovanje konvencije.