Jak zbudować prostą aplikację licznika w React

2022/12/24

React to jedna z najpopularniejszych bibliotek JavaScript typu front-end. Wiele firm używa React do tworzenia swoich interfejsów użytkownika i zyskało dużą popularność wśród programistów.

Z React łatwo jest zbudować prosty program, taki jak ta podstawowa aplikacja licznika. Rozpoczęcie od prostego samouczka pomoże ci zrozumieć niektóre podstawowe, ale ważne koncepcje Reacta.

Funkcje aplikacji Licznik

W tym projekcie masz zamiar opracować aplikację licznika z następującymi funkcjami:

Przycisk zwiększania liczby: Spowoduje to zwiększenie liczby o jeden.
Przycisk zmniejszania liczby: Spowoduje to zmniejszenie liczby o jeden.
Przycisk resetowania : Spowoduje to ustawienie licznika na zero.

Podstawowe koncepcje React

Zanim przejdziesz dalej, musisz zrozumieć niektóre z tych podstawowych pojęć w React, których będziesz używać w tym projekcie:

Komponenty : Komponenty to podstawowe elementy składowe aplikacji React. Zawierają niezależny kod wielokrotnego użytku. Za pomocą komponentów możesz podzielić interfejs użytkownika na osobne części. Następnie możesz ponownie użyć tych części i pracować z nimi niezależnie.
State : W React możesz użyć obiektu do przechowywania danych reprezentujących stan komponentu. Dzięki temu komponenty mogą zarządzać własnymi danymi i aktualizować je. Stan komponentu określa sposób jego renderowania i zachowania.
Komponenty funkcjonalne : Komponent funkcjonalny Reacta to po prostu funkcja JavaScript, która przyjmuje właściwości jako argument i zwraca element React (JSX).
Rekwizyty : Możesz użyć rekwizytów — skrótu od „właściwości” — do przekazywania danych z komponentu nadrzędnego do komponentu potomnego. Rekwizyty są jedną z integralnych części Reacta i możesz ich używać do wykonywania kilku operacji w React.
Hooki : Hooki React to wbudowane funkcje, które pozwalają zarządzać stanem i innymi funkcjami React, takimi jak metody cyklu życia wewnątrz komponentów funkcjonalnych. Mogą również pomóc w pisaniu zwięzłego i przejrzystego kodu. Wkrótce zobaczysz, jak możesz zarządzać stanem za pomocą haka useState() .

Krok 1: Konfigurowanie projektu

Otwórz terminal i uruchom następujące polecenie, aby rozpocząć:

npx create-react-app react-counter-app

Spowoduje to utworzenie nowej aplikacji reagującej, gotowej do rozpoczęcia tworzenia projektu. Wygeneruje strukturę systemu plików z kilkoma plikami i folderami.

Uruchom następującą komendę w terminalu, aby uruchomić serwer programistyczny:

npm start

To polecenie powinno otworzyć nową kartę w przeglądarce, wskazującą na http://localhost:3000. Wszystkie zmiany, które wprowadzisz w projekcie, zostaną tutaj automatycznie zaktualizowane.

Krok 2: Tworzenie szkieletu aplikacji licznika

Otwórz plik src/App.js i usuń cały domyślny kod, który się tam znajduje. Teraz utwórz szkielet aplikacji, używając następującego kodu:

import React, { useState } from "react";

function App() { const [count, setCount] = useState(0); let incrementCount = () => { // To add later }; let decrementCount = () => { // To add later }; let resetCount = () => { // To add later }


return (
  <div className="app">
    <p>Count: {count}</p>
    <div className="buttons">
    </div>
  </div>
);
}

export default App;

Pierwsza instrukcja importuje hak useState z modułu React . Użyj go, aby utworzyć stan licznika i zainicjuj go na 0. Możesz zmienić wartość licznika za pomocą funkcji setCount .

Później użyjesz funkcji incrementCount , decrementCount i resetCount , aby zwiększyć, zmniejszyć i zresetować wartość licznika.

Możesz zauważyć nawiasy klamrowe { } użyte wokół zmiennej count w znacznikach. Zasadniczo pozwala to parserowi JSX wiedzieć, że powinien traktować zawartość wewnątrz tych nawiasów klamrowych jako JavaScript.

Krok 3: Dodanie Funkcjonalności do Aplikacji Licznika

Musisz utworzyć trzy przyciski, aby zaimplementować funkcjonalność aplikacji licznika: przycisk zmniejszania licznika, przycisk zwiększania licznika i przycisk resetowania. Dodaj następujący kod wewnątrz div przycisków :

<Button title={"Decrement"} action={decrementCount} /> <Button title={"Increment"} action={incrementCount} /> <Button title={"Reset"} action={resetCount} />

Po kliknięciu tych przycisków zostaną uruchomione funkcje decrementCount , incrementCount i resetCount . Pamiętaj, że przekazujesz tytuł i rekwizyty akcji z nadrzędnego komponentu App do podrzędnego komponentu Button .

Zaktualizuj te funkcje w pliku App.js za pomocą następującego kodu:

let incrementCount = () => { setCount(count + 1); };

let decrementCount = () => { setCount(count - 1); };

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

Funkcja setCount zaktualizuje stan licznika .

Pamiętaj, że nie utworzyłeś jeszcze komponentu Button. Utwórz nowy folder komponentów w katalogu src , a następnie utwórz nowy plik o nazwie Button.js . Dobrą praktyką jest przechowywanie wszystkich komponentów w tym samym folderze.

Dodaj następujący kod w pliku components/Button.js :

import React from "react";

function Button(props) { let { action, title } = props; return <button onClick={action}>{title}</button>; }

export default Button;

Komponent Button odbiera dane za pośrednictwem rekwizytów. Następnie funkcja dsettructures te rekwizyty w osobne zmienne, używając ich do wypełnienia zwróconych znaczników.

Kod ponownie używa tego komponentu trzy razy, aby utworzyć przyciski zwiększania, zmniejszania i resetowania.

Na koniec zaimportuj komponent Button u góry strony App.js , używając następującego kodu:

import Button from "./components/Botton";

Tak będzie wyglądał końcowy kod w pliku App.js :

import React, { useState } from "react"; import Button from "./components/Button";

function App() { const [count, setCount] = useState(0);


  let incrementCount = () => {
    setCount(count + 1);
  };
  let decrementCount = () => {
    setCount(count - 1);
  };
  let resetCount = () => {
    setCount(0);
  }
  return (
    <div className="app">
        <p>Count: {count}</p>
        <div className="buttons">
          <Button title={"Decrement"} action={decrementCount} />
          <Button title={"Increment"} action={incrementCount} />
          <Button title={"Reset"} action={resetCount} />
        </div>
      </div>
  );
}

export default App;

Postępuj zgodnie z najlepszymi praktykami reagowania

Możesz pisać kod w React na różne sposoby, ale ważne jest, aby mieć jak najczystszą strukturę. Zapewni to łatwą konserwację i pomoże poprawić ogólną wydajność aplikacji.

Możesz zastosować kilka praktyk React zalecanych przez społeczność React, takich jak unikanie powtarzającego się kodu, pisanie testów dla każdego komponentu React, używanie destrukturyzacji obiektów dla rekwizytów i przestrzeganie konwencji nazewnictwa.