Twoja pierwsza aplikacja React z Vite

Pokażę ci: zakładanie projektu

Vite (czytaj „wit”, po francusku „szybko”) to narzędzie, które przygotuje za ciebie gotowy szkielet projektu React. Otwórz terminal i przejdź tam, gdzie ma mieszkać projekt (np. na Pulpit):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite może o coś zapytać – potwierdź Enterem. Potem:

cd my-react-web
npm install
npm run dev -- --port 3901

• npm install pobiera wszystko, czego projekt potrzebuje (chwilę to trwa – React i jego pomocnicy lądują w folderze node_modules).
• npm run dev -- --port 3901 uruchamia serwer deweloperski. W terminalu pojawi się adres http://localhost:3901. Otwórz go w przeglądarce.

Widzisz kręcące się logo i nagłówek „Vite + React”? Gratulacje – twoja pierwsza aplikacja React działa! 🎉

Zwiedzanie projektu

Otwórz folder my-react-web w VS Code (File → Open Folder). Plików wygląda na dużo, ale na razie liczą się tylko trzy:

Resztę na razie zostaw (nigdy nie otwieraj ani nie usuwaj node_modules, package.json to lista pakietów projektu).

Twoja pierwsza zmiana w kodzie

Otwórz src/App.jsx. Usuń wszystko i wpisz:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Zapisz – i strona w przeglądarce zmieniła się sama. Oto co widzisz:

• Komponent App to funkcja, która zwraca HTML (ten zapis nazywa się JSX).
• {name} – nawiasy klamrowe wstawiają JavaScript do HTML. Cokolwiek: zmienną, obliczenie {2 + 3}, nawet warunek.
• export default App – „oferuję ten komponent innym plikom” (bierze go main.jsx).

JSX ma dwie dziwności, do których się przyzwyczaisz: zamiast class piszesz className (class jest zarezerwowanym słowem w JavaScript), a komponent musi zwracać jeden element-opakowanie (dlatego wokół wszystkiego jest <div>).

Teraz ty 💪

1. Załóż projekt według przewodnika i uruchom go.
2. Edytuj App.jsx: nagłówek z twoim imieniem, akapit o tym, co budujesz, i zmienna age, którą wyświetlisz w zdaniu I am {age} years old.
3. Celowo usuń zamykający tag i zobacz, jak wygląda błąd – Vite pokazuje go od razu w przeglądarce, z numerem linii. Potem napraw.
4. Zatrzymaj serwer (Ctrl+C w terminalu) i uruchom go znowu (npm run dev -- --port 3901) – żeby cały cykl wszedł ci w palce.

Co wyniesiesz z tej lekcji

• npm create vite@latest zakłada projekt, npm install pobiera pakiety, npm run dev startuje localhost.
• Kod piszesz w src/App.jsx: komponent to funkcja zwracająca JSX, {} wstawia JavaScript do HTML.
• W JSX: className zamiast class, zawsze jeden element-opakowanie.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści