Jak nauczyć się Reacta – dokumentacje React

React to biblioteka JavaScript do tworzenia interfejsów użytkownika, która umożliwia tworzenie dynamicznych i interaktywnych aplikacji internetowych. React opiera się na deklaratywnym podejściu do tworzenia interfejsów, które składają się z komponentów.

Jak nauczyć się Reacta - dokumentacje React

Każdy komponent jest samodzielny i reprezentuje pewien element interfejsu, a komunikacja między nimi odbywa się poprzez przekazywanie danych w postaci właściwości (props) i stanu (state).

React jest stosowany przez wiele firm i organizacji, takich jak Facebook, Instagram, Netflix i wielu innych, ze względu na swoją prostotę, wydajność i skalowalność.

Dokumentacja React – którą wybrać?

Obecnie w powszechnym użyciu znajdują się dwie dokumentacje React:

Co ciekawsze sami twórcy React sugerują jednak, aby nie korzystać z dokumentacji vanila React. Jednogłośnie radzą, aby używać dokumentacji NextJS, czyli frameworka Reacta, który pcha do przodu cały ekosystem.

Dlaczego warto korzystać z dokumentacji React?

Istnieje kilka powodów, dla których warto korzystać z dokumentacji React:

Korzystanie z dokumentacji React jest kluczowe dla skutecznej nauki i wykorzystania tej biblioteki, a także pozwala na uzyskanie najbardziej aktualnych i rzetelnych informacji.

Jakiej wiedzy potrzebujemy, by skorzystać z dokumentacji?

Najważniejszą wiedzą, której potrzebujemy do nauki tej biblioteki, jest znajomość co najmniej podstawowa języka angielskiego, która umożliwia rozumienie dokumentacji, ponieważ zarówno dokumentacje jak i wszelkie zależności (dependencies) do projektów w React.

Aby korzystać z dokumentacji React, warto mieć pewną podstawową wiedzę z zakresu języka JavaScript i HTML oraz CSS. Należy znać podstawowe pojęcia związane z programowaniem obiektowym i rozumieć pojęcia takie jak funkcje, zmienne, obiekty, tablice itp. Warto również mieć podstawową wiedzę na temat architektury aplikacji webowych i protokołu HTTP.

Poza tym warto znać podstawy Reacta, takie jak:

Wszystkie te zagadnienia są opisane w dokumentacji React i warto je poznać, aby skutecznie korzystać z biblioteki i tworzyć zaawansowane aplikacje internetowe.

Jak korzystać z komponentów React

Korzystanie z komponentów z dokumentacji React jest stosunkowo proste. Przykładowo, aby skorzystać z komponentu "Button", należy postępować zgodnie z poniższymi krokami:

  1. Znajdź w dokumentacji opis komponentu "Button".
  2. Przeczytaj dokumentację, aby dowiedzieć się, jakie są wymagane i opcjonalne właściwości (props) komponentu.
  3. Skopiuj kod przykładowy, który pokazuje, jak wykorzystać komponent.
  4. Wklej kod do swojej aplikacji i zmodyfikuj wartości właściwości, jeśli jest to konieczne.

Przykładowo, kod wykorzystujący komponent "Button" mógłby wyglądać następująco:

import React from "react";
import ReactDOM from "react-dom";
import Button from "./Button";

