Przewodnik wprowadzający do React: Zbuduj swój pierwszy interfejs użytkownika od zera

React to biblioteka JavaScript służąca do budowania interfejsów użytkownika. Została opracowana i jest utrzymywana przez Facebooka i stała się jednym z najpopularniejszych narzędzi w tworzeniu front-endu. Ten przewodnik poprowadzi Cię krok po kroku od zera przez podstawowe koncepcje Reacta i pomoże zbudować prosty interfejs użytkownika.

Dlaczego warto wybrać React?

React ma następujące zalety:

• Komponentowość: React dzieli interfejs użytkownika na niezależne, wielokrotnego użytku komponenty. To sprawia, że kod jest łatwiejszy w utrzymaniu i zrozumieniu.
• Deklaratywność: React używa deklaratywnego stylu programowania, co oznacza, że wystarczy opisać, co chcesz wyświetlić, a React automatycznie zajmie się aktualizacjami i renderowaniem.
• Wydajność: React używa wirtualnego DOM i inteligentnego algorytmu diff, aby wydajnie aktualizować interfejs użytkownika, redukując niepotrzebne renderowania.
• Ogromne wsparcie społeczności: React ma ogromną społeczność i bogaty ekosystem, w którym możesz znaleźć mnóstwo samouczków, bibliotek i narzędzi, które pomogą Ci w rozwoju.
• Możliwość działania na wielu platformach: React Native pozwala na używanie Reacta do tworzenia natywnych aplikacji mobilnych (iOS i Android).

Przygotowanie

Zanim zaczniesz, upewnij się, że masz zainstalowane na swoim komputerze następujące narzędzia:

• Node.js: Node.js to środowisko uruchomieniowe JavaScript, używane do uruchamiania narzędzi deweloperskich Reacta. Możesz je pobrać i zainstalować z https://nodejs.org/.
• npm lub yarn: npm (Node Package Manager) i yarn to menedżery pakietów JavaScript, używane do instalowania i zarządzania zależnościami Reacta. Zazwyczaj npm jest instalowany razem z Node.js. Yarn można zainstalować z https://yarnpkg.com/.

Tworzenie Twojej pierwszej aplikacji React

Użyjemy create-react-app, aby szybko utworzyć projekt React.

1. Tworzenie za pomocą npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Tworzenie za pomocą yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Po wykonaniu powyższych poleceń, create-react-app automatycznie utworzy katalog o nazwie my-first-react-app i zainicjuje w nim projekt React. Polecenie npm start lub yarn start uruchomi serwer deweloperski, a Ty możesz zobaczyć swoją aplikację React w przeglądarce, odwiedzając adres http://localhost:3000.

Struktura katalogów

Struktura katalogów projektu utworzonego przez create-react-app jest następująca:

my-first-react-app/
├── node_modules/         # Biblioteki, od których zależy projekt
├── public/               # Zasoby statyczne (np. pliki HTML)
│   ├── index.html        # Plik HTML będący punktem wejścia aplikacji
│   └── ...
├── src/                  # Kod źródłowy React
│   ├── App.css           # Style CSS komponentu App
│   ├── App.js            # Komponent App
│   ├── App.test.js       # Plik testowy komponentu App
│   ├── index.css         # Globalne style CSS
│   ├── index.js          # Plik JavaScript będący punktem wejścia aplikacji
│   ├── logo.svg          # Logo React
│   └── ...
├── .gitignore            # Plik ignorowanych przez Git
├── package.json          # Metadane projektu i zależności
├── README.md             # Dokumentacja projektu
└── yarn.lock             # Plik blokady wersji zależności (jeśli używany jest yarn)

Zrozumienie komponentów React

Aplikacje React składają się z komponentów. Komponenty to niezależne, wielokrotnego użytku bloki kodu, które służą do renderowania określonych części interfejsu użytkownika.

W pliku src/App.js możesz zobaczyć domyślny komponent App:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Wyjaśnienie kodu:

