Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

Tworzenie projektu React z Vite

W kosmicznej podróży przez świat React potrzebujesz odpowiedniego statku, aby wyruszyć w drogę. Dawniej standardowym wyborem był Create React App (CRA), ale to narzędzie zostało oficjalnie wycofane (deprecated) i nie jest już rozwijane. Współczesnym standardem do tworzenia projektów React jest Vite - ultraszybki bundler nowej generacji.

Ra, nasz kosmiczny przewodnik, mówi: "Porzuć stary wahadłowiec CRA - Vite to nowy silnik warp drive, który przeniesie Cię w galaktykę React szybciej niż kiedykolwiek!"

Dlaczego Vite?

Vite (wymawiane "vit", z francuskiego "szybki") to nowoczesne narzędzie do budowania aplikacji frontendowych, stworzone przez Evana You (twórcę Vue.js). Jest oficjalnie rekomendowane przez dokumentację React jako sposób na tworzenie nowych projektów.

Dlaczego Vite zastąpił CRA:

  • Błyskawiczny start serwera - Vite wykorzystuje natywne moduły ES (ESM) przeglądarki, więc serwer deweloperski startuje w 1-2 sekundy (CRA potrzebował 20-40 sekund)
  • Natychmiastowy Hot Module Replacement (HMR) - zmiany w kodzie pojawiają się w przeglądarce w ~50ms, niezależnie od rozmiaru aplikacji
  • Nowoczesna architektura - oparty na ESM zamiast starszego Webpacka
  • Szybkie buildy produkcyjne - wykorzystuje Rollup do efektywnego bundlowania
  • Wsparcie out-of-the-box - TypeScript, JSX, CSS Modules, PostCSS działają bez dodatkowej konfiguracji

Tworzenie nowego projektu z Vite

Aby utworzyć nowy projekt React z Vite, otwórz terminal i wpisz:

1npm create vite@latest moja-aplikacja-react -- --template react

To polecenie:

  1. Używa 
    npm create
    do uruchomienia generatora Vite
  2. vite@latest
    zapewnia użycie najnowszej wersji
  3. moja-aplikacja-react
    to nazwa Twojego projektu
  4. --template react
    wybiera szablon React (dostępne też: 
    react-ts
    dla TypeScript)

Po utworzeniu projektu przejdź do katalogu i zainstaluj zależności:

1cd moja-aplikacja-react
2npm install

Następnie uruchom serwer deweloperski:

1npm run dev

Twoja aplikacja będzie dostępna pod adresem 

http://localhost:5173
w przeglądarce. Zwróć uwagę - Vite domyślnie używa portu 5173, nie 3000.

Struktura projektu Vite + React

Po utworzeniu projektu zobaczysz następującą strukturę:

1moja-aplikacja-react/
2├── node_modules/         # Zainstalowane zależności
3├── public/               # Pliki statyczne (kopiowane bez zmian)
4│   └── vite.svg          # Logo Vite
5├── src/                  # Kod źródłowy
6│   ├── assets/           # Zasoby (obrazy, fonty)
7│   │   └── react.svg     # Logo React
8│   ├── App.css           # Style komponentu App
9│   ├── App.jsx           # Główny komponent App
10│   ├── index.css         # Globalne style
11│   └── main.jsx          # Punkt wejściowy aplikacji
12├── index.html            # Główny plik HTML (w katalogu głównym!)
13├── vite.config.js        # Konfiguracja Vite
14├── package.json          # Informacje o projekcie i zależności
15├── .gitignore            # Pliki ignorowane przez Git
16└── .eslintrc.cjs         # Konfiguracja ESLint

Kluczowe różnice w stosunku do CRA

Zauważ kilka istotnych różnic:

  • index.html jest w katalogu głównym, nie w 
    public/
    - Vite traktuje go jako punkt wejściowy
  • Pliki używają rozszerzenia .jsx zamiast .js - to jasny sygnał, że plik zawiera JSX
  • Punkt wejściowy to main.jsx, nie index.js
  • vite.config.js zamiast ukrytej konfiguracji Webpacka - masz pełną kontrolę

