Cum să construiți o aplicație simplă de contor în React

React este una dintre cele mai populare biblioteci JavaScript front-end. Multe companii folosesc React pentru a-și dezvolta interfețele de utilizator și a câștigat o mare popularitate în rândul dezvoltatorilor.

Este ușor să construiți un program simplu cu React, cum ar fi această aplicație de bază de contor. Începând cu un tutorial simplu, vă va ajuta să înțelegeți unele dintre conceptele de bază, dar importante ale React.

Caracteristicile aplicației Counter

În acest proiect, veți dezvolta o aplicație de contor cu următoarele caracteristici:

1. Butonul de creștere a numărului: Acest lucru va crește numărul cu unu.
2. Butonul de reducere a numărului: Acest lucru va reduce numărul cu unu.
3. Butonul de resetare: Aceasta va seta numărul la zero.

Concepte de bază ale reacției

Înainte de a merge mai departe, trebuie să înțelegeți câteva dintre aceste concepte de bază în React pe care le veți folosi în acest proiect:

1. Componente: Componentele sunt elementele de bază ale aplicațiilor React. Acestea conțin cod independent, reutilizabil. Folosind componente, puteți împărți interfața cu utilizatorul în părți separate. Puteți apoi să refolosiți acele părți și să lucrați cu ele independent.
2. Stat: În React puteți folosi un obiect pentru a stoca date reprezentând starea unei componente. Acest lucru permite componentelor să-și gestioneze și să-și actualizeze propriile date. Starea unei componente determină modul în care se redă și se comportă.
3. Componente funcționale: Componenta funcțională a lui React este pur și simplu o funcție JavaScript care acceptă elemente de recuzită ca argument și returnează un element React (JSX).
4. Recuzită: Puteți folosi elemente de recuzită — prescurtare pentru „proprietăți” — pentru a transmite date de la o componentă părinte la o componentă secundară. Recuzitele sunt una dintre părțile integrante ale React și puteți utilizați recuzită pentru a efectua mai multe operații în React.
5. Cârlige: React Hooks sunt funcții încorporate care vă permit să gestionați starea și alte caracteristici React, cum ar fi metodele ciclului de viață în cadrul componentelor funcționale. De asemenea, vă pot ajuta să scrieți cod concis și clar. Veți vedea în curând cum puteți gestiona starea cu useState() cârlig.

Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.

Pasul 1: Configurarea proiectului

Deschideți terminalul și rulați următoarea comandă pentru a începe:

npx crea-react-app react-counter-app

Asta va creați o nouă aplicație react, gata să începeți să vă construiți proiectul. Va genera o structură de sistem de fișiere cu mai multe fișiere și foldere.

Rulați următoarea comandă în terminal pentru a porni serverul de dezvoltare:

npm start

Această comandă ar trebui să deschidă o filă nouă în browser, care să arate către http://localhost: 3000. Toate modificările pe care le veți face proiectului vor fi actualizate automat aici.

Pasul 2: Crearea scheletului aplicației de contor

Deschide src/App.js fișier și ștergeți tot codul implicit care este prezent acolo. Acum, creați un schelet al aplicației folosind următorul cod:

import Reacționează, { useState } din"reacţiona";
funcţieApp() {
const [număr, setCount] = useState(0);
lăsa incrementCount = () => {
// Pentru a adăuga mai târziu
 };
lăsa decrementCount = () => {
// Pentru a adăuga mai târziu
 };
lăsa resetCount = () => {
// Pentru a adăuga mai târziu
 }
întoarcere (
<divnumele clasei=„aplicație”>
<p>Număr: {count}p>
<divnumele clasei="butoane">
div>
div>
);
}
exportMod implicit Aplicație;

Prima declarație importă useState cârlig de la reacţiona modul. Folosiți-l pentru a crea numara stare și inițializați-o la 0. Puteți modifica valoarea numara folosind setCount funcţie.

Vei folosi incrementCount, decrementCount, și resetCount funcţionează ulterior pentru a creşte, a scădea şi a reseta valoarea contorului.

Este posibil să observați parantezele { } folosite în jurul variabilei de numărare în marcaj. Acest lucru îi permite, în esență, analizorului JSX să știe că ar trebui să trateze conținutul din acele acolade ca JavaScript.

Pasul 3: Adăugarea funcționalității la aplicația de contor

Trebuie să creați trei butoane pentru a implementa funcționalitatea aplicației de contor: butonul de decrementare, butonul de creștere și butonul de resetare. Adăugați următorul cod în interiorul butoane div:

<Butontitlu={"Decrementează"} acțiune={decrementCount} />
<Butontitlu={"Creştere"} acțiune={incrementCount} />
<Butontitlu={"Resetați"} acțiune={resetCount} />

Când faceți clic pe aceste butoane, decrementCount, incrementCount, și resetCount funcțiile vor rula. Rețineți că treceți pe lângă titlu și acțiune recuzită de la părinte App componentă pentru copil Buton componentă.

Actualizați aceste funcții în App.js fisier cu urmatorul cod:

lăsa incrementCount = () => {
 setCount (număr + 1);
};
lăsa decrementCount = () => {
 setCount (număr - 1);
};
lăsa resetCount = () => {
 setCount (0);
}

The setCount funcția va actualiza starea numara.

Rețineți că nu ați creat încă componenta Button. Creaza un nou componente folderul în src director și apoi creați un fișier nou numit Button.js. Este o practică bună să păstrați toate componentele în același folder.

Adăugați următorul cod în componente/Button.js fişier:

import Reacţiona din"reacţiona";
funcţieButon(recuzită) {
lăsa { acțiune, titlu } = recuzită;
întoarcere<butononClick={acțiune}>{titlu}buton>;
}
exportMod implicit Buton;

The Buton componenta primește date prin elemente de recuzită. Funcția apoi dsestructurează aceste elemente de recuzită în variabile separate, folosindu-le pentru a popula marcajul pe care îl returnează.

Codul reutiliza această componentă de trei ori pentru a crea butoanele de creștere, decrementare și resetare.

În cele din urmă, importați componenta Button din partea de sus a fișierului App.js pagina folosind următorul cod:

import Buton din„./components/Botton”;

Așa va arăta codul final în App.js fişier:

import Reacționează, { useState } din"reacţiona";
import Buton din„./components/Button”;
funcţieApp() {
const [număr, setCount] = useState(0);
lăsa incrementCount = () => {
 setCount (număr + 1);
 };
lăsa decrementCount = () => {
 setCount (număr - 1);
 };
lăsa resetCount = () => {
 setCount (0);
 }
întoarcere (
<divnumele clasei=„aplicație”>
<p>Număr: {count}p>
<divnumele clasei="butoane">
<Butontitlu={"Decrementează"} acțiune={decrementCount} />
<Butontitlu={"Creştere"} acțiune={incrementCount} />
<Butontitlu={"Resetați"} acțiune={resetCount} />
div>
div>
 );
}
exportMod implicit Aplicație;

Urmați cele mai bune practici React

Puteți scrie codul React în diferite moduri, dar este important să îl structurați cât mai curat posibil. Acest lucru vă va asigura că îl puteți întreține cu ușurință și vă poate ajuta la îmbunătățirea performanței generale a aplicației dvs.

Puteți urma mai multe practici React recomandate de comunitatea React, cum ar fi evitarea codului repetitiv, scrierea de teste pentru fiecare componentă React, folosind destructurarea obiectelor pentru recuzită și după denumirea conventii.