• import React from 'react'; Importuje bibliotekę React.
• function App() { ... } Definiuje komponent funkcyjny o nazwie App.
• return ( ... ) Zwraca wyrażenie JSX, które opisuje, co komponent powinien renderować.
• export default App; Eksportuje komponent App, aby można go było używać w innych plikach.

JSX (JavaScript XML)

JSX to rozszerzenie składni JavaScript, które pozwala pisać kod podobny do HTML w kodzie JavaScript. W powyższym przykładzie ... to wyrażenie JSX. Kod JSX jest tłumaczony przez Babel na standardowy kod JavaScript, aby przeglądarka mogła go zrozumieć.

Modyfikacja komponentu App

Zmodyfikujmy komponent App, aby utworzyć prosty licznik.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Licznik

      Aktualny licznik: {count}

      +
      -
    
  );
}

export default App;

Wyjaśnienie zmian:

• import React, { useState } from 'react'; Importuje Hook useState. useState to React Hook, który służy do dodawania stanu w komponentach funkcyjnych.
• const [count, setCount] = useState(0); Używa Hooka useState do utworzenia zmiennej stanu o nazwie count i inicjalizuje ją wartością 0. setCount to funkcja służąca do aktualizacji stanu count.
• const increment = () => { setCount(count + 1); }; Definiuje funkcję o nazwie increment, która służy do zwiększania stanu count o 1.
• const decrement = () => { setCount(count - 1); }; Definiuje funkcję o nazwie decrement, która służy do zmniejszania stanu count o 1.
• `Aktualny licznik: {count}

Wyświetla wartość stanucountna stronie.{count}` to wyrażenie JSX, które służy do wstawiania zmiennych JavaScript w kodzie JSX.

• + i - Tworzy dwa przyciski, które odpowiednio wiążą funkcje increment i decrement. onClick to obsługa zdarzeń, która służy do wykonywania określonej funkcji po kliknięciu przycisku.

Po zapisaniu pliku src/App.js przeglądarka automatycznie się odświeży i zobaczysz prosty licznik. Kliknięcie przycisku "+" zwiększy licznik, a kliknięcie przycisku "-" zmniejszy licznik.

Używanie stylów CSS

Możesz użyć CSS do upiększenia swojej aplikacji React. create-react-app obsługuje CSS Modules i zwykłe pliki CSS.

Używanie CSS Modules:

CSS Modules pozwalają na tworzenie niezależnych stylów CSS dla każdego komponentu, unikając konfliktów stylów. Aby użyć CSS Modules w komponencie, musisz utworzyć plik z rozszerzeniem .module.css.

Na przykład utwórz plik o nazwie App.module.css i dodaj do niego następujące style CSS:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Następnie zaimportuj CSS Modules w pliku src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importuje CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Użyj obiektu styles, aby odwołać się do klas CSS */}
      

# Licznik

      Aktualny licznik: {count}

      +
      -
    
  );
}

export default App;

Używanie zwykłego pliku CSS:

Możesz również użyć zwykłego pliku CSS do zdefiniowania globalnych stylów. W pliku src/index.css możesz zdefiniować globalne style.

Na przykład, dodaj następujące style CSS:

body {
  font-family: sans-serif;
}

Ten styl zostanie zastosowany do elementu body w całej aplikacji.

Następne kroki

Gratulacje, ukończyłeś swoją pierwszą aplikację React! Następnie możesz dowiedzieć się więcej o React, na przykład:

• Komunikacja między komponentami: Dowiedz się, jak umożliwić komunikację między różnymi komponentami.
• Obsługa formularzy: Dowiedz się, jak tworzyć i obsługiwać formularze.
• Routing: Dowiedz się, jak używać React Router do tworzenia aplikacji wielostronicowych.
• Redux lub Context API: Dowiedz się, jak zarządzać stanem aplikacji.
• Hooks: Dowiedz się więcej o React Hooks, takich jak useEffect, useContext itp.

Pamiętaj, że React to technologia, która wymaga ciągłej praktyki i nauki. Życzę miłej nauki!