Lekcja 2: Konfiguracja Środowiska (Create React App, Vite)

Aby efektywnie pracować z Reactem i korzystać z dobrodziejstw takich jak JSX, potrzebujemy skonfigurowanego środowiska deweloperskiego. W tej lekcji poznamy dwa popularne narzędzia, które automatyzują ten proces: Create React App (CRA) i Vite.

Dlaczego potrzebujemy narzędzi budujących?

Jak widzieliśmy w poprzedniej lekcji, pisanie kodu React bez JSX jest niewygodne. JSX nie jest jednak standardowym kodem JavaScript i przeglądarki go nie rozumieją. Potrzebujemy narzędzia (transpilatora, np. Babel), które przekształci kod JSX na zwykły JavaScript (wywołania React.createElement). Ponadto, nowoczesne aplikacje często korzystają z modułów JavaScript (import/export), wymagają optymalizacji kodu (minifikacja, bundling) i serwera deweloperskiego z funkcjami takimi jak hot-reloading (automatyczne odświeżanie strony po zmianach w kodzie). Narzędzia takie jak CRA i Vite konfigurują to wszystko za nas.

Create React App (CRA)

Create React App to oficjalne narzędzie stworzone przez zespół Reacta, które przez długi czas było standardem w tworzeniu nowych aplikacji. Ukrywa ono całą złożoność konfiguracji (Webpack, Babel) i pozwala skupić się na pisaniu kodu.

Instalacja i użycie:

Do użycia CRA potrzebujesz Node.js i npm (lub yarn) zainstalowanych na swoim komputerze. Aby stworzyć nową aplikację, otwórz terminal i wpisz:

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

Polecenie npx create-react-app pobierze najnowszą wersję CRA i stworzy nowy projekt w folderze moja-aplikacja-cra. Następnie przechodzimy do tego folderu i uruchamiamy serwer deweloperski za pomocą npm start. Aplikacja będzie dostępna pod adresem http://localhost:3000.

Struktura projektu CRA:

• node_modules/: Zawiera wszystkie zależności projektu.
• public/: Zawiera pliki statyczne, jak index.html (główny szablon HTML) i obrazy.
• src/: Tutaj znajduje się kod źródłowy naszej aplikacji React (komponenty, style). Główny plik to index.js, który renderuje główny komponent (App.js) do DOM.
• package.json: Plik konfiguracyjny npm, zawiera listę zależności i skrypty (np. start, build, test).

Vite

Vite (czyt. /vit/) to nowoczesne narzędzie do budowania front-endu, które zyskuje na popularności dzięki swojej szybkości. Zamiast tradycyjnego bundlowania całej aplikacji przed uruchomieniem serwera deweloperskiego (jak Webpack w CRA), Vite wykorzystuje natywne moduły ES (ESM) przeglądarki. Dzięki temu start serwera i aktualizacje (Hot Module Replacement - HMR) są błyskawiczne, nawet w dużych projektach.

Instalacja i użycie:

Podobnie jak CRA, Vite wymaga Node.js i npm/yarn. Aby stworzyć nową aplikację React z Vite:

npm create vite@latest moja-aplikacja-vite --template react
cd moja-aplikacja-vite
npm install
npm run dev

Polecenie npm create vite@latest uruchomi interaktywny kreator. Wybieramy nazwę projektu i szablon (react). Następnie instalujemy zależności (npm install) i uruchamiamy serwer deweloperski (npm run dev). Aplikacja będzie domyślnie dostępna pod adresem http://localhost:5173.

Struktura projektu Vite (React):

• node_modules/: Zależności.
• public/: Pliki statyczne.
• src/: Kod źródłowy aplikacji. Główny plik to main.jsx (zauważ rozszerzenie .jsx), który renderuje komponent App.jsx.
• index.html: Główny plik HTML znajduje się w głównym folderze projektu (nie w public/ jak w CRA). Vite używa go jako punktu wejściowego.
• package.json: Konfiguracja npm.
• vite.config.js: (Opcjonalny) Plik konfiguracyjny Vite.

CRA vs Vite - Co wybrać?

• Szybkość: Vite jest znacznie szybszy, zarówno jeśli chodzi o start serwera deweloperskiego, jak i HMR.
• Konfiguracja: CRA ukrywa konfigurację, co jest dobre dla początkujących, ale utrudnia dostosowanie. Vite oferuje prostszą konfigurację i łatwiejsze dostosowanie.
• Popularność/Stabilność: CRA jest starsze i bardziej sprawdzone, choć obecnie w trybie maintenance. Vite szybko zyskuje na popularności i jest aktywnie rozwijane.

Dla nowych projektów w 2025 roku, Vite jest często rekomendowanym wyborem ze względu na wydajność i nowoczesne podejście. W tym kursie będziemy zakładać użycie środowiska stworzonego za pomocą Vite.

Cel: Stworzyć nową aplikację React za pomocą Vite i uruchomić serwer deweloperski.

Kroki:

1. Upewnij się, że masz zainstalowany Node.js i npm (sprawdź wpisując node -v i npm -v w terminalu).
2. Otwórz terminal w folderze, gdzie chcesz stworzyć projekt.
3. Wpisz komendę: npm create vite@latest cwiczenie-react-vite --template react
4. Przejdź do nowo utworzonego folderu: cd cwiczenie-react-vite
5. Zainstaluj zależności: npm install
6. Uruchom serwer deweloperski: npm run dev
7. Otwórz w przeglądarce adres podany w terminalu (zwykle http://localhost:5173). Powinieneś zobaczyć startową stronę aplikacji React stworzonej przez Vite.

Po stworzeniu aplikacji za pomocą Vite (jak w ćwiczeniu praktycznym):

1. Otwórz projekt w edytorze kodu (np. VS Code).
2. Znajdź plik src/App.jsx.
3. Zmodyfikuj zawartość tego komponentu, aby zamiast domyślnej treści wyświetlał nagłówek <h1> z Twoim imieniem i paragraf <p> z krótkim opisem, np. "Uczę się Reacta z Vite!".
4. Zapisz plik i sprawdź, czy zmiany automatycznie pojawiły się w przeglądarce (dzięki HMR).