Hur man bygger en enkel räknarapp i React

React är ett av de mest populära front-end JavaScript-biblioteken. Många företag använder React för att utveckla sina användargränssnitt och det har vunnit stor popularitet bland utvecklare.

Det är lätt att bygga ett enkelt program med React, som den här grundläggande räknarappen. Att börja med en enkel handledning hjälper dig att förstå några av Reacts grundläggande men viktiga koncept.

Funktioner i Counter-appen

I det här projektet kommer du att utveckla en motapplikation med följande funktioner:

1. Öka räkneknappen: Detta kommer att öka antalet med en.
2. Minska räkneknappen: Detta kommer att minska antalet med en.
3. Återställningsknapp: Detta kommer att nollställa antalet.

Grundläggande begrepp för React

Innan du går vidare måste du förstå några av dessa grundläggande begrepp i React som du kommer att använda i det här projektet:

1. Komponenter: Komponenter är de centrala byggstenarna i React-applikationer. De innehåller oberoende, återanvändbar kod. Med hjälp av komponenter kan du dela upp användargränssnittet i separata delar. Du kan sedan återanvända delarna och arbeta med dem självständigt.
   instagram viewer
2. stat: I React kan du använda ett objekt för att lagra data som representerar tillståndet för en komponent. Detta gör att komponenter kan hantera och uppdatera sina egna data. En komponents tillstånd avgör hur den återges och beter sig.
3. Funktionella komponenter: Reacts funktionella komponent är helt enkelt en JavaScript-funktion som accepterar rekvisita som ett argument och returnerar ett React-element (JSX).
4. Rekvisita: Du kan använda rekvisita – förkortning för "egenskaper" – för att överföra data från en överordnad komponent till en underordnad komponent. Rekvisita är en av de integrerade delarna av React och du kan använd rekvisita för att utföra flera operationer i React.
5. Krokar: React Hooks är inbyggda funktioner som låter dig hantera tillstånd och andra React-funktioner som livscykelmetoder inuti funktionella komponenter. De kan också hjälpa dig att skriva kortfattad och tydlig kod. Du kommer snart att se hur du kan hantera staten med useState() krok.

Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen.

Steg 1: Konfigurera projektet

Öppna din terminal och kör följande kommando för att komma igång:

npx skapa-react-app react-counter-app

Det här kommer att skapa en ny React-app, redo för dig att börja bygga ditt projekt med. Det kommer att generera en filsystemstruktur med flera filer och mappar.

Kör följande kommando i terminalen för att starta utvecklingsservern:

npm Start

Det kommandot bör öppna en ny flik i din webbläsare och peka på http://localhost: 3000. Alla ändringar som du gör i projektet kommer att uppdateras automatiskt här.

Steg 2: Skapa skelettet för räkneapplikationen

Öppna src/App.js fil och radera all standardkod som finns där. Skapa nu ett skelett av applikationen med följande kod:

importera Reagera, { useState } från"reagera";
fungeraApp() {
konst [count, setCount] = useState(0);
låta incrementCount = () => {
// För att lägga till senare
 };
låta decrementCount = () => {
// För att lägga till senare
 };
låta resetCount = () => {
// För att lägga till senare
 }
lämna tillbaka (
<divklassnamn="app">
<sid>Antal: {count}sid>
<divklassnamn="knappar">
div>
div>
);
}
exporterastandard App;

Det första uttalandet importerar useState krok från reagera modul. Använd den för att skapa räkna tillstånd och initialisera det till 0. Du kan ändra värdet på räkna använda setCount fungera.

Du kommer att använda inkrementCount, decrementCount, och resetCount fungerar senare för att öka, minska och återställa värdet på räknaren.

Du kanske märker de krulliga parenteserna { } som används runt räkningsvariabeln i markeringen. Detta låter i huvudsak JSX-parsern veta att den ska behandla innehållet i dessa hängslen som JavaScript.

Steg 3: Lägga till funktionaliteten i räkneapplikationen

Du måste skapa tre knappar för att implementera funktionaliteten i räknarapplikationen: knappen för att minska räknaren, knappen för att öka räkna och återställa knappen. Lägg till följande kod inuti knappar div:

<Knapptitel={"Minskning"} handling={decrementCount} />
<Knapptitel={"Ökning"} handling={incrementCount} />
<Knapptitel={"Återställa"} handling={resetCount} />

När du klickar på dessa knappar visas decrementCount, inkrementCount, och resetCount funktioner kommer att köras. Observera att du passerar titel och handling rekvisita från föräldern App komponent till barnet Knapp komponent.

Uppdatera dessa funktioner i App.js fil med följande kod:

låta incrementCount = () => {
 setCount (count + 1);
};
låta decrementCount = () => {
 setCount (antal - 1);
};
låta resetCount = () => {
 setCount (0);
}

De setCount funktionen kommer att uppdatera tillståndet för räkna.

Observera att du inte har skapat Button-komponenten ännu. Skapa en ny komponenter mapp i src katalog och skapa sedan en ny fil med namnet Button.js. Det är bra att ha alla komponenter i samma mapp.

Lägg till följande kod i komponenter/Button.js fil:

importera Reagera från"reagera";
fungeraKnapp(rekvisita) {
låta { action, title } = rekvisita;
lämna tillbaka<knapppåKlicka={handling}>{titel}knapp>;
}
exporterastandard Knapp;

De Knapp komponent tar emot data via rekvisita. Funktionen strukturerar sedan dessa rekvisita till separata variabler, och använder dem för att fylla i markeringen den returnerar.

Koden återanvänder den här komponenten tre gånger för att skapa knapparna för ökning, minskning och återställning.

Importera slutligen knappkomponenten högst upp på App.js sida med följande kod:

importera Knapp från"./components/Botton";

Så här kommer den slutliga koden att se ut i App.js fil:

importera Reagera, { useState } från"reagera";
importera Knapp från"./components/Button";
fungeraApp() {
konst [count, setCount] = useState(0);
låta incrementCount = () => {
 setCount (count + 1);
 };
låta decrementCount = () => {
 setCount (antal - 1);
 };
låta resetCount = () => {
 setCount (0);
 }
lämna tillbaka (
<divklassnamn="app">
<sid>Antal: {count}sid>
<divklassnamn="knappar">
<Knapptitel={"Minskning"} handling={decrementCount} />
<Knapptitel={"Ökning"} handling={incrementCount} />
<Knapptitel={"Återställa"} handling={resetCount} />
div>
div>
 );
}
exporterastandard App;

Följ Best React Practices

Du kan skriva React-kod på olika sätt, men det är viktigt att strukturera den så rent som möjligt. Detta säkerställer att du enkelt kan underhålla det och kan bidra till att förbättra den övergripande prestandan för din applikation.

Du kan följa flera React-praxis som rekommenderas av React-communityt som att undvika upprepad kod, skriva tester för varje React-komponent, använda objektdestrukturering för rekvisita och följande namngivning konventioner.