function App() {
    return (
        <div>
            <Button label="Kliknij mnie!" onClick={() => alert("Kliknięto!")} />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

W tym przykładzie, komponent "Button" jest importowany z innego pliku, a następnie wykorzystywany w funkcji "App". Właściwości "label" i "onClick" przekazywane są jako atrybuty elementu "Button". Po kliknięciu na przycisk zostanie wyświetlony alert z wiadomością "Kliknięto!".

Korzystanie z komponentów z dokumentacji React jest stosunkowo proste i pozwala na szybkie tworzenie funkcjonalnych interfejsów użytkownika.

Rodzaje komponentów React

Obecnie dominują dwa rodzaje komponentów:

Komponenty funkcyjne React

Komponenty funkcyjne są najprostszym rodzajem komponentów i są definiowane jako zwykłe funkcje JavaScript. Komponenty funkcyjne w React pozwalają na deklaratywne tworzenie UI, co oznacza, że opisujemy, co chcemy uzyskać, a React zajmuje się renderowaniem komponentów.

Komponent funkcyjny w React składa się z dwóch części:

Obiekt props jest przekazywany do komponentu, a funkcja zwraca elementy JSX, które będą renderowane na stronie.

Oto przykładowy kod komponentu funkcyjnego w React:

import React from "react";

function MyComponent(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>You are {props.age} years old.</p>
        </div>
    );
}

// lub

const MyComponent = ({ age, name }) => (
    <div>
        <h1>Hello, {name}</h1>
        <p>You are {age} years old</p>
    </div>
);

W tym przykładzie, funkcja "MyComponent" jest definiowana jako komponent funkcyjny, który przyjmuje obiekt "props" jako argument. W ciele funkcji, wykorzystywane są wartości propsów do utworzenia elementów JSX.

Komponenty funkcyjne są często wykorzystywane do renderowania małych elementów UI, takich jak przyciski, ikony czy stopki. Jednym z głównych powodów, dla których warto korzystać z komponentów funkcyjnych, jest ich prostota oraz szybkość renderowania.

Komponenty klasowe React

Komponenty klasowe są bardziej zaawansowane niż komponenty funkcyjne i pozwalają na zarządzanie stanem oraz cyklem życia komponentu. Komponenty klasowe są definiowane jako klasy ES6, które dziedziczą z klasy Component dostarczonej przez bibliotekę React.

W komponencie klasowym w React, stan komponentu jest przechowywany w obiekcie state. Stan może być inicjowany w metodzie konstruktora i modyfikowany w czasie rzeczywistym w odpowiedzi na interakcję użytkownika lub działania aplikacji.

Oto przykładowy kod komponentu klasowego w React:

import React, { Component } from "react";

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        };
    }

    handleClick = () => {
        this.setState((prevState) => ({
            count: prevState.count + 1,
        }));
    };

    render() {
        return (
            <div>
                <h1>Count: {this.state.count}</h1>
                <button onClick={this.handleClick}>Add 1</button>
            </div>
        );
    }
}

W tym przykładzie, komponent klasowy MyComponent dziedziczy z klasy Component dostarczonej przez bibliotekę React. Stan komponentu jest przechowywany w obiekcie "state", który jest inicjowany w konstruktorze. Metoda "handleClick" jest wywoływana w momencie kliknięcia przycisku i modyfikuje stan komponentu.

Komponenty klasowe pozwalają na bardziej złożoną logikę biznesową i interaktywność z użytkownikiem, co czyni je idealnym rozwiązaniem do tworzenia bardziej zaawansowanych i skalowalnych aplikacji React.

Jakie są najlepsze praktyki tworzenia i korzystania z komponentów?

