Samouczek tworzenia aplikacji internetowych przy użyciu React.js

React.js to popularna biblioteka front-endowa służąca do tworzenia interaktywnych interfejsów użytkownika (UI). Stworzona przez Facebooka, React.js jest wykorzystywana przez wiele dużych firm, w tym Instagram, Airbnb i WhatsApp. Jeśli chcesz tworzyć efektywne, szybkie i responsywne aplikacje internetowe, React.js może być dla Ciebie odpowiednim wyborem.

Pendahuluan

Zanim zaczniemy, upewnij się, że na Twoim komputerze są zainstalowane Node.js i npm (Node Package Manager). Node.js i npm są niezbędne, ponieważ zapewniają środowisko i narzędzia potrzebne do tworzenia aplikacji internetowych z wykorzystaniem React.js.

Krok 1: Inicjalizacja projektu React

Aby utworzyć nową aplikację React.js, możemy użyć Create React App, narzędzia do tworzenia aplikacji, które minimalizuje początkową konfigurację. Uruchom następujące polecenie w terminalu lub wierszu poleceń:

„bash”
npx tworzenie-reagowanie-aplikacja moja-aplikacja
cd moja-aplikacja
początek npm
„„

To polecenie utworzy nowy katalog o nazwie `my-app`, pobierze i zainstaluje wszystkie niezbędne zależności oraz uruchomi serwer deweloperski. Możesz teraz otworzyć przeglądarkę i przejść pod adres `http://localhost:3000`, aby zobaczyć domyślną aplikację React.js.

Krok 2: Struktura folderów

Przyjrzyjmy się strukturze folderów utworzonej przez Create React App:

„„
moja-aplikacja/
├── node_modules/
├── publiczny/
│ └── indeks.html
└── źródło/
├── Aplikacja.css
├── Aplikacja.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
„„

– `node_modules/`: Zawiera wszystkie zależności projektu.
– `public/`: Zawiera pliki statyczne, w tym `index.html`, który jest punktem wejścia aplikacji.
– `src/`: Tutaj spędzisz większość czasu. Zawiera komponenty React, pliki CSS i inne zasoby.

Krok 3: Usuwanie niepotrzebnych plików

Zacznijmy od czystej karty, usuwając kilka niepotrzebnych plików. Usuń pliki `logo.svg` i `App.test.js` z folderu `src/`. Następnie otwórz `App.css` i `index.css`, usuwając cały kod CSS, aby zacząć od czystego arkusza stylów.

Krok 4: Tworzenie pierwszego komponentu

React.js opiera się na komponentach. Komponenty to podstawowe elementy aplikacji internetowej. Zmodyfikujmy `App.js`, aby utworzyć nasz pierwszy komponent.

Otwórz `src/App.js` i zastąp go następującym kodem:

„jsx
importuj React z „react”;
importuj './App.css';

funkcja Aplikacja() {
powrót (

);
}

wyeksportuj domyślną aplikację;
„„

Zainicjuj kod React w pliku `App.js` za pomocą JSX (JavaScript XML), co pozwala na pisanie składni podobnej do HTML w JavaScript. Zapisz zmiany i wyświetl wyniki w przeglądarce.

Krok 5: Dodawanie nowych komponentów

Teraz dodajmy nowe komponenty. Utwórz nowy folder o nazwie `components` w folderze `src`. Następnie utwórz nowy plik `HelloWorld.js` w folderze `components`.

„jsx
importuj React z „react”;

funkcja HelloWorld() {
powrót (

);
}

eksportuj domyślne HelloWorld;
„„

Otwórz `App.js` i zaimportuj komponent `HelloWorld`, który właśnie utworzyliśmy:

„jsx
importuj React z „react”;
importuj './App.css';
importuj HelloWorld z './components/HelloWorld';

funkcja Aplikacja() {
powrót (

);
}

wyeksportuj domyślną aplikację;
„„

Teraz `App.js` renderuje komponent `HelloWorld` na stronie głównej.

Krok 6: Dodawanie zarządzania stanem za pomocą useState

React ma bardzo zaawansowane mechanizmy do zarządzania stanem. Dodajmy trochę stanu do naszej aplikacji. Na przykład, dodajmy licznik, który zwiększa wartość po każdym kliknięciu przycisku.

Otwórz `HelloWorld.js` i dodaj stan oraz hak `useState`:

„jsx
importuj React, { useState } z 'react';

funkcja HelloWorld() {
const [liczba, setCount] = useState(0);

const incrementCount = () => {
setCount(liczba + 1);
}

powrót (

);
}

eksportuj domyślne HelloWorld;
„„

Stan `count` jest inicjowany wartością 0 i po każdym kliknięciu przycisku funkcja `incrementCount` zwiększy tę wartość.

Krok 7: Dodawanie stylu

Aby dodać styl, możemy użyć kodu CSS z pliku `App.css` lub biblioteki CSS-in-JS, takiej jak styled-components. Na razie trzymajmy się standardowego CSS.

Otwórz `App.css` i dodaj trochę stylu:

„CSS”
.Aplikacja {
text-align: center;
}

.Nagłówek aplikacji {
kolor tła: 282c34;
wysokość min.: 100vh;
wyświetlacz: flex;
kierunek zgięcia: kolumna;
elementy wyrównujące: środek;
uzasadnić-treść: centrum;
rozmiar czcionki: calc(10px + 2vmin);
kolor biały;
}

przycisk {
padding: 10px 20px;
margin-top: 20px;
rozmiar czcionki: 16px;
}
„„

Krok 8: Dodawanie routingu za pomocą React Router

Aby dodać nawigację między różnymi stronami w naszej aplikacji, możemy użyć React Router. Zainstaluj React Router, uruchamiając następujące polecenie:

„bash”
npm install reagowanie-router-dom
„„

Następnie utwórz dwa nowe komponenty: `Home.js` i `About.js` w folderze `components`.

`Home.js`:
„jsx
importuj React z „react”;

funkcja Home() {
powrót (

);
}

wyeksportuj domyślną stronę główną;
„„

`About.js`:
„jsx
importuj React z „react”;

funkcja Informacje o() {
powrót (

);
}

eksportuj domyślnie Informacje;
„„

Następnie otwórz `App.js` i skonfiguruj routing:

„jsx
importuj React z „react”;
import { BrowserRouter jako router, trasa, łącze, przełącznik } z 'react-router-dom';
importuj './App.css';
importuj HelloWorld z './components/HelloWorld';
zaimportuj stronę główną z „./components/Home”;
importuj Informacje z „./components/Informacje”;

funkcja Aplikacja() {
powrót (

);
}

wyeksportuj domyślną aplikację;
„„

Dzięki temu dodaliśmy podstawową nawigację pomiędzy różnymi stronami naszej aplikacji.

Zamknięcie

To podstawowy samouczek tworzenia aplikacji internetowych z wykorzystaniem React.js. Omówiliśmy konfigurację projektu, tworzenie komponentów, zarządzanie stanem, stylizowanie i routing. React.js oferuje bogaty ekosystem z licznymi bibliotekami i narzędziami, które pomogą Ci tworzyć bardziej złożone aplikacje internetowe.

Powodzenia i mam nadzieję, że ten samouczek pomoże Ci rozpocząć przygodę z React.js!