Lekcja 1: Wprowadzenie do React.js

Witaj w pierwszej lekcji poświęconej React.js! React to popularna biblioteka JavaScript stworzona przez Facebooka, służąca do budowania interfejsów użytkownika (UI). Jej głównym celem jest ułatwienie tworzenia złożonych, interaktywnych i wydajnych aplikacji webowych.

Co to jest React?

React nie jest kompletnym frameworkiem jak Angular czy Vue, lecz biblioteką skupiającą się na warstwie widoku (View) w architekturze Model-View-Controller (MVC). Oznacza to, że React odpowiada za to, co użytkownik widzi na ekranie i jak z tym interaguje. Kluczowe koncepcje Reacta to:

Dlaczego React?

React zdobył ogromną popularność dzięki:

Pierwszy przykład (bez JSX)

Tradycyjnie, bez użycia narzędzi budujących, możemy dołączyć Reacta do strony HTML za pomocą tagów <script> z CDN i użyć jego API:

<!DOCTYPE html>
<html>
<head>
    <title>React bez JSX</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <div id="root"></div>

    <script>
        const element = React.createElement(\'h1\', null, \'Witaj w React bez JSX!\');
        const container = document.getElementById(\'root\');
        const root = ReactDOM.createRoot(container);
        root.render(element);
    </script>
</body>
</html>

Ten sam przykład z JSX (wymaga kompilacji)

Pisanie kodu za pomocą React.createElement jest mało wygodne. Dlatego powstał JSX. Poniższy kod robi to samo, ale jest znacznie czytelniejszy. Zauważ, że ten kod wymaga kroku kompilacji (np. za pomocą Babela), aby przeglądarka mogła go zrozumieć.

// Zakładając, że mamy skonfigurowane środowisko z Bablem
import React from \'react\';
import ReactDOM from \'react-dom/client\';

const element = <h1>Witaj w React z JSX!</h1>;
const container = document.getElementById(\'root\');
const root = ReactDOM.createRoot(container);
root.render(element);

W kolejnych lekcjach skonfigurujemy środowisko deweloperskie, które pozwoli nam wygodnie korzystać z JSX.

Ćwiczenie praktyczne

Pokaż rozwiązanie
<!DOCTYPE html>
<html>
<head>
    <title>Ćwiczenie 1 - React CDN</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <div id="app"></div>

    <script>
        const paragraph = React.createElement(\'p\', null, \'Moja pierwsza aplikacja React!\');
        const container = document.getElementById(\'app\');
        const root = ReactDOM.createRoot(container);
        root.render(paragraph);
    </script>
</body>
</html>

Cel: Użyj CDN Reacta, aby wyrenderować prosty element <p> wewnątrz diva o ID "app".

Kroki:

  1. Stwórz plik HTML (np. index.html).
  2. Dodaj w sekcji <head> linki CDN do React i ReactDOM (jak w przykładzie "bez JSX").
  3. W <body> dodaj pusty <div id="app"></div>.
  4. Poniżej diva dodaj tag <script>.
  5. Wewnątrz skryptu użyj React.createElement, aby stworzyć paragraf z tekstem "Moja pierwsza aplikacja React!".
  6. Użyj ReactDOM.createRoot i root.render, aby wyrenderować stworzony element wewnątrz diva "app".
  7. Otwórz plik HTML w przeglądarce.

Zadanie do samodzielnego wykonania

Zmodyfikuj kod z ćwiczenia praktycznego tak, aby zamiast paragrafu renderował nieuporządkowaną listę (<ul>) z trzema elementami (<li>) zawierającymi dowolny tekst (np. "Element 1", "Element 2", "Element 3"). Pamiętaj, że React.createElement jako trzeci argument (i kolejne) przyjmuje dzieci elementu.

FAQ - Wprowadzenie do React.js

Czym dokładnie jest React?

React to biblioteka JavaScript służąca do budowania interfejsów użytkownika. Koncentruje się na tworzeniu reużywalnych komponentów UI i efektywnym zarządzaniu ich stanem oraz renderowaniem, głównie dla aplikacji typu Single Page Application (SPA). Ułatwia tworzenie dynamicznych i interaktywnych widoków.

Czy React to framework czy biblioteka?

React jest oficjalnie biblioteką, ponieważ skupia się głównie na warstwie widoku. Nie narzuca pełnej struktury aplikacji jak frameworki (np. Angular). Jednak dzięki bogatemu ekosystemowi (np. React Router do routingu, Redux/Context API do zarządzania stanem) często funkcjonuje w projektach jak framework.

Do czego służy Virtual DOM?

Virtual DOM to wirtualna reprezentacja rzeczywistego DOM przeglądarki przechowywana w pamięci. React używa go do optymalizacji wydajności. Zamiast manipulować bezpośrednio wolniejszym DOM, React aktualizuje Virtual DOM, porównuje zmiany (diffing) i dopiero wtedy wprowadza minimalne, niezbędne modyfikacje w rzeczywistym DOM.

Dlaczego warto uczyć się Reacta?

React jest jedną z najpopularniejszych technologii front-endowych, co oznacza duże zapotrzebowanie na rynku pracy. Posiada ogromną społeczność, bogaty ekosystem narzędzi i bibliotek oraz pozwala tworzyć nowoczesne, wydajne aplikacje. Jego nauka otwiera drzwi do wielu interesujących projektów.

Czy potrzebuję zaawansowanej wiedzy z JavaScript, aby zacząć z Reactem?

Solidne podstawy JavaScript są kluczowe. Powinieneś dobrze rozumieć zmienne, typy danych, funkcje (w tym funkcje strzałkowe), obiekty, tablice, metody tablicowe (map, filter), a także koncepcje ES6+ jak `let`, `const`, klasy (choć mniej istotne przy Hookach) i moduły. Im lepiej znasz JS, tym łatwiej będzie Ci opanować Reacta.

Jakie są główne zalety Reacta?

Główne zalety to wydajność dzięki Virtual DOM, reużywalność kodu dzięki komponentom, deklaratywny sposób pisania UI, duża elastyczność (można go integrować z innymi bibliotekami) oraz silne wsparcie społeczności i Facebooka. Ułatwia tworzenie złożonych interfejsów i zarządzanie ich stanem.

Kto stworzył i utrzymuje Reacta?

React został stworzony przez Jordana Walke, inżyniera oprogramowania w Facebooku. Pierwszy raz został wdrożony na Facebooku w 2011 roku, a jako projekt open-source udostępniony w maju 2013 roku. Obecnie jest utrzymywany przez Facebooka oraz społeczność deweloperów i firm z całego świata.