Oto kilka najlepszych praktyk dotyczących tworzenia i korzystania z komponentów w React:

  1. Dziel komponenty na mniejsze podkomponenty – dobrym nawykiem jest tworzenie komponentów, które są proste, mają tylko jedną odpowiedzialność i są łatwe do testowania. Jeśli komponent jest zbyt skomplikowany, należy go podzielić na mniejsze podkomponenty, które można użyć w innych częściach aplikacji.
  2. Nazwij swoje komponenty jasno i precyzyjnie – wybierz nazwę, która opisuje dokładnie, co robi Twój komponent. Nazywanie komponentów zbyt ogólnie może prowadzić do pomyłek i trudności w znalezieniu ich później.
  3. Unikaj zmiany stanu poza komponentem – najlepiej, aby wszystkie zmiany stanu były wykonywane wewnątrz komponentu. Unikaj zmieniania stanu w innych miejscach, takich jak funkcje pomocnicze, ponieważ utrudni to śledzenie, co powoduje zmianę stanu.
  4. Używaj props, aby przekazywać dane – props to główny sposób przekazywania danych między komponentami w React. Staraj się przekazywać tylko niezbędne dane, aby uniknąć przeciążenia.
  5. Użyj funkcji strzałkowej do obsługi zdarzeń – funkcje strzałkowe wprowadzone w standardzie ES6 są krótsze i bardziej czytelne niż tradycyjne funkcje JavaScript, a także automatycznie powiązują this z kontekstem.
  6. Używaj komponentów stanowych tylko wtedy, gdy jest to konieczne – jeśli komponent nie wymaga przechowywania stanu, można użyć komponentu funkcyjnego zamiast komponentu stanowego. To zwiększa czytelność i prostotę kodu.
  7. Testuj swoje komponenty – należy testować komponenty, aby upewnić się, że działają poprawnie i zgodnie z oczekiwaniami. Dobrą praktyką jest pisanie testów jednostkowych dla każdego komponentu.
  8. Spójność formatowania i standardów – utrzymanie spójnych standardów stylów i formatowania w kodzie pomaga utrzymać przejrzystość i czytelność. Użyj narzędzi, takich jak ESLint i Prettier, aby automatycznie formatować kod i sprawdzać zgodność z ustalonymi standardami.
  9. Korzystaj z bibliotek – ekosystem Reacta jest bardzo rozbudowana, dlatego też często nie ma powodu tworzyć koła na nowo zgodnie z zasadą Don’t repeat you’re self. Znajdziesz paczki zarówno do stylowania aplikacji jak i np. do wyliczania czasu jaki jest potrzebny do przeczytania artykułu

Czym jest JSX?

JSX (JavaScript XML) to rozszerzenie składni JavaScript, które umożliwia tworzenie struktury elementów interfejsu użytkownika w React za pomocą składni przypominającej HTML lub XML. JSX pozwala na mieszanie kodu JavaScript i HTML w jednym pliku, co ułatwia tworzenie interaktywnych interfejsów użytkownika.

W praktyce, JSX jest zapisywany w plikach .jsx lub .js, ale można go także używać bezpośrednio w kodzie JavaScript. Przykład użycia JSX w React może wyglądać następująco:

function App() {
    return (
        <div>
            <h1>Hello, world!</h1>
            <p>Welcome to my React app.</p>
        </div>
    );
}

W powyższym przykładzie, kod JSX zwraca element , który zawiera elementy i z tekstem. Przy użyciu JSX, można tworzyć dynamiczne elementy interfejsu użytkownika i przekazywać dane do komponentów za pomocą właściwości (props).

Jakie są zalety korzystania z JSX?

JSX ma wiele zalet, ale poniżej wymieniłem najważniejsze z nich:

W sumie, JSX jest bardzo przydatnym narzędziem do tworzenia interfejsów użytkownika w React, które oferuje wiele korzyści, takich jak łatwość użycia, czytelność kodu, łatwość integracji z innymi narzędziami i wydajność działania.

Różnice między HTML a JSX

Składnia

Składnia JSX przypomina składnię HTML, ale ma kilka różnic. Na przykład, w JSX atrybuty zapisuje się z użyciem camelCase zamiast kebab-case, a tagi komponentów muszą być pisane z wielkiej litery.

Zmienne i wyrażenia

JSX pozwala na wstawianie zmiennych i wyrażeń JavaScript bezpośrednio w kodzie, co pozwala na łatwe tworzenie dynamicznych elementów interfejsu użytkownika. W HTML nie ma takiej możliwości, a zmienna musi być wpisana jako atrybut.

Brak atrybutów HTML

Niektóre atrybuty HTML nie działają w JSX, np. "class" zamiast tego używa się "className".

Obsługa zdarzeń

JSX pozwala na obsługę zdarzeń, takich jak kliknięcie, zmiana, itp. bezpośrednio w kodzie, podczas gdy w HTML wymaga to użycia atrybutów on-click, on-change itp.

