Kako napraviti jednostavnu aplikaciju brojača u Reactu

React je jedna od najpopularnijih front-end JavaScript biblioteka. Mnoge tvrtke koriste React za razvoj svojih korisničkih sučelja i stekao je veliku popularnost među programerima.

Lako je izraditi jednostavan program s Reactom, poput ove osnovne aplikacije brojača. Započinjanje s jednostavnim vodičem pomoći će vam da shvatite neke od Reactovih osnovnih, ali važnih koncepata.

Značajke aplikacije Counter

U ovom projektu ćete razviti aplikaciju brojača sa sljedećim značajkama:

1. Gumb za povećanje brojanja: Ovo će povećati broj za jedan.
2. Gumb za smanjivanje broja: Ovo će smanjiti broj za jedan.
3. Gumb za resetiranje: Ovo će postaviti brojač na nulu.

Osnovni koncepti Reacta

Prije nego krenete naprijed, trebate razumjeti neke od ovih osnovnih koncepata u Reactu koje ćete koristiti u ovom projektu:

1. Komponente: Komponente su temeljni gradivni blokovi React aplikacija. Sadrže neovisni kod za višekratnu upotrebu. Pomoću komponenti možete podijeliti korisničko sučelje u zasebne dijelove. Zatim možete ponovno upotrijebiti te dijelove i samostalno raditi s njima.
   instagram viewer
2. država: U Reactu možete koristiti objekt za pohranu podataka koji predstavljaju stanje komponente. To omogućuje komponentama upravljanje i ažuriranje vlastitih podataka. Stanje komponente određuje kako se ona prikazuje i ponaša.
3. Funkcionalne komponente: Reactova funkcionalna komponenta jednostavno je JavaScript funkcija koja prihvaća props kao argument i vraća React element (JSX).
4. Rekviziti: Možete koristiti rekvizite—skraćeno od "svojstva"—za prosljeđivanje podataka od nadređene komponente do podređene komponente. Rekviziti su jedan od sastavnih dijelova Reacta i možete koristite rekvizite za izvođenje nekoliko operacija u Reactu.
5. Kuke: React Hooks su ugrađene funkcije koji vam omogućuju upravljanje stanjem i drugim značajkama Reacta kao što su metode životnog ciklusa unutar funkcionalnih komponenti. Također vam mogu pomoći da napišete koncizan i jasan kod. Uskoro ćete vidjeti kako možete upravljati državom pomoću useState() kuka.

Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom.

Korak 1: Postavljanje projekta

Otvorite terminal i pokrenite sljedeću naredbu za početak:

npx stvoriti-react-aplikacija reagirati-protiv-aplikacija

Ovo će izradite novu React aplikaciju, spreman za početak izgradnje vašeg projekta. Generirati će strukturu datotečnog sustava s nekoliko datoteka i mapa.

Izvedite sljedeću naredbu u terminalu za pokretanje razvojnog poslužitelja:

npm početak

Ta bi naredba trebala otvoriti novu karticu u vašem pregledniku, pokazujući na http://localhost: 3000. Ovdje će se automatski ažurirati sve promjene koje ćete napraviti u projektu.

Korak 2: Stvaranje kostura aplikacije brojača

Otvori src/App.js datoteku i izbrišite sav zadani kod koji je tamo prisutan. Sada izradite kostur aplikacije pomoću sljedećeg koda:

uvoz Reagiraj, {useState} iz"reagirati";
funkcijaaplikacija() {
konst [count, setCount] = useState(0);
neka incrementCount = () => {
// Dodati kasnije
 };
neka decrementCount = () => {
// Dodati kasnije
 };
neka resetCount = () => {
// Dodati kasnije
 }
povratak (
<divnaziv klase="aplikacija">
<str>Broj: {count}str>
<divnaziv klase="gumbi">
div>
div>
);
}
izvozzadano aplikacija;

