Konfiguracja projektu: Vite, układ i serwer deweloperski
Proszę utworzyć aplikację React za pomocą Vite (lub podobnego narzędzia), poznać podstawowy układ folderów, uruchomić serwer deweloperski oraz sprawdzić renderowanie za pomocą małego komponentu.
Konfiguracja projektu: Vite, układ i serwer deweloperski to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 3 lekcji w sumie.
Przegląd konfiguracji
Cel: szybko utworzyć projekt, poznać układ folderów i uruchomić serwer deweloperski z funkcją hot reload.
- Inicjalizacja projektu za pomocą Vite (lub podobnego narzędzia)
- Lokalizacja plików
- Uruchomienie i sprawdzenie aplikacji
Wymagania wstępne
Wymagania wstępne:
- Zainstalowane Node.js LTS i npm
- Dostęp do terminala
- Podstawowa znajomość CLI (cd, ls)
Utworzenie szkieletu za pomocą Vite
Utwórz projekt za pomocą szybkiego narzędzia:
- Utwórz szkielet projektu (np. npm create vite@latest)
- Wybierz React (JavaScript)
- Zainstaluj zależności (npm install)
Najważniejsze elementy folderów
Układ (typowy):
- index.html: zawiera
div#root - src/main.jsx: tworzy root i renderuje App
- src/App.jsx: zawiera komponent
Uruchamianie serwera deweloperskiego
Serwer deweloperski:
- Uruchom za pomocą npm run dev
- Otwórz lokalny adres URL
- Edytuj App.jsx; zmiany pojawią się natychmiast (hot reload)
Sprawdzanie renderowania
Wyrenderuj niewielki komponent App, aby potwierdzić poprawność konfiguracji; zmień tekst, aby zobaczyć działanie funkcji hot reload.
<div id="root"></div>
Plik z punktem montowania
Podsumowanie
Podsumowanie: utwórz szkielet za pomocą Vite, dowiedz się, gdzie znajdują się pliki index.html, main.jsx i App.jsx, uruchom serwer deweloperski i sprawdź renderowanie za pomocą niewielkiego komponentu.
Często zadawane pytania
Czy lekcja „Konfiguracja projektu: Vite, układ i serwer deweloperski” jest bezpłatna?
Tak — pełny tekst „Konfiguracja projektu: Vite, układ i serwer deweloperski” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Konfiguracja projektu: Vite, układ i serwer deweloperski”?
Proszę utworzyć aplikację React za pomocą Vite (lub podobnego narzędzia), poznać podstawowy układ folderów, uruchomić serwer deweloperski oraz sprawdzić renderowanie za pomocą małego komponentu. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.
Ile czasu zajmuje lekcja „Konfiguracja projektu: Vite, układ i serwer deweloperski”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- React: wprowadzenie, koncepcje i konfiguracja
- Konfiguracja projektu: Vite, układ i serwer deweloperski
- Pierwszy komponent i renderowanie