Hogyan készítsünk egyszerű számlálóalkalmazást a Reactban

A React az egyik legnépszerűbb előtérbeli JavaScript-könyvtár. Sok vállalat használja a Reactot felhasználói felületének fejlesztésére, és ez széles körű népszerűségre tett szert a fejlesztők körében.

A React segítségével könnyű egy egyszerű programot felépíteni, mint ez az alapvető számlálóalkalmazás. Egy egyszerű oktatóanyaggal kezdve megértheti a React néhány alapvető, de fontos fogalmát.

A Counter App jellemzői

Ebben a projektben egy számlálóalkalmazást fog fejleszteni a következő funkciókkal:

1. Számnövelő gomb: Ez eggyel növeli a számot.
2. Számcsökkentés gomb: Ez eggyel csökkenti a számot.
3. Reset gomb: Ezzel nullára állítja a számlálást.

A React alapfogalmai

Mielőtt továbblépne, meg kell értenie néhány alapfogalmat a Reactban, amelyeket ebben a projektben használni fog:

1. Alkatrészek: Az összetevők a React alkalmazások alapvető építőkövei. Független, újrafelhasználható kódot tartalmaznak. Összetevők segítségével a felhasználói felületet külön részekre oszthatja. Ezután újra felhasználhatja ezeket az alkatrészeket, és önállóan dolgozhat velük.
   instagram viewer
2. Állapot: A Reactban egy objektumot használhat az összetevő állapotát reprezentáló adatok tárolására. Ez lehetővé teszi az összetevők számára, hogy kezeljék és frissítsék saját adataikat. Egy komponens állapota határozza meg, hogyan jelenik meg és hogyan viselkedik.
3. Funkcionális komponensek: A React funkcionális összetevője egyszerűen egy JavaScript-függvény, amely argumentumként elfogadja a propokat, és egy React elemet (JSX) ad vissza.
4. Kellékek: Használhat kellékeket – a „tulajdonságok” rövidítése –, hogy adatokat adjon át a szülőkomponensről a gyermekkomponensnek. A kellékek a React egyik szerves részét képezik, és megteheti használjon kellékeket több művelet végrehajtásához a Reactban.
5. Horgok: A React Hook beépített funkciók amelyek lehetővé teszik az állapot- és egyéb React-szolgáltatások, például a funkcionális komponenseken belüli életciklus-módszerek kezelését. Segítenek abban is, hogy tömör és világos kódot írjon. Hamarosan látni fogja, hogyan kezelheti az állapotot a useState() horog.

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható.

1. lépés: A projekt beállítása

A kezdéshez nyissa meg a terminált, és futtassa a következő parancsot:

npx teremt-react-app react-counter-app

Ez lesz hozzon létre egy új reagáló alkalmazást, készen áll arra, hogy megkezdhesse projektjének felépítését. Több fájlból és mappából álló fájlrendszer-struktúrát hoz létre.

Futtassa a következő parancsot a terminálban a fejlesztői kiszolgáló elindításához:

npm Rajt

Ennek a parancsnak meg kell nyitnia egy új lapot a böngészőben, amelyre mutat http://localhost: 3000. A projekten végrehajtott összes módosítás itt automatikusan frissül.

2. lépés: A számlálóalkalmazás csontvázának létrehozása

Nyissa meg a src/App.js fájlt, és törölje az összes ott található alapértelmezett kódot. Most hozza létre az alkalmazás vázát a következő kóddal:

import React, { useState } tól től"reagál";
funkcióApp() {
const [count, setCount] = useState(0);
hagyja incrementCount = () => {
// Hozzáadás később
 };
hagyja decrementCount = () => {
// Hozzáadás később
 };
hagyja resetCount = () => {
// Hozzáadás később
 }
Visszatérés (
<divosztály név="alkalmazás">
<p>Szám: {count}p>
<divosztály név="gombok">
div>
div>
);
}
exportalapértelmezett App;

Az első utasítás importálja a useState horog a reagál modul. Használja a létrehozásához számol állapotba, és inicializálja 0-ra. Módosíthatja az értékét számol használni a setCount funkció.

Használni fogod a incrementCount, decrementCount, és resetCount funkció később növeli, csökkenti és visszaállítja a számláló értékét.

Észreveheti a zárójeleket { }, amelyeket a count változó körül használnak a jelölésben. Ez lényegében tudatja a JSX elemzővel, hogy a zárójelben lévő tartalmat JavaScriptként kell kezelnie.

3. lépés: A funkcionalitás hozzáadása a számlálóalkalmazáshoz

Három gombot kell létrehoznia a számlálóalkalmazás funkcióinak megvalósításához: a számláló csökkentése, a számlálás növelése és a visszaállítás gomb. Adja hozzá a következő kódot a gombokat div:

<Gombcím={"Csökkenés"} akció={decrementCount} />
<Gombcím={"Növekedés"} akció={incrementCount} />
<Gombcím={"Visszaállítás"} akció={resetCount} />

Amikor ezekre a gombokra kattint, a decrementCount, incrementCount, és resetCount funkciók futni fognak. Vegye figyelembe, hogy áthalad a cím és akció kellékek a szülőtől App összetevője a gyermeknek Gomb összetevő.

Frissítse ezeket a funkciókat a App.js fájl a következő kóddal:

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

A setCount funkció frissíti a számol.

Vegye figyelembe, hogy még nem hozta létre a Gomb összetevőt. Újat csinálni alkatrészek mappában a src könyvtárba, majd hozzon létre egy új nevű fájlt Button.js. Jó gyakorlat az összes összetevőt ugyanabban a mappában tartani.

Adja hozzá a következő kódot a összetevők/Button.js fájl:

import Reagál tól től"reagál";
funkcióGomb(kellékek) {
hagyja { művelet, cím } = kellékek;
Visszatérés<gombkattintásra={akció}>{cím}gomb>;
}
exportalapértelmezett Gomb;

A Gomb komponens a kellékeken keresztül fogad adatokat. A függvény ezután ezeket a kellékeket külön változókká dsestrukturálja, és ezek segítségével tölti fel a visszaadott jelölést.

A kód háromszor újra felhasználja ezt az összetevőt a növelés, a csökkentés és a visszaállítás gombok létrehozásához.

Végül importálja a gomb komponenst a tetején App.js oldal a következő kóddal:

import Gomb tól től"./components/Botton";

Így fog kinézni a végső kód a App.js fájl:

import React, { useState } tól től"reagál";
import Gomb tól től"./components/Button";
funkcióApp() {
const [count, setCount] = useState(0);
hagyja incrementCount = () => {
 setCount (count + 1);
 };
hagyja decrementCount = () => {
 setCount (count - 1);
 };
hagyja resetCount = () => {
 setCount (0);
 }
Visszatérés (
<divosztály név="alkalmazás">
<p>Szám: {count}p>
<divosztály név="gombok">
<Gombcím={"Csökkenés"} akció={decrementCount} />
<Gombcím={"Növekedés"} akció={incrementCount} />
<Gombcím={"Visszaállítás"} akció={resetCount} />
div>
div>
 );
}
exportalapértelmezett App;

Kövesse a legjobb reagálási gyakorlatokat

A React kódot különböző módokon írhatja, de fontos, hogy a lehető legtisztábban strukturálja azt. Ez biztosítja, hogy könnyen karbantartható, és javítható az alkalmazás általános teljesítménye.

Számos, a React közösség által javasolt React gyakorlatot követhet, például elkerülheti az ismétlődő kódokat, tesztek írása minden egyes React komponenshez, objektum-destrukció használatával a kellékekhez, és ezt követően elnevezést egyezmények.