Hvordan bygge en enkel tellerapp i React

React er et av de mest populære front-end JavaScript-bibliotekene. Mange selskaper bruker React til å utvikle brukergrensesnittene sine, og det har vunnet stor popularitet blant utviklere.

Det er enkelt å bygge et enkelt program med React, som denne grunnleggende tellerappen. Å starte med en enkel opplæring vil hjelpe deg å forstå noen av Reacts grunnleggende, men viktige konsepter.

Funksjoner i Counter-appen

I dette prosjektet skal du utvikle en tellerapplikasjon med følgende funksjoner:

1. Øk telleknapp: Dette vil øke antallet med én.
2. Reduser telleknapp: Dette vil redusere antallet med én.
3. Nullstillknapp: Dette vil sette tellingen til null.

Grunnleggende konsepter for React

Før du går videre, må du forstå noen av disse grunnleggende konseptene i React som du skal bruke i dette prosjektet:

1. Komponenter: Komponenter er kjernebyggesteinene i React-applikasjoner. De inneholder uavhengig, gjenbrukbar kode. Ved å bruke komponenter kan du dele brukergrensesnittet i separate deler. Du kan deretter gjenbruke disse delene og jobbe med dem selvstendig.
   instagram viewer
2. Stat: I React kan du bruke et objekt til å lagre data som representerer tilstanden til en komponent. Dette lar komponenter administrere og oppdatere sine egne data. En komponents tilstand bestemmer hvordan den gjengis og oppfører seg.
3. Funksjonelle komponenter: Reacts funksjonelle komponent er ganske enkelt en JavaScript-funksjon som godtar rekvisitter som et argument og returnerer et React-element (JSX).
4. Rekvisitter: Du kan bruke rekvisitter – forkortelse for "egenskaper" – for å overføre data fra en overordnet komponent til en underordnet komponent. Rekvisitter er en av de integrerte delene av React, og du kan bruke rekvisitter til å utføre flere operasjoner i React.
5. Kroker: React Hooks er innebygde funksjoner som lar deg administrere tilstand og andre React-funksjoner som livssyklusmetoder inne i funksjonelle komponenter. De kan også hjelpe deg med å skrive kortfattet og tydelig kode. Du vil snart se hvordan du kan administrere staten med useState() krok.

Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

Trinn 1: Sette opp prosjektet

Åpne terminalen og kjør følgende kommando for å komme i gang:

npx skape-react-app react-counter-app

Dette vil opprette en ny react-app, klar til å begynne å bygge prosjektet ditt med. Det vil generere en filsystemstruktur med flere filer og mapper.

Kjør følgende kommando i terminalen for å starte utviklingsserveren:

npm start

Den kommandoen skal åpne en ny fane i nettleseren din og peke på http://localhost: 3000. Alle endringene du gjør i prosjektet vil automatisk bli oppdatert her.

Trinn 2: Lage skjelettet til tellerapplikasjonen

Åpne src/App.js fil og slett all standardkoden som finnes der. Lag nå et skjelett av applikasjonen ved å bruke følgende kode:

import Reager, { useState } fra"reagere";
funksjonApp() {
konst [count, setCount] = useState(0);
la incrementCount = () => {
// For å legge til senere
 };
la decrementCount = () => {
// For å legge til senere
 };
la resetCount = () => {
// For å legge til senere
 }
komme tilbake (
<divklassenavn="app">
<s>Antall: {count}s>
<divklassenavn="knapper">
div>
div>
);
}
eksportmisligholde App;

Den første uttalelsen importerer useState krok fra reagere modul. Bruk den til å lage telle tilstand og initialiser den til 0. Du kan endre verdien på telle bruker setCount funksjon.

Du vil bruke inkrementCount, decrementCount, og resetCount fungerer senere for å øke, redusere og tilbakestille verdien på telleren.

Du kan legge merke til de krøllede parentesene { } som brukes rundt tellevariabelen i markeringen. Dette lar i hovedsak JSX-parseren vite at den skal behandle innholdet i disse klammeparentesene som JavaScript.

Trinn 3: Legge til funksjonaliteten i tellerapplikasjonen

Du må lage tre knapper for å implementere funksjonaliteten til tellerapplikasjonen: nedtellingsknappen, inkrementtellingsknappen og tilbakestillingsknappen. Legg til følgende kode i knapper div:

<Knapptittel={"Redusere"} handling={decrementCount} />
<Knapptittel={"Øke"} handling={incrementCount} />
<Knapptittel={"Nullstille"} handling={resetCount} />

Når du klikker på disse knappene, vises decrementCount, inkrementCount, og resetCount funksjoner vil kjøre. Merk at du passerer tittel og handling rekvisitter fra foreldrene App komponent til barnet Knapp komponent.

Oppdater disse funksjonene i App.js fil med følgende kode:

la incrementCount = () => {
 setCount (tell + 1);
};
la decrementCount = () => {
 setCount (tell - 1);
};
la resetCount = () => {
 setCount (0);
}

De setCount funksjonen vil oppdatere tilstanden til telle.

Vær oppmerksom på at du ikke har opprettet Button-komponenten ennå. Lage en ny komponenter mappe i src katalog og deretter opprette en ny fil med navnet Button.js. Det er en god praksis å ha alle komponentene i samme mappe.

Legg til følgende kode i komponenter/Button.js fil:

import Reagere fra"reagere";
funksjonKnapp(Rekvisitter) {
la { handling, tittel } ​​= rekvisitter;
komme tilbake<knappved trykk={handling}>{tittel}knapp>;
}
eksportmisligholde Knapp;

De Knapp komponent mottar data via rekvisitter. Funksjonen omstrukturerer deretter disse rekvisittene i separate variabler, og bruker dem til å fylle ut markeringen den returnerer.

Koden gjenbruker denne komponenten tre ganger for å lage opp-, ned- og tilbakestillingsknappene.

Til slutt importerer du Button-komponenten øverst på App.js side med følgende kode:

import Knapp fra"./components/Botton";

Slik vil den endelige koden se ut i App.js fil:

import Reager, { useState } fra"reagere";
import Knapp fra"./komponenter/knapp";
funksjonApp() {
konst [count, setCount] = useState(0);
la incrementCount = () => {
 setCount (tell + 1);
 };
la decrementCount = () => {
 setCount (tell - 1);
 };
la resetCount = () => {
 setCount (0);
 }
komme tilbake (
<divklassenavn="app">
<s>Antall: {count}s>
<divklassenavn="knapper">
<Knapptittel={"Redusere"} handling={decrementCount} />
<Knapptittel={"Øke"} handling={incrementCount} />
<Knapptittel={"Nullstille"} handling={resetCount} />
div>
div>
 );
}
eksportmisligholde App;

Følg beste reaksjonspraksis

Du kan skrive React-kode på forskjellige måter, men det er viktig å strukturere den så rent som mulig. Dette vil sikre at du enkelt kan vedlikeholde det og kan bidra til å forbedre den generelle ytelsen til applikasjonen din.

Du kan følge flere React-praksis anbefalt av React-fellesskapet som å unngå repeterende kode, skrive tester for hver React-komponent, bruke objektdestrukturering for rekvisitter og følgende navngivning konvensjoner.