React.js, czyli jak pracować z popularną biblioteką JavaScript?

Ewa Klimowicz

3 listopada, 2023

6 min

• Specjalizacja
• JavaScript

Ostatnia aktualizacja 3 listopada, 2023

React.js to dynamiczna biblioteka JavaScript, która zrewolucjonizowała sposób tworzenia interfejsów użytkownika, szczególnie w aplikacjach SPA. Jej twórcą jest Jordan Walke, programista Facebooka, który inspirację czerpał z XHP, jednego z rozszerzeń języka PHP. Jest ona wyborem wielu programistów ze względu na swoją elastyczność oraz komponentowy charakter. W niniejszym tekście przybliżymy podstawy pracy w tym środowisku.

Pierwsze kroki w React.js

Aby rozpocząć, musisz zainstalować Node.js i npm (Node Package Manager). Następnie za pomocą linii komend, możesz utworzyć nowy projekt React za pomocą create-react-app, to oficjalne środowisko startowe dla Reacta:

npx create-react-app moja-aplikacja
cd moja-aplikacja
npm start

Po wykonaniu tych komend twoja nowa aplikacja React będzie dostępna w przeglądarce.

Na czym polega JSX?

JSX to składnia przypominająca HTML, która pozwala tworzyć struktury komponentów w zrozumiały i czytelny sposób. Przykładem może być prosty komponent:

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

W podanym fragmencie kodu definiujemy funkcję Powitanie, która jest komponentem React. Komponent ten przyjmuje argument props, który jest standardowym sposobem przekazywania danych do komponentów w React.

1. Definicja funkcji komponentu: function Powitanie(props) definiuje nowy komponent o nazwie Powitanie. Nazwa komponentu zaczyna się z wielkiej litery, aby React mógł odróżnić komponenty od zwykłych elementów HTML.
2. Argument props: props to obiekt zawierający wszystkie właściwości (czyli “propsy”), które zostały przekazane do komponentu. Właściwości te można przekazać do komponentu Powitanie podczas jego wywoływania, podobnie jak przekazuje się atrybuty do elementów HTML.
3. Zwracanie JSX: W ciele funkcji, return <h1>Witaj, {props.imie}!</h1>; zwraca JSX, który określa, co ma być wyrenderowane przez komponent. JSX jest rozszerzeniem składni JavaScript, które pozwala pisać struktury podobne do HTML wewnątrz kodu JavaScript.
4. Interpolacja props.imie: {props.imie} to wyrażenie JavaScript osadzone w JSX, które pozwala na wstawienie wartości konkretnej właściwości przekazanej do komponentu. W tym przypadku oczekujemy, że komponent Powitanie otrzyma właściwość imie, którą następnie wstawiamy do tagu <h1>.
5. Wyświetlanie komponentu: Gdy komponent Powitanie jest używany w aplikacji React, możemy przekazać mu różne imiona jako właściwość imie. Na przykład <Powitanie imie="Anna" /> spowoduje wyświetlenie Witaj, Anna!.

Komponenty i propsy

Rozwińmy nieco definicje używanych tutaj określeń. W bibliotece React wszystko opiera się na komponentach. Możesz myśleć o nich jak o własnych elementach HTML. Komponenty przyjmują propsy (właściwości), które pozwalają na przekazywanie danych i funkcji między nimi.

function Aplikacja() {
  return (
    <div>
      <Powitanie imie="Anna" />
      <Powitanie imie="Tomek" />
    </div>
  );
}

W podanym powyżej fragmencie kodu definiujemy funkcję Aplikacja, która jest komponentem React. Ten komponent nie przyjmuje żadnych props (właściwości), ale zwraca JSX zawierający dwa komponenty Powitanie, każdy z różnymi właściwościami imie.

1. Definicja komponentu Aplikacja: Tworzymy nowy komponent o nazwie Aplikacja, który jest funkcją zwracającą JSX.
2. Zwracanie JSX: W ciele funkcji Aplikacja, instrukcja return zwraca blok JSX, który określa strukturę UI, którą chcemy wyrenderować.
3. Element nadrzędny <div>: Cała zawartość zwracana przez komponent Aplikacja jest opakowana w element <div>, co jest typowym wzorcem, gdyż JSX musi mieć jeden element nadrzędny.
4. Komponenty Powitanie z właściwościami imie: Wewnątrz <div>, umieszczamy dwa komponenty Powitanie. Każdemu z nich przekazujemy różne wartości dla właściwości imie – odpowiednio “Anna” i “Tomek”. To pokazuje, jak można wielokrotnie używać tego samego komponentu z różnymi danymi.
5. Renderowanie komponentów Powitanie: Gdy komponent Aplikacja jest renderowany, React wywołuje komponenty Powitanie z określonymi właściwościami. W rezultacie, w miejscu każdego komponentu Powitanie pojawi się element <h1> z odpowiednim powitaniem, czyli “Witaj, Anna!” dla pierwszego i “Witaj, Tomek!” dla drugiego

Stan komponentu

Stan komponentu to dane, które mogą się zmieniać w czasie. Używamy useState, aby dodać stan do komponentu funkcyjnego:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>{liczba}</p>
      <button onClick={() => ustawLiczba(liczba + 1)}>
        Kliknij mnie
      </button>
    </div>
  );
}