index.html

W Vite plik 

index.html
jest w katalogu głównym projektu i wygląda tak:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Vite + React</title>
8  </head>
9  <body>
10    <div id="root"></div>
11    <script type="module" src="/src/main.jsx"></script>
12  </body>
13</html>

Kluczowa linia to 

<script type="module" src="/src/main.jsx"></script>
- Vite ładuje aplikację jako natywny moduł ES, co zapewnia błyskawiczny start.

src/main.jsx

To punkt wejściowy aplikacji React:

1import React from 'react'
2import ReactDOM from 'react-dom/client'
3import App from './App.jsx'
4import './index.css'
5
6ReactDOM.createRoot(document.getElementById('root')).render(
7  <React.StrictMode>
8    <App />
9  </React.StrictMode>,
10)

Ten kod:

  1. Importuje React i ReactDOM
  2. Tworzy "korzeń" React w elemencie o id 
    root
  3. Renderuje główny komponent 
    App
    wewnątrz 
    StrictMode

src/App.jsx

Główny komponent Twojej aplikacji:

1import { useState } from 'react'
2import reactLogo from './assets/react.svg'
3import viteLogo from '/vite.svg'
4import './App.css'
5
6function App() {
7  const [count, setCount] = useState(0)
8
9  return (
10    <>
11      <div>
12        <a href="https://vite.dev" target="_blank">
13          <img src={viteLogo} className="logo" alt="Vite logo" />
14        </a>
15        <a href="https://react.dev" target="_blank">
16          <img src={reactLogo} className="logo react" alt="React logo" />
17        </a>
18      </div>
19      <h1>Vite + React</h1>
20      <div className="card">
21        <button onClick={() => setCount(c => c + 1)}>
22          count is {count}
23        </button>
24      </div>
25    </>
26  )
27}
28
29export default App

vite.config.js

Plik konfiguracyjny Vite - prosty i czytelny:

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react'
3
4export default defineConfig({
5  plugins: [react()],
6})

To wszystko, czego potrzeba! Plugin 

@vitejs/plugin-react
zapewnia wsparcie JSX, Fast Refresh (HMR) i inne funkcje React.

Dostępne skrypty

W 

package.json
projektu Vite znajdziesz:

  • npm run dev
    - uruchamia serwer deweloperski z HMR
  • npm run build
    - buduje aplikację do wdrożenia produkcyjnego
  • npm run preview
    - podgląd zbudowanej wersji produkcyjnej lokalnie
  • npm run lint
    - sprawdza kod za pomocą ESLint

Vite vs CRA - porównanie

| Cecha | CRA (deprecated) | Vite | |-------|-------------------|------| | Status | Wycofane, brak aktualizacji | Aktywnie rozwijane | | Start serwera | 20-40 sekund | 1-2 sekundy | | HMR | 1-3 sekundy | ~50ms | | Bundler | Webpack | ESBuild (dev) + Rollup (prod) | | Konfiguracja | Ukryta (eject) | Jawna (vite.config.js) | | Moduły | CommonJS | Natywne ES Modules | | TypeScript | Wymaga konfiguracji | Działa out-of-the-box |

Inne narzędzia w ekosystemie React

Oprócz Vite, warto znać inne popularne narzędzia:

  • Next.js - framework React z SSR (Server-Side Rendering), SSG i routingiem opartym na plikach. Idealny do aplikacji wymagających SEO
  • Remix - framework React skupiony na web fundamentals i progressive enhancement
  • Gatsby - generator statycznych stron z GraphQL

Dla nauki React i budowania aplikacji SPA (Single Page Application), Vite jest najlepszym wyborem - szybki, prosty i oficjalnie rekomendowany.

Ra podsumowuje: "Vite to silnik nowej generacji Twojego kosmicznego statku React. Szybki start, natychmiastowe reakcje na zmiany kursu i pełna kontrola nad konfiguracją - wszystko, czego potrzebujesz, aby podbić galaktykę!"

Przejdź do CodeWorlds→