Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

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:

  1. Przycisk zwiększania liczby: Spowoduje to zwiększenie liczby o jeden.
  2. Przycisk zmniejszania liczby: Spowoduje to zmniejszenie licznika o jeden.
  3. Przycisk reset: 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:

  1. składniki
    instagram viewer
    : 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.
  2. Państwo: 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.
  3. Komponenty funkcjonalne: Funkcjonalny komponent Reacta to po prostu funkcja JavaScript, która przyjmuje rekwizyty jako argument i zwraca element React (JSX).
  4. Rekwizyty: Możesz użyć rekwizytów — skrótu od „właściwości” — do przekazywania danych z komponentu nadrzędnego do komponentu podrzędnego. Rekwizyty są jedną z integralnych części React i możesz użyj rekwizytów, aby wykonać kilka operacji w React.
  5. Haki: React Hooks 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ą useState() hak.

Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHub i jest darmowy do użytku na licencji MIT.

Krok 1: Konfigurowanie projektu

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

npx tworzyć-reaguj-aplikacja-reaguj-przeciw-aplikacja

to będzie utwórz nową aplikację reagującą, gotowy 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 deweloperski:

np początek

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

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

import Reaguj, { stan użycia } z"reagować";
funkcjonowaćAplikacja() {
konst [liczba, ustawLiczba] = użyjStan(0);
pozwalać liczba przyrostów = () => {
// Aby dodać później
 };
pozwalać dekrementacja = () => {
// Aby dodać później
 };
pozwalać zresetuj liczbę = () => {
// Aby dodać później
 }


powrót (
<dzNazwa klasy=„aplikacja”>
<P>Policz: {liczba}P>
<dzNazwa klasy="guziki">
dz>
dz>
);
}
eksportdomyślny Aplikacja;

Pierwsza instrukcja importuje plik stan użycia hak od reagować moduł. Użyj go do stworzenia liczyć stan i zainicjuj go na 0. Możesz zmienić wartość liczyć używając liczba ustaw funkcjonować.

Użyjesz liczba przyrostów, liczba dekrementacji, I zresetuj liczbę funkcje później zwiększają, zmniejszają i resetują 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 pliku guziki dzielnik:

<Przycisktytuł={"Zmniejszenie"} działanie={decrementCount} />
<Przycisktytuł={"Przyrost"} działanie={incrementCount} />
<Przycisktytuł={"Resetowanie"} działanie={resetCount} />

Po kliknięciu tych przycisków, liczba dekrementacji, liczba przyrostów, I zresetuj liczbę funkcje będą działać. Zauważ, że przekazujesz tytuł I działanie rekwizyty od rodzica Aplikacja element dziecku Przycisk część.

Zaktualizuj te funkcje w pliku Aplikacja.js plik z następującym kodem:

pozwalać liczba przyrostów = () => {
 setCount (liczba + 1);
};
pozwalać dekrementacja = () => {
 setCount (liczba - 1);
};
pozwalać zresetuj liczbę = () => {
 setCount (0);
}

The liczba ustaw funkcja zaktualizuje stan pliku liczyć.

Pamiętaj, że nie utworzyłeś jeszcze komponentu Button. Stwórz nowy składniki folder w źródło katalog, a następnie utwórz nowy plik o nazwie Przycisk.js. Dobrą praktyką jest przechowywanie wszystkich komponentów w tym samym folderze.

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

import Reagować z"reagować";
funkcjonowaćPrzycisk(rekwizyty) {
pozwalać { akcja, tytuł } = rekwizyty;
powrót<przyciskna kliknięcie={działanie}>{tytuł}przycisk>;
}
eksportdomyślny Przycisk;

The Przycisk komponent odbiera dane przez rekwizyty. 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 na górze pliku Aplikacja.js stronę używając następującego kodu:

import Przycisk z„./komponenty/dół”;

Tak będzie wyglądał ostateczny kod w Aplikacja.js plik:

import Reaguj, { stan użycia } z"reagować";
import Przycisk z„./komponenty/przycisk”;
funkcjonowaćAplikacja() {
konst [liczba, ustawLiczba] = użyjStan(0);


pozwalać liczba przyrostów = () => {
 setCount (liczba + 1);
 };


pozwalać dekrementacja = () => {
 setCount (liczba - 1);
 };


pozwalać zresetuj liczbę = () => {
 setCount (0);
 }


powrót (
<dzNazwa klasy=„aplikacja”>
<P>Policz: {liczba}P>
<dzNazwa klasy="guziki">
<Przycisktytuł={"Zmniejszenie"} działanie={decrementCount} />
<Przycisktytuł={"Przyrost"} działanie={incrementCount} />
<Przycisktytuł={"Resetowanie"} działanie={resetCount} />
dz>
dz>
 );
}
eksportdomyślny Aplikacja;

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 powtarzalnego kodu, pisanie testów dla każdego komponentu React, używanie destrukturyzacji obiektów dla rekwizytów i podążanie za nazewnictwem konwencje.