Strona główna / Artykuły / Przewodnik po konfiguracji React + Vite (2026): Twój pierwszy działający aplikacja, wyjaśnione kroki

ReactViteNode.jsnpmJavaScriptFrontend Development

Przewodnik po konfiguracji React + Vite (2026): Twój pierwszy działający aplikacja, wyjaśnione kroki

Przejdźmy przez instalację Node.js, npm, VS Code i Vite w celu stworzenia szkieletu aplikacji React, jednocześnie dowiadując się, jakie funkcje pełni każde z tych narzędzi w praktyce.

1601 słów

„Odpowiedni moment na stworzenie pierwszego komponentu React to nie zaraz po przejrzeniu wszystkich tutoriali — to w momencie, gdy uruchomisz odpowiednie środowisko i naprawdę zrozumiesz, dlaczego każda część tam istnieje.”

W poprzednim artykule przyjrzeliśmy się temu, czym jest React, dlaczego został stworzony w Facebooku oraz jak zmienił sposób, w jaki programiści tworzą aplikacje internetowe.

Teraz przechodzimy od koncepcji do praktycznych zadań.

Zanim napiszesz jakikolwiek komponent, potrzebujesz środowiska pracy, które potrafi uruchamiać React, natychmiastowo ładować Twoje zmiany i wspierać Cię w miarę rozwoju aplikacji.

Pod koniec tego artykułu będziesz miał działającą aplikację React na swoim komputerze i zrozumiesz, jaką funkcję pełni każde narzędzie użyte w tym środowisku.

Dlaczego nie możemy po prostu napisać kodu React w pliku HTML?

Początkujący niemal zawsze zadają to pytanie jako pierwsze.

React to „po prostu JavaScript”, więc czy zwykły plik HTML nie powinien wystarczyć?

Technicznie rzecz biorąc, to prawda, ale tylko w bardzo ograniczonym sensie.

Jednak rzeczywiste projekty z Reactem opierają się na takich elementach jak:

  • JSX
  • ES Modules
  • Hot Module Replacement
  • Package Management
  • Build Optimization

Żaden z tych elementów nie jest natywnie rozumiany przez przeglądarki.

Dlatego programiści polegają na narzędziach, które przekształcają i przygotowują kod przed jego dostarczeniem do przeglądarki.

To podobne do gotowania posiłku.

Surowe składniki nie są jedzone prosto z lodówki — najpierw są przygotowane.

Ustawianie projektu React opiera się na tej samej logice.

Narzędzia, które zainstalujemy

Istnieje niewielka grupa narzędzi, od których korzysta niemal każdy programista pracujący z Reactem, a my zainstalujemy je wszystkie w tym przewodniku.

Każde narzędzie rozwiązuje jeden konkretny problem w procesie pracy.

Gdy wszystko będzie na swoim miejscu, ledwo zauważysz, że działają one w tle.

Rozumienie Node.js

Powszechnym błędem jest przekonanie, że sam React działa na bazie Node.js.

To nie jest prawda.

React jest wykonywany w przeglądarce, a nie w Node.

Node.js służy do wspierania cię podczas tworzenia aplikacji, a nie gdy aplikacja jest uruchamiana dla użytkowników końcowych.

Pozwala on na:

  • Instalowanie bibliotek
  • Rozpoczynanie serwerów rozwojowych
  • Budowanie optymalizowanych plików produkcyjnych
  • Zarządzanie zależnościami projektu

Bez Node.js instalacja i uruchomienie Reacta byłoby znacznie trudniejsze.

Czym dokładnie jest npm?

Instalacja Node.js automatycznie obejmuje npm, skrót od Node Package Manager.

Zobrazowanie procesu tworzenia nowej strony od zera, wymagającej jednocześnie kilku bibliotek, takich jak:

  • React
  • React Router
  • Axios
  • Tailwind CSS
  • Redux Toolkit

Zamiast ręcznie pobierać każdą z nich, npm zarządza instalacją za pomocą jednego polecenia.

Naprzимер:

npm install axios

