Kā izveidot vienkāršu skaitītāja lietotni pakalpojumā React

React ir viena no populārākajām priekšgala JavaScript bibliotēkām. Daudzi uzņēmumi izmanto React, lai izstrādātu savas lietotāja saskarnes, un tas ir guvis plašu popularitāti izstrādātāju vidū.

Izmantojot React, ir viegli izveidot vienkāršu programmu, piemēram, šo pamata skaitītāja lietotni. Sākot ar vienkāršu apmācību, jūs varēsit saprast dažus React pamata, bet svarīgos jēdzienus.

Counter App funkcijas

Šajā projektā jūs gatavojaties izstrādāt skaitītāja lietojumprogrammu ar šādām funkcijām:

1. Poga Palielināt skaitu: Tas palielinās skaitu par vienu.
2. Skaitīšanas samazināšanas poga: Tas samazinās skaitu par vienu.
3. Atiestatīšanas poga: skaitīšana tiks iestatīta uz nulli.

Reakcijas pamatjēdzieni

Pirms turpināt darbu, jums ir jāsaprot daži no šiem React pamatjēdzieniem, kurus izmantosit šajā projektā:

1. Sastāvdaļas: komponenti ir React lietojumprogrammu pamatelementi. Tie satur neatkarīgu, atkārtoti lietojamu kodu. Izmantojot komponentus, lietotāja interfeisu var sadalīt atsevišķās daļās. Pēc tam varat atkārtoti izmantot šīs daļas un strādāt ar tām neatkarīgi.
   instagram viewer
2. Valsts: React varat izmantot objektu, lai saglabātu datus, kas atspoguļo komponenta stāvokli. Tas ļauj komponentiem pārvaldīt un atjaunināt savus datus. Komponenta stāvoklis nosaka, kā tas tiek renderēts un kā tas darbojas.
3. Funkcionālie komponenti: React funkcionālais komponents ir vienkārši JavaScript funkcija, kas pieņem rekvizītus kā argumentu un atgriež React elementu (JSX).
4. Rekvizīti: varat izmantot rekvizītus — saīsinājumu no "rekvizīti", lai pārsūtītu datus no vecākkomponenta uz pakārtoto komponentu. Rekvizīti ir viena no neatņemamām React sastāvdaļām, un jūs varat izmantojiet rekvizītus, lai programmā React veiktu vairākas darbības.
5. Āķi: React Hooks ir iebūvētas funkcijas kas ļauj pārvaldīt stāvokli un citus React līdzekļus, piemēram, dzīves cikla metodes funkcionālos komponentos. Tie var arī palīdzēt jums uzrakstīt kodolīgu un skaidru kodu. Drīz jūs redzēsit, kā varat pārvaldīt stāvokli, izmantojot useState() āķis.

Šajā projektā izmantotais kods ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci.

1. darbība: projekta iestatīšana

Lai sāktu, atveriet savu termināli un palaidiet šo komandu:

npx izveidot-react-app reaģēt-counter-app

Šis būs izveidot jaunu reaģēt lietotni, kas ir gatavs, lai jūs varētu sākt veidot savu projektu. Tas ģenerēs failu sistēmas struktūru ar vairākiem failiem un mapēm.

Terminālī palaidiet šādu komandu, lai palaistu izstrādes serveri:

npm sākt

Šai komandai pārlūkprogrammā vajadzētu atvērt jaunu cilni, norādot uz http://localhost: 3000. Visas izmaiņas, ko veiksit projektā, tiks automātiski atjauninātas šeit.

2. darbība. Skaitītāja lietojumprogrammas skeleta izveide

Atveriet src/App.js failu un izdzēsiet visu pēc noklusējuma tur esošo kodu. Tagad izveidojiet lietojumprogrammas skeletu, izmantojot šādu kodu:

imports Reaģēt, { useState } no"reaģēt";
funkcijuApp() {
konst [count, setCount] = useState(0);
ļaut incrementCount = () => {
// Lai pievienotu vēlāk
 };
ļaut decrementCount = () => {
// Lai pievienotu vēlāk
 };
ļaut resetCount = () => {
// Lai pievienotu vēlāk
 }
atgriezties (
<divklasesNosaukums="lietotne">
<lpp>Skaits: {count}lpp>
<divklasesNosaukums="pogas">
div>
div>
);
}
eksportētnoklusējuma Lietotne;

