Podstawy pracy z komponentami w React

React to biblioteka JavaScript przeznaczona do tworzenia nowoczesnych aplikacji internetowych. Jej podstawową jednostką budulcową są komponenty. Zrozumienie ich działania jest niezbędne dla każdego, kto chce efektywnie pracować z React.

Co to są komponenty w React?

Komponenty to samodzielne części interfejsu użytkownika, które można wielokrotnie wykorzystywać w aplikacji. Można je traktować jako elementy budulcowe, z których składa się cała aplikacja internetowa.

Jakie mają komponenty praktyczne znaczenie?

Wykorzystanie komponentów pozwala na:

• Wielokrotność kodu – Komponenty można używać w różnych miejscach w aplikacji.
• Modularność – Kod jest przejrzysty i zorganizowany.
• Łatwiejsze utrzymanie – Zmiany w jednym komponencie są automatycznie uwzględniane wszędzie, gdzie jest on używany.

1. Typy komponentów w React

W React istnieją dwa podstawowe typy komponentów:

1.1. Komponenty funkcyjne

Komponenty funkcyjne są prostsze i powszechnie stosowane w nowoczesnych aplikacjach React. Definiuje się je jako funkcje JavaScript.

function Pozdrowienie() {
    return <h1>Witaj, świecie!</h1>;
}

Właściwości komponentów funkcyjnych:

• Proste i łatwe do odczytania.
• Wykorzystują Hooki React do zarządzania stanem.
• Preferowane w większości nowych projektów.

1.2. Komponenty klasowe

Komponenty klasowe to starsza forma pisania komponentów. Używano ich przed wprowadzeniem Hooków React.

class Pozdrowienie extends React.Component {
    render() {
        return <h1>Witaj, świecie!</h1>;
    }
}

Właściwości komponentów klasowych:

• Używane rzadziej, ale wciąż spotykane w starszym kodzie.
• Wspierają zarządzanie stanem za pomocą this.state.

2. Praca z właściwościami (props)

Props (właściwości) to dane, które są przekazywane do komponentów. Dzięki nim możemy dynamicznie zmieniać zawartość komponentów.

Przykład użycia props:

function Pozdrowienie(props) {
    return <h1>Witaj, {props.imie}!</h1>;
}

export default function App() {
    return <Pozdrowienie imie="Piotr" />;
}

3. Zarządzanie stanem w komponentach

Oprócz właściwości props, w React możemy używać również stanu do przechowywania i aktualizowania danych w obrębie komponentu.

Zarządzanie stanem za pomocą hooka useState:

import { useState } from "react";

function Licznik() {
    const [liczba, setLiczba] = useState(0);

    return (
        <div>
            <p>Liczba kliknięć: {liczba}</p>
            <button onClick={() => setLiczba(liczba + 1)}>Kliknij</button>
        </div>
    );
}

4. Cykl życia komponentów

Każdy komponent React przechodzi przez określone fazy, takie jak tworzenie, aktualizacja i usuwanie.

Najczęściej używane metody cyklu życia:

• componentDidMount – Wywoływana po pierwszym renderowaniu komponentu.
• componentDidUpdate – Uruchamiana po aktualizacji komponentu.
• componentWillUnmount – Wywoływana przed usunięciem komponentu.

W nowoczesnych aplikacjach zamiast tych metod często używa się hooka useEffect.

import { useEffect } from "react";

function Komponent() {
    useEffect(() => {
        console.log("Komponent został stworzony!");
        return () => console.log("Komponent został usunięty!");
    }, []);

    return <p>Komponent React</p>;
}

Najczęściej zadawane pytania

1. Jaka jest różnica między props a state?

Props są przekazywane do komponentów i są niemutowalne. State zmienia się wewnątrz komponentu.

2. Kiedy używać komponentów klasowych?

Obecnie najczęściej używane są komponenty funkcyjne. Komponenty klasowe sprawdzają się w pracy ze starszym kodem.

3. Jak efektywnie zarządzać stanem w bardziej złożonych aplikacjach?

W przypadku większych projektów zaleca się używanie narzędzi do zarządzania stanem, takich jak Redux.

Chcesz nauczyć się programować?

Jeśli jesteś zainteresowany szkoleniem programowania stacjonarnie lub online, zapoznaj się z naszą ofertą na www.like-it.sk. Nasze kursy prowadzą doświadczeni specjaliści, którzy pomogą Ci opanować podstawy i zaawansowane techniki programowania.

Marián Knězek