Prva izjava uvozi useState udica iz reagirati modul. Koristite ga za stvaranje računati stanje i inicijalizirati na 0. Možete promijeniti vrijednost računati koristiti setCount funkcija.

Vi ćete koristiti incrementCount, decrementCount, i resetCount kasnije funkcionira za povećanje, smanjenje i resetiranje vrijednosti brojača.

Možda ćete primijetiti vitičaste zagrade { } koje se koriste oko varijable brojanja u označavanju. To u biti daje JSX parseru do znanja da bi trebao tretirati sadržaj unutar tih zagrada kao JavaScript.

Korak 3: Dodavanje funkcionalnosti aplikaciji brojača

Morate izraditi tri gumba za implementaciju funkcionalnosti aplikacije brojača: gumb za smanjivanje brojača, gumb za povećavanje brojača i gumb za resetiranje. Dodajte sljedeći kod unutar gumbi div:

<Dugmetitula={"Smanjenje"} akcijski={decrementCount} />
<Dugmetitula={"Povećanje"} akcijski={incrementCount} />
<Dugmetitula={"Resetiraj"} akcijski={resetCount} />

Kada kliknete ove gumbe, decrementCount, incrementCount, i resetCount funkcije će se pokrenuti. Imajte na umu da prolazite titula i akcijski rekvizite od roditelja aplikacija komponenta djetetu Dugme komponenta.

Ažurirajte ove funkcije u App.js datoteka sa sljedećim kodom:

neka incrementCount = () => {
 setCount (broj + 1);
};
neka decrementCount = () => {
 setCount (broj - 1);
};
neka resetCount = () => {
 setBroj (0);
}

The setCount funkcija će ažurirati stanje računati.

Imajte na umu da još niste izradili komponentu Button. Stvorite novi komponente mapu u src direktorij, a zatim stvorite novu datoteku pod nazivom Button.js. Dobro je držati sve komponente u istoj mapi.

Dodajte sljedeći kod u komponente/Button.js datoteka:

uvoz Reagirati iz"reagirati";
funkcijaDugme(rekviziti) {
neka { radnja, naslov } = rekviziti;
povratak<dugmena klik={akcijski}>{titula}dugme>;
}
izvozzadano Dugme;

The Dugme komponenta prima podatke putem rekvizita. Funkcija zatim dstrukturira te rekvizite u zasebne varijable, koristeći ih za popunjavanje markupa koji vraća.

Kod ponovno koristi ovu komponentu tri puta za stvaranje gumba za povećanje, smanjenje i resetiranje.

Na kraju, uvezite komponentu Button na vrhu App.js stranici pomoću sljedećeg koda:

uvoz Dugme iz"./components/Botton";

Ovako će izgledati konačni kod u App.js datoteka:

uvoz Reagiraj, {useState} iz"reagirati";
uvoz Dugme iz"./components/Button";
funkcijaaplikacija() {
konst [count, setCount] = useState(0);
neka incrementCount = () => {
 setCount (broj + 1);
 };
neka decrementCount = () => {
 setCount (broj - 1);
 };
neka resetCount = () => {
 setBroj (0);
 }
povratak (
<divnaziv klase="aplikacija">
<str>Broj: {count}str>
<divnaziv klase="gumbi">
<Dugmetitula={"Smanjenje"} akcijski={decrementCount} />
<Dugmetitula={"Povećanje"} akcijski={incrementCount} />
<Dugmetitula={"Resetiraj"} akcijski={resetCount} />
div>
div>
 );
}
izvozzadano aplikacija;

Slijedite najbolje prakse Reacta

Možete pisati React kod na različite načine, ali važno je strukturirati ga što čišće. To će osigurati da ga lako održavate i može pomoći u poboljšanju ukupne izvedbe vaše aplikacije.

Možete slijediti nekoliko React praksi koje preporučuje React zajednica poput izbjegavanja ponavljajućeg koda, pisanje testova za svaku React komponentu, korištenje destrukturiranja objekta za rekvizite i slijedeće imenovanje konvencije.