Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

React er et af de mest populære front-end JavaScript-biblioteker. Mange virksomheder bruger React til at udvikle deres brugergrænseflader, og det har vundet stor popularitet blandt udviklere.

Det er nemt at bygge et simpelt program med React, som denne grundlæggende tællerapp. At starte med en ligetil tutorial vil hjælpe dig med at forstå nogle af Reacts grundlæggende, men vigtige koncepter.

Funktioner i Counter-appen

I dette projekt skal du udvikle en modapplikation med følgende funktioner:

  1. Forøg tællerknap: Dette vil øge antallet med én.
  2. Reducer tællerknap: Dette vil reducere antallet med én.
  3. Genstarts knap: Dette vil sætte tælleren til nul.

Grundlæggende begreber for React

Før du går videre, skal du forstå nogle af disse grundlæggende begreber i React, som du vil bruge i dette projekt:

  1. Komponenter: Komponenter er kernebyggestenene i React-applikationer. De indeholder uafhængig, genbrugelig kode. Ved at bruge komponenter kan du opdele brugergrænsefladen i separate dele. Du kan derefter genbruge disse dele og arbejde med dem selvstændigt.
    instagram viewer
  2. Stat: I React kan du bruge et objekt til at gemme data, der repræsenterer en komponents tilstand. Dette giver komponenter mulighed for at administrere og opdatere deres egne data. En komponents tilstand bestemmer, hvordan den gengives og opfører sig.
  3. Funktionelle komponenter: Reacts funktionelle komponent er simpelthen en JavaScript-funktion, der accepterer rekvisitter som et argument og returnerer et React-element (JSX).
  4. Rekvisitter: Du kan bruge rekvisitter - en forkortelse for "egenskaber" - til at overføre data fra en overordnet komponent til en underordnet komponent. Rekvisitter er en af ​​de integrerede dele af React, og du kan bruge rekvisitter til at udføre flere operationer i React.
  5. Kroge: React Hooks er indbyggede funktioner der giver dig mulighed for at administrere tilstand og andre React-funktioner som livscyklusmetoder inde i funktionelle komponenter. De kan også hjælpe dig med at skrive kortfattet og tydelig kode. Du vil snart se, hvordan du kan administrere staten med useState() krog.

Koden brugt i dette projekt er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT-licensen.

Trin 1: Opsætning af projektet

Åbn din terminal og kør følgende kommando for at komme i gang:

npx skab-react-app react-counter-app

Dette vil oprette en ny reagere app, klar til at du kan begynde at bygge dit projekt med. Det vil generere en filsystemstruktur med flere filer og mapper.

Kør følgende kommando i terminalen for at starte udviklingsserveren:

npm Start

Denne kommando skulle åbne en ny fane i din browser, der peger på http://localhost: 3000. Alle de ændringer, du foretager i projektet, vil automatisk blive opdateret her.

Trin 2: Oprettelse af skelettet til tællerapplikationen

Åbn src/App.js fil og slet al den standardkode, der er til stede der. Opret nu et skelet af applikationen ved hjælp af følgende kode:

importere Reager, { useState } fra"reagere";
fungereApp() {
konst [count, setCount] = useState(0);
lade incrementCount = () => {
// For at tilføje senere
 };
lade decrementCount = () => {
// For at tilføje senere
 };
lade resetCount = () => {
// For at tilføje senere
 }


Vend tilbage (
<divklassenavn="app">
<s>Antal: {count}s>
<divklassenavn="knapper">
div>
div>
);
}
eksportStandard App;

Den første erklæring importerer useState krog fra reagere modul. Brug den til at skabe tælle tilstand og initialiser den til 0. Du kan ændre værdien af tælle bruger setCount fungere.

Du vil bruge incrementCount, decrementCount, og nulstilTæl fungerer senere til at øge, mindske og nulstille værdien af ​​tælleren.

Du vil muligvis bemærke de krøllede parenteser { }, der bruges omkring tællevariablen i markeringen. Dette lader i det væsentlige JSX-parseren vide, at den skal behandle indholdet i disse klammeparenteser som JavaScript.

Trin 3: Tilføjelse af funktionaliteten til tællerapplikationen

Du skal oprette tre knapper for at implementere funktionaliteten af ​​tællerapplikationen: knappen for sænkning, tællerknap og nulstillingsknap. Tilføj følgende kode inde i knapper div:

<Knaptitel={"Nedsættelse"} handling={decrementCount} />
<Knaptitel={"Forøgelse"} handling={incrementCount} />
<Knaptitel={"Nulstil"} handling={resetCount} />

Når du klikker på disse knapper, vises decrementCount, incrementCount, og nulstilTæl funktioner vil køre. Bemærk, at du passerer titel og handling rekvisitter fra forælderen App komponent til barnet Knap komponent.

Opdater disse funktioner i App.js fil med følgende kode:

lade incrementCount = () => {
 setCount (tæller + 1);
};
lade decrementCount = () => {
 setCount (tæller - 1);
};
lade resetCount = () => {
 setCount (0);
}

Det setCount funktionen vil opdatere tilstanden af tælle.

Bemærk, at du ikke har oprettet Button-komponenten endnu. Opret en ny komponenter mappe i src mappe og derefter oprette en ny fil med navnet Button.js. Det er en god praksis at opbevare alle komponenterne i samme mappe.

Tilføj følgende kode i komponenter/Button.js fil:

importere Reagere fra"reagere";
fungereKnap(rekvisitter) {
lade { handling, titel } ​​= rekvisitter;
Vend tilbage<knappåKlik={handling}>{titel}knap>;
}
eksportStandard Knap;

Det Knap komponent modtager data via rekvisitter. Funktionen opdeler derefter disse rekvisitter i separate variabler ved at bruge dem til at udfylde den markup, den returnerer.

Koden genbruger denne komponent tre gange til at oprette knapperne for stigning, sænkning og nulstilling.

Til sidst importerer du knap-komponenten øverst på App.js side ved hjælp af følgende kode:

importere Knap fra"./components/Botton";

Sådan vil den endelige kode se ud i App.js fil:

importere Reager, { useState } fra"reagere";
importere Knap fra"./komponenter/Knap";
fungereApp() {
konst [count, setCount] = useState(0);


lade incrementCount = () => {
 setCount (tæller + 1);
 };


lade decrementCount = () => {
 setCount (tæller - 1);
 };


lade resetCount = () => {
 setCount (0);
 }


Vend tilbage (
<divklassenavn="app">
<s>Antal: {count}s>
<divklassenavn="knapper">
<Knaptitel={"Nedsættelse"} handling={decrementCount} />
<Knaptitel={"Forøgelse"} handling={incrementCount} />
<Knaptitel={"Nulstil"} handling={resetCount} />
div>
div>
 );
}
eksportStandard App;

Følg Best React Practices

Du kan skrive React-kode på forskellige måder, men det er vigtigt at strukturere det så rent som muligt. Dette sikrer, at du nemt kan vedligeholde det og kan hjælpe med at forbedre din applikations overordnede ydeevne.

Du kan følge adskillige React-praksis anbefalet af React-fællesskabet som at undgå gentagen kode, skrivning af tests for hver React-komponent, ved hjælp af objektdestrukturering til rekvisitter og følgende navngivning konventioner.