To wystarczy — npm pobiera pakiet, integruje go z projektem i śledzi używaną wersję.

Dlaczego nowoczesny React używa Vite

Starsze tutoriale często pokazują takie polecenie do utworzenia szkieletu projektu:

npx create-react-app my-app

Jednak obecnie społeczność React w dużej mierze przechodzi na Vite.

Cóż spowodowało tę zmianę?

Głównie chęć szybszego doświadczenia podczas codziennej pracy nad projektem.

Vite oferuje:

  • Błyskawiczne uruchomienie projektu
  • Bardzo szybka zastępowalność modułów w czasie rzeczywistym (HMR)
  • Mniejsze rozmiary plików budowanych do produkcji
  • Ogólnie prostsza konfiguracja
  • Lepsza ogólna wydajność

Dla wszystkich, którzy teraz uczą się Reacta, rozpoczęcie od Vite to rozsądny wybór.

Krok 1: Zainstaluj Node.js

Pobierz najnowszą wersję LTS (Long-Term Support) Node.js z jego oficjalnej strony.

Gdy zostanie zainstalowany, otwórz terminal, aby potwierdzić, że instalacja się udała.

node -v

Wynik powinien wyglądać tak:

v24.x.x

Następnie sprawdź również npm:

npm -v

Jeśli oba polecenia zwrócą numery wersji, twoja maszyna jest prawidłowo skonfigurowana.

Krok 2: Zainstaluj Visual Studio Code

Technicznie rzecz biorąc, React można pisać w dowolnym edytorze, ale VS Code stał się standardowym wyborem dzięki swojej szybkości, ekosystemowi rozszerzeń oraz rozbudowanym narzędziom do JavaScriptu.

Rozszerzenia VS Code, które każdy deweloper React powinien zainstalować

Wcześniejsza instalacja niewielkiej liczby dodatków znacząco poprawia codzienną pracę. Warto dodać do swojego zestawu:

  • ESLint – do wykrywania problemów w kodzie
  • Prettier – do spójnego formatowania
  • Error Lens – do pokazywania błędów bezpośrednio w tekście
  • Auto Rename Tag – do synchronizacji pasujących tagów
  • Path Intellisense – do automatycznego uzupełniania ścieżek plików
  • GitLens – do uzyskiwania bardziej szczegółowych informacji o Git wewnątrz edytora
  • ES7+ React Snippets – do szybkiego tworzenia szablonów React

Wszystkie one razem obejmują formatowanie, wczesne wykrywanie błędów, automatyczne uzupełnianie tekstu oraz poprawę ogólnej produktywności.

Krok 3: Stwórz swój pierwszy projekt React

Otwórz okno terminala i uruchom:

npm create vite@latest

Będziesz poproszony o odpowiedź na kilka pytań dotyczących konfiguracji:

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

Gdy składniki projektu zostaną utworzone, przejdź do nowej folderu projektu:

cd react-beginners

Następnie zainstaluj zależności projektu:

npm install

I w końcu uruchom serwer rozwojowy:

npm run dev

Wynik w terminalu będzie wyglądał mniej więcej tak:

Local: http://localhost:5173

Otwórz tę adres w swoim przeglądarce. Twoja pierwsza aplikacja React jest już uruchomiona.

Twoja pierwsza aplikacja React jest teraz dostępna i działa.

Rozumienie struktury projektu

Nieco skomplikowany na pierwszy rzut oka projekt React może okazać się prostszy w praktyce, ponieważ regularnie będziesz pracować tylko z kilkoma plikami.

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

src

Prawie cały kod, który piszesz na co dzień, znajduje się w tym folderze.

App.jsx

Uważaj to za komponent korzeniowy twojej aplikacji.

Każda nowa funkcjonalność, którą stworzysz w przyszłości, będzie rozpoczynać się od tutaj.

main.jsx

To plik, który łączy twoją aplikację React z rzeczywistą stroną internetową.

To on mówi React dokładnie, gdzie w DOM ma renderować twoja aplikacja.

package.json

