Jak vytvořit jednoduchou aplikaci Counter v Reactu

React je jednou z nejpopulárnějších front-end knihoven JavaScriptu. Mnoho společností používá React k vývoji svých uživatelských rozhraní a mezi vývojáři si získal velkou oblibu.

S Reactem je snadné vytvořit jednoduchý program, jako je tato základní počítací aplikace. Začněte s jednoduchým tutoriálem, který vám pomůže pochopit některé základní, ale důležité koncepty Reactu.

Funkce aplikace Counter App

V tomto projektu budete vyvíjet aplikaci čítače s následujícími funkcemi:

1. Tlačítko zvýšení počtu: Tím se počet zvýší o jednu.
2. Tlačítko snížení počtu: Tím se počet sníží o jednu.
3. Tlačítko reset: Tím se počet nastaví na nulu.

Základní pojmy React

Než budete pokračovat, musíte pochopit některé z těchto základních konceptů v Reactu, které budete v tomto projektu používat:

1. Komponenty: Komponenty jsou základními stavebními bloky aplikací React. Obsahují nezávislý, opakovaně použitelný kód. Pomocí komponent můžete uživatelské rozhraní rozdělit na samostatné části. Tyto části pak můžete znovu použít a pracovat s nimi samostatně.
   instagram viewer
2. Stát: V Reactu můžete použít objekt k uložení dat reprezentujících stav komponenty. To umožňuje komponentám spravovat a aktualizovat svá vlastní data. Stav komponenty určuje, jak se vykresluje a chová.
3. Funkční komponenty: Funkční komponenta Reactu je jednoduše funkce JavaScriptu, která přijímá rekvizity jako argument a vrací prvek React (JSX).
4. Rekvizity: Pro předávání dat z nadřazené komponenty do podřízené komponenty můžete použít rekvizity – zkratka pro „vlastnosti“. Rekvizity jsou jednou z nedílných součástí Reactu a vy můžete použijte rekvizity k provedení několika operací v Reactu.
5. Háčky: React Hooks jsou vestavěné funkce které vám umožňují spravovat stav a další funkce Reactu, jako jsou metody životního cyklu uvnitř funkčních komponent. Mohou vám také pomoci napsat stručný a jasný kód. Brzy uvidíte, jak můžete spravovat stav pomocí useState() háček.

Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT.

Krok 1: Nastavení projektu

Otevřete terminál a spusťte následující příkaz, abyste mohli začít:

npx vytvořit-react-app reagovat-counter-app

Tohle bude vytvořit novou aplikaci pro reakce, připravený k tomu, abyste mohli začít budovat svůj projekt. Vygeneruje strukturu souborového systému s několika soubory a složkami.

Spuštěním následujícího příkazu v terminálu spusťte vývojový server:

npm Start

Tento příkaz by měl otevřít novou kartu ve vašem prohlížeči, která ukazuje na http://localhost: 3000. Všechny změny, které v projektu provedete, se zde automaticky aktualizují.

Krok 2: Vytvoření kostry aplikace Counter

Otevři src/App.js soubor a odstraňte veškerý výchozí kód, který se tam nachází. Nyní vytvořte kostru aplikace pomocí následujícího kódu:

import Reagovat, { useState } z"reagovat";
funkceAplikace() {
konst [count, setCount] = useState(0);
nechat incrementCount = () => {
// Přidat později
 };
nechat decrementCount = () => {
// Přidat později
 };
nechat resetCount = () => {
// Přidat později
 }
vrátit se (
<divjméno třídy="aplikace">
<p>Počet: {count}p>
<divjméno třídy="tlačítka">
div>
div>
);
}
vývoznívýchozí Aplikace;

První příkaz importuje useState háček z reagovat modul. Použijte jej k vytvoření počet stav a inicializujte jej na 0. Můžete změnit hodnotu počet za použití setCount funkce.

Budete používat incrementCount, decrementCount, a resetCount funkce později zvýšit, snížit a resetovat hodnotu počítadla.

Můžete si všimnout složených závorek { } použitých kolem proměnné počet v označení. To v podstatě dává analyzátoru JSX vědět, že by měl s obsahem uvnitř těchto složených závorek zacházet jako s JavaScriptem.

Krok 3: Přidání funkce do aplikace čítače

Chcete-li implementovat funkce aplikace počítadla, musíte vytvořit tři tlačítka: tlačítko pro snížení počtu, tlačítko pro zvýšení počtu a tlačítko pro reset. Přidejte následující kód dovnitř tlačítka div:

<Knoflíktitul={"Dekrementovat"} akce={decrementCount} />
<Knoflíktitul={"Přírůstek"} akce={incrementCount} />
<Knoflíktitul={"Resetovat"} akce={resetCount} />

Když klepnete na tato tlačítka, decrementCount, incrementCount, a resetCount funkce poběží. Všimněte si, že procházíte titul a akce rekvizity od rodiče Aplikace komponentu k dítěti Knoflík komponent.

Aktualizujte tyto funkce v App.js soubor s následujícím kódem:

nechat incrementCount = () => {
 setCount (počet + 1);
};
nechat decrementCount = () => {
 setCount (počet - 1);
};
nechat resetCount = () => {
 setCount (0);
}

The setCount funkce aktualizuje stav počet.

Všimněte si, že jste ještě nevytvořili komponentu Button. Vytvoř nový komponenty složku v src adresář a poté vytvořte nový soubor s názvem Button.js. Je dobrým zvykem uchovávat všechny součásti ve stejné složce.

Přidejte následující kód do komponenty/Button.js soubor:

import Reagovat z"reagovat";
funkceKnoflík(rekvizity) {
nechat { akce, nadpis } = rekvizity;
vrátit se<knoflíkpři kliknutí={akce}>{titul}knoflík>;
}
vývoznívýchozí Knoflík;

The Knoflík komponenta přijímá data přes rekvizity. Funkce pak tyto rekvizity rozloží do samostatných proměnných a použije je k naplnění značek, které vrací.

Kód znovu použije tuto komponentu třikrát k vytvoření tlačítek zvýšení, snížení a resetování.

Nakonec importujte komponentu Button v horní části App.js stránku pomocí následujícího kódu:

import Knoflík z"./components/Botton";

Takto bude konečný kód vypadat v App.js soubor:

import Reagovat, { useState } z"reagovat";
import Knoflík z"./components/Button";
funkceAplikace() {
konst [count, setCount] = useState(0);
nechat incrementCount = () => {
 setCount (počet + 1);
 };
nechat decrementCount = () => {
 setCount (počet - 1);
 };
nechat resetCount = () => {
 setCount (0);
 }
vrátit se (
<divjméno třídy="aplikace">
<p>Počet: {count}p>
<divjméno třídy="tlačítka">
<Knoflíktitul={"Dekrementovat"} akce={decrementCount} />
<Knoflíktitul={"Přírůstek"} akce={incrementCount} />
<Knoflíktitul={"Resetovat"} akce={resetCount} />
div>
div>
 );
}
vývoznívýchozí Aplikace;

Postupujte podle doporučených postupů React

Kód React můžete psát různými způsoby, ale je důležité jej strukturovat co nejčistěji. To zajistí, že jej budete snadno udržovat a může pomoci zlepšit celkový výkon vaší aplikace.

Můžete dodržovat několik postupů React doporučených komunitou React, jako je vyhýbání se opakujícímu se kódu, psaní testů pro každou komponentu React, použití destrukcí objektů pro rekvizity a následné pojmenování konvence.