W skrócie, JSX wygląda podobnie do HTML, ale różni się od niego składnią, umożliwia wstawianie zmiennych i wyrażeń JavaScript, oferuje więcej możliwości obsługi zdarzeń i wymaga pisania atrybutów inaczej niż w HTML.

Props – proste przekazywanie właściwości

Props, czyli properties (własności) to mechanizm przekazywania danych do komponentów w React. Są to argumenty funkcji komponentu, które przekazuje się mu przy jego tworzeniu, lub właściwości obiektu dla komponentu klasowego.

Props umożliwiają przekazanie danych z jednego komponentu do drugiego, aby można było użyć ich w renderowaniu i modyfikowaniu wyglądu i zachowania komponentów.

Wartości props są przekazywane z góry na dół, od komponentu nadrzędnego do podrzędnego. Oznacza to, że komponent nadrzędny może przekazać props do swoich dzieci, ale nie odwrotnie – dziecko nie może przekazać props do rodzica.

Props są zazwyczaj używane do konfiguracji komponentów, ustawiania wartości domyślnych i przekazywania funkcji obsługi zdarzeń. Dzięki props można tworzyć generyczne i wielokrotnego użytku komponenty, ponieważ ich zachowanie może być zmieniane przez wartości props, które są przekazywane do nich przy ich tworzeniu.

Jak przekazywać propsy do komponentów?

Props są przekazywane do komponentów jako atrybuty. Istnieją dwa sposoby przekazywania propsów do komponentów w React – jako atrybuty elementu lub jako obiekt w przypadku komponentów klasowych.

Przekazywanie propsów do komponentów funkcyjnych

function MyComponent(props) {
    return <div>{props.title}</div>;
}

ReactDOM.render(
    <MyComponent title="Hello World" />,
    document.getElementById("root")
);

W powyższym przykładzie komponent MyComponent otrzymuje propsy jako argument funkcji i korzysta z propsa title do wyrenderowania napisu "Hello World". Prop title jest przekazywany do komponentu jako atrybut. Można też dokładniej wyszczególnić jakie właściwości chcemy, a także jakiego mają być typu.

interface iMyComponent {
    title: string;
}

const MyComponent = ({ title }: iMyComponent) => <div>{title}</div>;

ReactDOM.render(
    <MyComponent title="Hello World 2" />,
    document.getElementById("root")
);

Przekazywanie propsów do komponentów klasowych

class MyComponent extends React.Component {
    render() {
        return <div>{this.props.title}</div>;
    }
}

ReactDOM.render(
    <MyComponent title="Hello World" />,
    document.getElementById("root")
);

W przypadku komponentów klasowych, propsy są przekazywane do konstruktora klasy za pomocą obiektu props. Następnie można użyć propsów w metodzie render() w sposób podobny do komponentów funkcyjnych.

Propsy mogą być przekazywane do komponentów jako wartości typu tekstowego, liczbowego, logicznego, funkcji, obiektu itp. Wartości propsów są niezmienne, co oznacza, że ​​nie można ich zmienić wewnątrz komponentu. Komponenty powinny traktować props jako dane wejściowe, które nie ulegają zmianie podczas ich wykonywania.

Najlepsze praktyki korzystania z propsów

  1. Dostosuj props do nazewnictwa komponentów – nazwy propsów powinny być intuicyjne i odzwierciedlać to, co reprezentują.
  2. Upewnij się, że props są zawsze przekazywane z góry na dół – zawsze przekazuj props do komponentów podrzędnych, a nie w drugą stronę. Dzięki temu unikniesz niespójności w stanie aplikacji.
  3. Używaj domyślnych propsów, aby uprościć logikę – wartości domyślne dla propsów mogą uprościć komponent i zwiększyć jego użyteczność.
  4. Unikaj nadmiernego przekazywania propsów – jeśli przekazujesz wiele propsów do komponentu, to oznacza, że jest zbyt skomplikowany i należy go podzielić na mniejsze, bardziej złożone komponenty.
  5. Unikaj mutowania propsów – propsy powinny być traktowane jako dane wejściowe, a nie jako wartości, które można zmieniać wewnątrz komponentu. Zamiast tego należy używać stanu do przechowywania dynamicznych wartości.
  6. Dostosuj props do kontekstu – jeśli dany prop jest używany tylko w jednym komponencie, to nie ma potrzeby przekazywania go do komponentów nadrzędnych.
  7. Użyj destructuring do wyodrębniania wartości props – wyodrębnienie wartości z obiektu props przy użyciu destructuring może ułatwić czytelność kodu i zwiększyć jego czytelność.