Tutaj znajdziesz metadane twojego projektu, wraz z jego zależnościami oraz skryptami używanymi do uruchamiania lub budowania aplikacji.

node_modules

To katalog zawiera wszystkie pakiety, od których zależy twój projekt.

Nie ruszaj go – nie ma powodu, by ręcznie modyfikować cokolwiek w jego wnętrzu.

Zrób swoją pierwszą zmianę

Otwórz App.jsx i zastąp zawartość szablonową następującym tekstem:

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

Zapisz plik i obserwuj przeglądarkę.

Czy zauważyłeś to? Strona została zaktualizowana sama, bez konieczności ręcznego odświeżania.

Takie zachowanie nazywa się Hot Module Replacement, czyli HMR.

Takie małe udogodnienia łączą się ze sobą, oszczędzając znaczny czas w trakcie całego życia projektu.

Rozwijający w Angular: oto co się różni

Pochodząc z Angular, uznasz ogólny proces pracy za znajomy, tylko bez tak wielu formalności.

React skupia się na elastyczności, pozwalając tworzyć rzeczy na swój własny sposób, podczas gdy Angular od początku posiada większą strukturę wbudowaną w kod.

Żaden z tych podejść nie jest obiektywnie lepszy — po prostu rozwiązują problem w inny sposób.

Częste błędy popełniane przez początkujących

Gdy będziesz się przyzwyczajał do React, prawdopodobnie napotkasz kilka powtarzających się problemów.

  • Zapomnienie o wykonyaniu polecenia npm install
  • Wykonywanie poleceń z niewłaściwego katalogu, poza folderem projektu
  • Wprowadzanie zmian w katalogu node_modules
  • Praca z przestarzałą wersją Node.js
  • Zamykanie okna terminala, gdy serwer rozwojowy nadal jest uruchomiony

    • Gdy już rozpoznasz te wzorce, będzie łatwo ich unikać.

    Co się nauczyłeś

    Pracując nad tym artykułem, omówiłeś:

    • Uzasadnienie konieczności posiadania dedykowanego środowiska rozwojowego dla React
    • To, za co faktycznie odpowiadają Node.js i npm
    • Dlaczego Vite stał się standardowym narzędziem do tworzenia projektów React
    • Kroki niezbędne do utworzenia szkieletu i uruchomienia pierwszej aplikacji React
    • Do czego służy każdy z podstawowych plików projektu
    • Jak Hot Module Replacement zmienia sposób iteracji nad kodem

    W tym momencie masz wszystko, co potrzebne, aby zacząć tworzyć prawdziwe aplikacje React.

    Wyzwanie praktyczne

    Zanim przejdziesz do następnej części, spróbuj rozwiązać następujące ćwiczenia:

    • Stwórz zupełnie nowy projekt React za pomocą Vite.
    • Zmodyfikuj tekst nagłówka w pliku App.jsx.
    • Dodaj krótkie wprowadzenie z własnym imieniem.
    • Zmień kolor tekstu za pomocą CSS.
    • Zatrzymaj się i ręcznie uruchom ponownie serwer rozwojowy.

    Rozpracowanie tych kroków na własną rękę to najszybsza droga do zdobycia pewności siebie w obsłudze tego zestawu narzędzi.

    Co dalej?

    Gdy twoje środowisko jest gotowe, następnym krokiem jest zgłębienie jednej z podstawowych koncepcji React.

    Część 3 poświęcona jest JSX – składni, która łączy zapis przypominający HTML bezpośrednio z kodem JavaScript.

    Będziesz omawiać:

    • To, czym właściwie jest JSX
  • Uzasadnienie użycia JSX w React
  • Zasady, których przestrzega JSX
  • Sposób działania wyrażeń w JSX
  • Różnice między HTML a JSX
  • Częste błędy popełniane przez początkujących
  • Praktyki zapewniające czystość i czytelność kodu JSX

    • Gdy skończysz czytać ten artykuł, będziesz gotowy, by z pewnością siebie pisać własne komponenty React.

    Literatura pokrewna

    Wszystkie artykułyWyślij brief