Instalacja React: nowa aplikacja React z Vite

Żeby zainstalować React, utwórz nowy projekt w Vite: uruchom npm create vite@latest my-app -- --template react, a potem cd my-app, npm install i npm run dev. Najpierw musisz mieć zainstalowany Node.js. Vite konfiguruje React, kompilację JSX i serwer deweloperski, który przeładowuje stronę przy każdym zapisie.

Do rozpoczęcia nauki nic z tego nie jest potrzebne. Edytor poniżej uruchamia React na tej stronie; to uproszczona wersja pliku App.jsx, który Vite generuje dla ciebie.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Kliknij przycisk, a potem zmień tekst nagłówka: podgląd aktualizuje się w trakcie pisania, tak samo jak serwer deweloperski Vite podmienia twoje zmiany bez przeładowania strony (to właśnie oznacza „HMR", hot module replacement).

Wymagania: Node.js

Narzędzia, które budują aplikację React, działają na Node.js, a npm (jego menedżer pakietów) jest dołączony. Zainstaluj aktualne wydanie LTS ze strony Node.js albo menedżerem wersji takim jak nvm, a potem sprawdź je w terminalu:

node -v
npm -v

Oba polecenia powinny wypisać numer wersji. Jeśli node -v wypisuje starą wersję, zaktualizuj ją: Vite 8 wymaga Node.js 20.19 lub nowszego (22.12 lub nowszego w linii 22) i wyświetla ostrzeżenie na starszych wydaniach.

Tworzenie aplikacji React w Vite

Uruchom te cztery polecenia w folderze, w którym trzymasz projekty:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest pobiera najnowszy generator projektów. my-app to nazwa folderu, a --template react wybiera czysty React z JavaScriptem. Dodatkowe -- przekazuje opcję szablonu przez npm do generatora.
• npm install pobiera React, React DOM, Vite i pozostałe zależności wymienione w package.json do node_modules.
• npm run dev uruchamia serwer deweloperski i wypisuje lokalny adres, zwykle http://localhost:5173. Otwórz go w przeglądarce.

Generator zadaje potem dwa pytania: jaki linter skonfigurować (Oxlint czy ESLint) i czy od razu zainstalować i uruchomić aplikację. Jeśli na drugie odpowiesz tak, sam uruchomi npm install i npm run dev, więc dwa ostatnie polecenia możesz pominąć. Dla TypeScriptu użyj zamiast tego --template react-ts; zobacz React z TypeScriptem.

Pliki, które tworzy Vite

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Najważniejsze są trzy z nich:

index.html to strona, którą ładuje przeglądarka. Jej body zawiera jeden pusty element, <div id="root"></div>, i tag script, który ładuje src/main.jsx. React rysuje całą aplikację wewnątrz tego diva.

src/main.jsx to punkt wejścia. Łączy React ze stroną:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot bierze element #root i sprawia, że React odpowiada za wszystko, co jest w środku. render(<App />) rysuje tam twój główny komponent. StrictMode to pomocnik deweloperski, który wykonuje kilka dodatkowych sprawdzeń; nie ma wpływu na wersję produkcyjną (zobacz Strict Mode). Rzadko trzeba edytować ten plik.

src/App.jsx to twój pierwszy komponent i plik, który edytujesz. Wersja z Vite importuje trzy obrazy (grafikę hero oraz logo Vite i Reacta) i App.css, a kończy się export default App. To to samo, co napisanie na górze export default function App(), czyli formy, której używają przykłady na tych stronach.

Pierwsza zmiana

Otwórz src/App.jsx, usuń to, co tam jest, i zastąp własnym komponentem. Zapisz, a przeglądarka się zaktualizuje. Oto mała pierwsza aplikacja do przepisania; najpierw wypróbuj ją tutaj:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Pisz w polu, a nagłówek podąża za tekstem. Potem dodaj drugie <Greeting name="Vite" /> pod pierwszym: komponenty można używać wielokrotnie, a każda kopia dostaje własne name.

Gdy App.jsx urośnie, przenieś komponenty do osobnych plików, takich jak src/Greeting.jsx, wyeksportuj je i zaimportuj tam, gdzie ich używasz. Strona o komponentach pokazuje, jak to zrobić.

Budowanie wersji produkcyjnej

Serwer deweloperski służy do pracy nad kodem. Gdy wszystko jest gotowe do publikacji, zbuduj aplikację:

npm run build
npm run preview

npm run build kompiluje JSX, łączy i minifikuje kod, a potem zapisuje statyczne pliki do folderu dist/. npm run preview serwuje ten folder lokalnie, żebyś mógł sprawdzić prawdziwy build. Wgraj dist/ na dowolny hosting statyczny. W buildzie React przełącza się też w tryb produkcyjny, który jest szybszy i pomija ostrzeżenia deweloperskie.

Create React App jest przestarzałe

Przez lata standardowym sposobem na start było npx create-react-app my-app. W lutym 2025 zespół Reacta oznaczył Create React App jako przestarzałe i nie jest już ono rozwijane. Wiele starszych poradników wciąż go używa, więc zobaczysz w nich react-scripts start i plik wejściowy src/index.js; same komponenty działają w projekcie Vite tak samo.

Czego używać zamiast tego:

• Vite do aplikacji po stronie klienta, projektu do nauki albo widżetu: konfiguracja opisana powyżej.
• Frameworka, gdy potrzebujesz wbudowanego routingu, renderowania na serwerze albo ładowania danych. Najczęstsze wybory to Next.js i tryb frameworka React Router:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Żeby przenieść istniejący projekt Create React App do Vite, główne kroki to: zainstaluj vite i @vitejs/plugin-react i usuń react-scripts; dodaj vite.config.js, który ładuje wtyczkę Reacta; przenieś index.html z public/ do katalogu głównego projektu, usuń znaczniki %PUBLIC_URL% i dodaj tag <script type="module" src="/src/index.jsx"> dla pliku wejściowego; zmień rozszerzenie plików zawierających JSX na .jsx; zmień zmienne środowiskowe REACT_APP_ na VITE_ i czytaj je z import.meta.env; a polecenia react-scripts w package.json zastąp przez vite, vite build i vite preview.

Dodawanie Reacta do istniejącej strony

React nie musi zarządzać całą stroną. Możesz go wyrenderować w jednym elemencie istniejącej witryny, na przykład jako widżet koszyka w sklepie renderowanym na serwerze. Wciąż potrzebujesz bundlera takiego jak Vite, żeby skompilować JSX. Zainstaluj dwa pakiety:

npm install react react-dom

Potem utwórz root na elemencie, którym ma sterować React:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Wszystko poza #cart zostaje bez zmian. Na jednej stronie możesz utworzyć kilka rootów, po jednym na element, a każdy działa niezależnie.