Przestrzeganie tych praktyk może pomóc w utrzymaniu kodu React w dobrej formie i zwiększyć jego przejrzystość i czytelność.

Co to jest state?

State (stan) w React to wewnętrzna struktura danych, która jest przechowywana w komponencie i może być modyfikowana w czasie działania aplikacji. Stan reprezentuje dane, które mogą się zmieniać w trakcie interakcji użytkownika z aplikacją lub w wyniku zdarzeń asynchronicznych.

Przykład komponentu funkcyjnego z użyciem useState

import React, { useState } from "react";

const Counter = () => {
    const [count, setCount] = useState(0);

    const { increment, decrement } = {
        increment: () => setCount(count + 1),
        decrement: () => setCount(count - 1),
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
};

Ten komponent reprezentuje prosty licznik, który może być zwiększany lub zmniejszany za pomocą przycisków. Zmienna count przechowuje bieżącą wartość licznika, a funkcje increment i decrement zmieniają tę wartość przy użyciu setCount.

Przykład komponentu klasowego z użyciem state

import React, { Component } from "react";

class Counter extends Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 0,
        };

        this.increment = this.increment.bind(this);
        this.decrement = this.decrement.bind(this);
    }

    increment() {
        this.setState({
            count: this.state.count + 1,
        });
    }

    decrement() {
        this.setState({
            count: this.state.count - 1,
        });
    }

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
                <button onClick={this.decrement}>Decrement</button>
            </div>
        );
    }
}

Ten komponent reprezentuje ten sam licznik co poprzedni przykład, ale został napisany z użyciem klasy komponentu. State przechowywany jest w konstruktorze, a funkcje increment i decrement aktualizują stan za pomocą setState. Funkcje te muszą być związane z this, dlatego muszą być związane z obiektem komponentu w konstruktorze.

Jakie są najlepsze praktyki korzystania ze state?

Oto kilka najlepszych praktyk dotyczących korzystania ze stanu w React:

Unikaj bezpośredniej modyfikacji stanu

React zapewnia specjalną metodę setState() do aktualizacji stanu. Bezpośrednie modyfikowanie stanu, np. poprzez this.state.count = this.state.count + 1, może prowadzić do nieprzewidywalnych błędów w działaniu aplikacji.

Zainicjuj stan w konstruktorze

State powinien być zainicjowany w konstruktorze komponentu, a nie w metodzie render(). Inicjowanie stanu w render() może prowadzić do niepotrzebnego renderowania komponentu.

Używaj callbacków w setState()

setState() może być stosowany asynchroniczne, co oznacza, że stan może nie zostać zaktualizowany natychmiast. Aby upewnić się, że stan został zaktualizowany przed wykonaniem innych działań, warto korzystać z callbacków.

this.setState({ count: this.state.count + 1 }, () => {
    console.log("State updated");
});

Zminimalizuj liczbę stanów w komponencie

Komponent powinien mieć jak najmniej stanów, które są potrzebne do jego działania. Przechowywanie nadmiernych stanów może prowadzić do zwiększonego zapotrzebowania na pamięć i trudności w zarządzaniu kodem.

Przekaż stan jako props, jeśli to konieczne

Jeśli inny komponent potrzebuje dostępu do stanu, warto przekazać go jako props. Umożliwi to korzystanie z tego samego stanu w wielu miejscach i uniknięcie powielania logiki w różnych komponentach.

Korzystaj z niemutowalnych danych

Dane stanu powinny być niemutowalne, czyli nie powinny być bezpośrednio modyfikowane. React oferuje wiele bibliotek do pracy z niemutowalnymi danymi, takich jak Immutable.js lub Immer.

