React je jednou z najpopulárnejších front-end knižníc JavaScript. Mnoho spoločností používa React na vývoj svojich používateľských rozhraní a medzi vývojármi si získalo veľkú popularitu.
Je ľahké vytvoriť jednoduchý program s Reactom, ako je táto základná aplikácia počítadla. Začnite s jednoduchým tutoriálom, ktorý vám pomôže pochopiť niektoré základné, ale dôležité koncepty Reactu.
Funkcie aplikácie Counter App
V tomto projekte sa chystáte vyvinúť aplikáciu počítadla s nasledujúcimi funkciami:
- Tlačidlo zvýšenia počtu: Toto zvýši počet o jeden.
- Tlačidlo zníženia počtu: Týmto sa počet zníži o jednu.
- Tlačidlo reštart: Týmto sa počet nastaví na nulu.
Základné pojmy React
Predtým, ako budete pokračovať, musíte pochopiť niektoré z týchto základných pojmov v Reacte, ktoré budete používať v tomto projekte:
- Komponenty: Komponenty sú základnými stavebnými kameňmi aplikácií React. Obsahujú nezávislý, opakovane použiteľný kód. Pomocou komponentov môžete používateľské rozhranie rozdeliť na samostatné časti. Tieto časti potom môžete znova použiť a pracovať s nimi samostatne.
- Štát: V React môžete použiť objekt na ukladanie údajov reprezentujúcich stav komponentu. To umožňuje komponentom spravovať a aktualizovať svoje vlastné údaje. Stav komponentu určuje, ako sa vykresľuje a ako sa správa.
- Funkčné komponenty: Funkčný komponent Reactu je jednoducho funkcia JavaScript, ktorá akceptuje rekvizity ako argument a vracia prvok React (JSX).
- Rekvizity: Môžete použiť rekvizity – skratka pre „vlastnosti“ – na odovzdanie údajov z nadradeného komponentu do podriadeného komponentu. Rekvizity sú jednou z neoddeliteľných súčastí Reactu a vy môžete použite rekvizity na vykonanie niekoľkých operácií v React.
- Háčiky: React Hooks sú vstavané funkcie ktoré vám umožňujú spravovať stav a ďalšie funkcie Reactu, ako sú metódy životného cyklu vo funkčných komponentoch. Môžu vám tiež pomôcť napísať stručný a jasný kód. Čoskoro uvidíte, ako môžete spravovať stav pomocou useState() háčik.
Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.
Krok 1: Nastavenie projektu
Otvorte terminál a spustite nasledujúci príkaz:
npx vytvoriť-react-app reagovať-counter-appToto bude vytvorte novú aplikáciu na reakcie, pripravený na to, aby ste mohli začať budovať svoj projekt. Vygeneruje štruktúru súborového systému s niekoľkými súbormi a priečinkami.
Spustite nasledujúci príkaz v termináli a spustite vývojový server:
npm začaťTento príkaz by mal vo vašom prehliadači otvoriť novú kartu smerujúcu na http://localhost: 3000. Všetky zmeny, ktoré v projekte vykonáte, sa tu automaticky aktualizujú.
Krok 2: Vytvorenie kostry protiaplikácie
Otvor src/App.js súbor a odstráňte všetok predvolený kód, ktorý sa tam nachádza. Teraz vytvorte kostru aplikácie pomocou nasledujúceho kódu:
importovať Reagovať, { useState } od"reagovať";funkciuApp() {
konšt [count, setCount] = useState(0);
nech incrementCount = () => {
// Pridať neskôr
};
nech decrementCount = () => {
// Pridať neskôr
};
nech resetCount = () => {
// Pridať neskôr
}vrátiť (
<divclassName="aplikácia">
<p>Počet: {count}p>
<divclassName="tlačidlá">
div>
div>
);
}
exportpredvolená App;
Prvý príkaz importuje useState háčik z reagovať modul. Použite ho na vytvorenie počítať stav a inicializujte ho na 0. Môžete zmeniť hodnotu počítať pomocou setCount funkciu.
Budete používať incrementCount, decrementCount, a resetCount funkcie neskôr zvýšiť, znížiť a vynulovať hodnotu počítadla.
Môžete si všimnúť zložené zátvorky { } použité okolo premennej count v značke. To v podstate umožňuje syntaktickému analyzátoru JSX vedieť, že by mal s obsahom v týchto zátvorkách zaobchádzať ako s JavaScriptom.
Krok 3: Pridanie funkcie do aplikácie Counter
Ak chcete implementovať funkcie aplikácie počítadla, musíte vytvoriť tri tlačidlá: tlačidlo zníženia počtu, tlačidlo zvýšenia počtu a tlačidlo reset. Pridajte nasledujúci kód do tlačidlá div:
<Tlačidlotitul={"Dekrementovať"} akcie={decrementCount} />
<Tlačidlotitul={"Prírastok"} akcie={incrementCount} />
<Tlačidlotitul={"Resetovať"} akcie={resetCount} />Keď kliknete na tieto tlačidlá, decrementCount, incrementCount, a resetCount funkcie budú spustené. Všimnite si, že míňate titul a akcie rekvizity od rodiča App komponent pre dieťa Tlačidlo komponent.
Aktualizujte tieto funkcie v App.js súbor s nasledujúcim kódom:
nech incrementCount = () => {
setCount (počet + 1);
};nech decrementCount = () => {
setCount (počet - 1);
};
nech resetCount = () => {
setCount (0);
}
The setCount funkcia aktualizuje stav počítať.
Všimnite si, že ste ešte nevytvorili komponent Button. Vytvorte nový komponentov priečinok v src adresár a potom vytvorte nový súbor s názvom Button.js. Je dobrým zvykom uchovávať všetky komponenty v rovnakom priečinku.
Pridajte nasledujúci kód do komponenty/Button.js súbor:
importovať Reagovať od"reagovať";funkciuTlačidlo(rekvizity) {
nech { akcia, nadpis } = rekvizity;
vrátiť<tlačidlopo kliknutí={action}>{title}tlačidlo>;
}
exportpredvolená Tlačidlo;
The Tlačidlo komponent prijíma dáta cez rekvizity. Funkcia potom rozloží tieto rekvizity do samostatných premenných a použije ich na vyplnenie vráteného označenia.
Kód znovu použije tento komponent trikrát na vytvorenie tlačidiel zvýšenia, zníženia a resetovania.
Nakoniec importujte komponent Button v hornej časti App.js stránku pomocou nasledujúceho kódu:
importovať Tlačidlo od"./components/Botton";Takto bude konečný kód vyzerať v App.js súbor:
importovať Reagovať, { useState } od"reagovať";
importovať Tlačidlo od"./components/Button";funkciuApp() {
konšt [count, setCount] = useState(0);nech incrementCount = () => {
setCount (počet + 1);
};nech decrementCount = () => {
setCount (počet - 1);
};nech resetCount = () => {
setCount (0);
}vrátiť (
<divclassName="aplikácia">
<p>Počet: {count}p>
<divclassName="tlačidlá">
<Tlačidlotitul={"Dekrementovať"} akcie={decrementCount} />
<Tlačidlotitul={"Prírastok"} akcie={incrementCount} />
<Tlačidlotitul={"Resetovať"} akcie={resetCount} />
div>
div>
);
}
exportpredvolená App;
Postupujte podľa osvedčených postupov React
Kód React môžete napísať rôznymi spôsobmi, ale je dôležité, aby ste ho štruktúrovali čo najčistejšie. To zaistí, že ho budete môcť jednoducho udržiavať a môže pomôcť zlepšiť celkový výkon vašej aplikácie.
Môžete postupovať podľa niekoľkých postupov React odporúčaných komunitou React, ako je vyhýbanie sa opakovanému kódu, písanie testov pre každý komponent React, použitie deštrukcie objektov pre rekvizity a následné pomenovanie dohovorov.