Autor: Codenga 24.01.2024

React to obecnie jeden z najpopuarniejszych sposóbów na tworzenie dynamicznych interfejsów użytkownika. Ta niesamowicie rozpowszechniona biblioteka, stała się jednym z kluczowych elementów współczesnego ekosystemu JavaScript. W React mamy dwa podstawowe sposoby tworzenia komponentów: funkcyjne oraz klasowe. W tym artykule pokażemy obydwa podejścia, zwracając uwagę na główne różnice. Zakładamy, że masz podstawową wiedzę na temat React i znasz składnię JSX.

Zdobądź umiejętności wymagane do ubiegania się o pracę na stanowisku Junior React Developer.

Dowiedz się więcej

Jak działa komponent funkcyjny

Aplikacje w React budujemy z “klocków” czyli właśnie z komponentów. Zacznijmy od komponentu funkcyjnego. Oto przykładowy kod:

Spójrz, jak taki kod może wyglądać w praktyce:

import React from 'react';
import ReactDOM from 'react-dom/client';
    
function Car() {
    return <span>Function Car: Run 100 km/h!</span>
}
    
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
    

W kodzie mamy do dyspozycji funkcję Car(), która zwraca kod JSX: Function Car: Run 100 km/h!. Sytuacja jest o tyle wygodna, że możesz zamknąć własny kod w obrębie funkcji.

Wydaje się, że funkcja nie powinna być zaskoczeniem. Ciekawszy jest inny fragment kodu. Do funkcji render() przekazany został następujący fragment: <Car />. To jest nasz komponent funkcyjny. Wykonana została konwersja w następujący sposób:

Car() => <Car />

Nie zapominaj o znaku “/”. To jest bardzo istotne. Jego brak spowoduje wygenerowanie błędu.

Zaprezentowany kod wygeneruje następującą odpowiedź:

<div id="root"><span>Function Car: Run 100 km/h!</span></div>

Zwrócony został wynikowy kod HTML, z tekstem zwracanym przez naszą funkcję. Zapamiętaj główną ideę komponentu funkcyjnego - to po komponent zamknięty w funkcji,

Jak działa komponent klasowy

Teraz nauczymy się tworzyć komponenty w postaci klasy. Aby łatwiej zrozumieć materiał, przeanalizujemy sytuację podobną do tej z poprzedniego etapu.

Skupmy się na klasie Car:

import React from 'react';
import ReactDOM from 'react-dom/client';
    
class Car extends React.Component {
    render() {
        return <span>Class Car: Run 100 km/h!</span>
    }
}
    
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />); 

Rezultat działania skryptu jest następujący:

<div id="root"><span>Class Car: Run 100 
km/h!</span></div>

Wyrenderowaniu uległ jedynie kod znajdujący się w funkcji render(). Car jest to komponent klasowy, który musi dziedziczyć po klasie React.Component. W komponencie wymagane jest użycie funkcji render(). Jeżeli nie chcesz narazić się na błędy, to postaraj się zapamiętać te najważniejsze informacje.

Przekazanie komponentu do funkcji root.render() jest identyczne, jak w przypadku komponentu funkcyjnego. Nic tutaj nie ulega zmianie:

root.render(<Car />);

Zdobądź umiejętności wymagane do ubiegania się o pracę na stanowisku Junior React Developer.

Dowiedz się więcej

Który typ komponentu wybrać

Mamy więc dwa podejścia do tworzenia komponentów: funkcyjne oraz klasowe. Teraz pojawia się oczywiste pytanie: który z nich lepiej jest stosować? Generalnie, komponenty funkcyjne są bardziej czytelne i łatwiej się je testuje. Z tego powodu są preferowanym wyborem, zwłaszcza dla nowo tworzonych projektów.

Czasem jednak zdarza się, że będziemy pracowali z kodem starszego projektu, działającego w oparciu o komponenty klasowe. I wtedy nie ma wyjścia: trzeba poznać obydwa podejścia do tworzenia komponentów React.