W podanym fragmencie kodu mamy do czynienia z komponentem funkcyjnym React o nazwie Licznik, który wykorzystuje hook stanu – useState, aby zarządzać stanem wewnętrznym komponentu.

1. Importowanie React i useState: Na początku importujemy React oraz hook useState z pakietu ‘react’. Hook useState jest używany do dodawania stanu do komponentów funkcyjnych.
2. Definicja komponentu Licznik: Tworzymy komponent Licznik, który jest funkcją zwracającą JSX.
3. Inicjalizacja stanu za pomocą useState: Wewnątrz komponentu Licznik wywołujemy useState(0), co inicjalizuje stan liczba wartością początkową 0. Funkcja useState zwraca parę wartości: aktualną wartość stanu (liczba) oraz funkcję do jego aktualizacji (ustawLiczba).
4. Zwracanie JSX: Komponent zwraca JSX, który opisuje UI komponentu – paragraf pokazujący aktualną wartość liczba oraz przycisk, który po kliknięciu zwiększa wartość liczba o 1.
5. Obsługa zdarzenia kliknięcia: Na przycisku jest zdefiniowane zdarzenie onClick, które wywołuje funkcję strzałkową () => ustawLiczba(liczba + 1). Ta funkcja strzałkowa wywołuje ustawLiczba, przekazując jej nową wartość, która jest o 1 większa od aktualnej wartości liczba.
6. Aktualizacja stanu i re-renderowanie: Gdy użytkownik kliknie przycisk, stan liczba jest aktualizowany, co powoduje ponowne renderowanie komponentu Licznik z nową wartością liczba.

Komponent Licznik wyświetla licznik, który zwiększa swoją wartość o 1 za każdym razem, gdy użytkownik kliknie przycisk “Kliknij mnie”. Jest to prosty przykład interaktywnego komponentu w React, który reaguje na działania użytkownika i aktualizuje UI w odpowiedzi na zmiany stanu.

Dalsza część tekstu znajduje się pod materiałem wideo:

React – cykl życia komponentu

Ważnym aspektem React jest zarządzanie cyklem życia komponentu. Możemy reagować na różne etapy życia komponentu, m.in. montowanie, aktualizację i demontaż, używając hooków takich jak useEffect.

import React, { useState, useEffect } from 'react';

function PrzykladowyKomponent() {
  const [dane, ustawDane] = useState(null);

  useEffect(() => {
    fetch('https://api.przyklad.com/dane')
      .then(response => response.json())
      .then(dane => ustawDane(dane));
  }, []); // Pusta tablica oznacza, że efekt uruchomi się tylko raz, po montażu komponentu

  return <div>{dane ? dane : 'Ładowanie...'}</div>;
}

W tym fragmencie kodu definiujemy komponent funkcyjny w React o nazwie PrzykladowyKomponent, który wykonuje zapytanie do zewnętrznego API i wyświetla pobrane dane lub informację o ładowaniu.

1. Importowanie React, useState i useEffect: Na początku importujemy React oraz dwa hooki: useState do zarządzania stanem lokalnym komponentu i useEffect do wykonania efektu ubocznego (side effect) w cyklu życia komponentu.
2. Definicja komponentu PrzykladowyKomponent: Tworzymy komponent PrzykladowyKomponent, który jest funkcją zwracającą JSX.
3. Inicjalizacja stanu: Za pomocą hooka useState inicjalizujemy stan dane wartością null. Hook ten zwraca parę: aktualną wartość stanu i funkcję do jego aktualizacji (ustawDane).
4. Użycie hooka useEffect: Hook useEffect jest używany do wykonania efektu ubocznego. W tym przypadku efektem ubocznym jest asynchroniczne zapytanie do zewnętrznego API. Funkcja przekazana do useEffect zostanie wykonana po pierwszym renderowaniu komponentu, ponieważ drugi argument to pusta tablica, co oznacza, że efekt uruchomi się tylko raz – analogicznie do componentDidMount w komponentach klasowych.
5. Wykonywanie zapytania do API: Wewnątrz useEffect używamy globalnej funkcji fetch do wykonania zapytania HTTP GET. Po otrzymaniu odpowiedzi (która jest obietnicą), przekształcamy ją na format JSON, a następnie aktualizujemy stan dane za pomocą funkcji ustawDane.
6. Renderowanie UI: W zależności od tego, czy stan dane jest już ustawiony, komponent zwraca albo dane, albo tekst ‘Ładowanie…’. Jeśli zapytanie do API nie zostało jeszcze ukończone i stan dane jest nadal null, użytkownik zobaczy informację o ładowaniu. Gdy dane zostaną pobrane i stan zostanie zaktualizowany, komponent ponownie się wyrenderuje, pokazując tym razem pobrane dane.

Rozpoczęcie pracy z React.js wymaga zrozumienia podstawowych koncepcji, czyli JSX, komponentów, propów, stanu oraz cykli życia komponentów. Przykłady kodu przedstawione powyżej to tylko wstęp do tego, co React ma do zaoferowania. Eksperymentuj z kodem, buduj własne komponenty i nie bój się zagłębiać w dokumentację Reacta, aby nauczyć się więcej. Twoja przygoda z React dopiero się zaczyna!

Czytaj także:

Najpopularniejsze frameworki w pracy front-end developerów

Co musi wiedzieć JavaScript Developer?