Unikaj nadmiernego renderowania komponentów

React renderuje komponenty, gdy ich stan lub propsy ulegają zmianie. Niektóre zmiany mogą prowadzić do niepotrzebnego renderowania komponentów. W takim przypadku warto skorzystać z optymalizacji wydajności, takich jak shouldComponentUpdate() lub React.memo().

Zdarzenia React

Aby obsłużyć zdarzenia w React, można użyć specjalnych atrybutów, które reprezentują różne zdarzenia, takie jak onClick, onSubmit, onChange, itp. Następnie przypisuje się do nich odpowiednie funkcje obsługi zdarzeń.

Przykładowo, można dodać funkcję obsługi zdarzeń onClick do przycisku, który po kliknięciu wyświetli alert z wiadomością:

import React from "react";

function Button() {
    const handleClick = () => {
        alert("Kliknięto przycisk!");
    };

    return <button onClick={handleClick}>Kliknij mnie</button>;
}

W tym przykładzie definiujemy funkcję handleClick, która wyświetla alert po kliknięciu przycisku. Następnie przypisujemy tę funkcję do atrybutu onClick przycisku.

W przypadku klasowych komponentów, można użyć metody render() do zwrócenia elementu z odpowiednim atrybutem obsługi zdarzeń. Przykład:

import React from "react";

class Button extends React.Component {
    handleClick() {
        alert("Kliknięto przycisk!");
    }

    render() {
        return <button onClick={this.handleClick}>Kliknij mnie</button>;
    }
}

W tym przykładzie definiujemy metodę handleClick, która wyświetla alert po kliknięciu przycisku. Następnie przypisujemy tę metodę do atrybutu onClick przycisku. Warto zauważyć, że w przypadku klasowych komponentów, należy użyć operatora this przed nazwą metody obsługi zdarzeń.

Jakie korzyści niesie ze sobą korzystanie z dokumentacji React?

Korzystanie z dokumentacji React niesie ze sobą wiele korzyści, takich jak:

Wszystkie te korzyści sprawiają, że dokumentacja Reacta jest niezbędna dla każdego programisty, który chce tworzyć aplikacje w React.

Gdzie można znaleźć dodatkowe materiały do nauki Reacta?

Oprócz oficjalnej dokumentacji Reacta, istnieje wiele innych źródeł, które oferują dodatkowe materiały do nauki Reacta.

Poniżej przedstawiam kilka przykładów:

Te źródła mogą pomóc w pogłębianiu wiedzy na temat Reacta i umożliwić zdobycie praktycznych umiejętności potrzebnych do tworzenia aplikacji w React.

Aplikacje React z RadWEB

Podsumowując, dokumentacja React to nieocenione narzędzie w nauce biblioteki React. Jednym ze sposobów, w jaki można poszerzyć swoją wiedzę o React, jest korzystanie z dokumentacji oferowanej przez oficjalną stronę React.

Dzięki tej dokumentacji programiści mogą poznać wiele różnych aspektów React, takich jak komponenty, propsy, state, obsługa zdarzeń i wiele innych.

Jednak, oprócz oficjalnej dokumentacji, istnieją również inne źródła, które mogą pomóc w nauce Reacta. Jednym z nich jest serwis RadWEB, który oferuje wiele różnych materiałów, w tym artykuły, które pomogą w nauce Reacta.

Co więcej, oferujemy również aplikacje napisane w React, które mogą być przykładem najlepszych praktyk w tworzeniu aplikacji React.

Podsumowując, korzystanie z dokumentacji React oraz innych dostępnych źródeł, takich jak serwis RadWEB, jest kluczowe dla każdego, kto chce nauczyć się Reacta i stać się wydajnym programistą tej biblioteki

Radosław Adamczyk - Frontend developer, webmaster, specjalista SEO/SEM

Radosław Adamczyk

Front-end developer, Webmaster, Specjalista SEO/SEM

Śrem, Poznań, Kraków