Pirmais paziņojums importē useState āķis no reaģēt modulis. Izmantojiet to, lai izveidotu skaitīt stāvokli un inicializējiet to uz 0. Jūs varat mainīt vērtību skaitīt izmantojot setCount funkciju.

Jūs izmantosit incrementCount, decrementCount, un resetCount funkcijas vēlāk, lai palielinātu, samazinātu un atiestatītu skaitītāja vērtību.

Varat pamanīt, ka marķējumā ap skaitīšanas mainīgo tiek izmantotas krokainas iekavas { }. Tas būtībā ļauj JSX parsētājam zināt, ka tam ir jāapstrādā saturs šajās iekavās kā JavaScript.

3. darbība. Funkcionalitātes pievienošana skaitītāja lietojumprogrammai

Lai ieviestu skaitītāja lietojumprogrammas funkcionalitāti, ir jāizveido trīs pogas: skaitīšanas samazināšanas poga, skaitīšanas palielināšanas poga un atiestatīšanas poga. Iekšpusē pievienojiet šādu kodu pogas div:

<Pogavirsraksts={"Samazinājums"} darbība={decrementCount} />
<Pogavirsraksts={"Pieaugums"} darbība={incrementCount} />
<Pogavirsraksts={"Atiestatīt"} darbība={resetCount} />

Noklikšķinot uz šīm pogām, decrementCount, incrementCount, un resetCount funkcijas darbosies. Ņemiet vērā, ka jūs šķērsojat virsraksts un darbība rekvizīti no vecākiem App sastāvdaļa bērnam Poga komponents.

Atjauniniet šīs funkcijas programmā App.js failu ar šādu kodu:

ļaut incrementCount = () => {
 setCount (count + 1);
};
ļaut decrementCount = () => {
 setCount (skaits - 1);
};
ļaut resetCount = () => {
 setCount (0);
}

The setCount funkcija atjauninās statusu skaitīt.

Ņemiet vērā, ka jūs vēl neesat izveidojis komponentu Button. Izveidojiet jaunu sastāvdaļas mapē src direktorijā un pēc tam izveidojiet jaunu failu ar nosaukumu Button.js. Ieteicams visus komponentus glabāt vienā mapē.

Pievienojiet tālāk norādīto kodu komponenti/Button.js fails:

imports Reaģēt no"reaģēt";
funkcijuPoga(rekvizīti) {
ļaut {darbība, nosaukums} = rekvizīti;
atgriezties<poguonClick={darbība}>{title}pogu>;
}
eksportētnoklusējuma Poga;

The Poga komponents saņem datus, izmantojot rekvizītus. Pēc tam funkcija dstrukturē šos rekvizītus atsevišķos mainīgos, izmantojot tos, lai aizpildītu atgriežamo marķējumu.

Kods atkārtoti izmanto šo komponentu trīs reizes, lai izveidotu palielināšanas, samazināšanas un atiestatīšanas pogas.

Visbeidzot importējiet komponentu Poga, kas atrodas augšpusē App.js lapu, izmantojot šādu kodu:

imports Poga no"./components/Botton";

Šādi izskatīsies galīgais kods App.js fails:

imports Reaģēt, { useState } no"reaģēt";
imports Poga no"./components/Button";
funkcijuApp() {
konst [count, setCount] = useState(0);
ļaut incrementCount = () => {
 setCount (count + 1);
 };
ļaut decrementCount = () => {
 setCount (skaits - 1);
 };
ļaut resetCount = () => {
 setCount (0);
 }
atgriezties (
<divklasesNosaukums="lietotne">
<lpp>Skaits: {count}lpp>
<divklasesNosaukums="pogas">
<Pogavirsraksts={"Samazinājums"} darbība={decrementCount} />
<Pogavirsraksts={"Pieaugums"} darbība={incrementCount} />
<Pogavirsraksts={"Atiestatīt"} darbība={resetCount} />
div>
div>
 );
}
eksportētnoklusējuma Lietotne;

Ievērojiet labāko reaģēšanas praksi

React kodu var rakstīt dažādos veidos, taču ir svarīgi to strukturēt pēc iespējas tīrāk. Tas nodrošinās, ka varat to viegli uzturēt un var palīdzēt uzlabot lietojumprogrammas vispārējo veiktspēju.

Varat ievērot vairākas React kopienas ieteiktās React prakses, piemēram, izvairīties no atkārtota koda, rakstot testus katram React komponentam, izmantojot objektu iznīcināšanu rekvizītiem un sekojošu nosaukumu piešķiršanu konvencijas.