Ustawienie frontendu w React z użyciem Node, npm i Vite
Przyporządkuj narzędzia w stylu Pythona do stacku React plus Vite: zainstaluj Node, zignoruj folder node_modules, utwórz szkielet projektu za pomocą Vite i uruchom lokalny serwer rozwojowy.
Przejście z narzędzi Pythona na portfolio oparte na React zazwyczaj zaczyna się od prostego pytania: które elementy zastępują venv, pip oraz requirements.txt?
Python izoluje pakiety w środowisku wirtualnym i definiuje je w pliku z wymaganiami. Frontend React wykorzystuje zupełnie inny zestaw narzędzi. Node.js dostarcza środowisko wykonawcze, npm instaluje pakiety, a Vite tworzy szybką aplikację lokalną. Poniższe kroki umożliwiają stworzenie środowiska React z Vite w pustej folderze.
1. Zainstaluj Node.js
Narzędzia React wymagają Node.js, który zawiera w sobie npm (Node Package Manager). Po zainstalowaniu Node z oficjalnej dystrybucji dostosowanej do twojego systemu operacyjnego, sprawdź oba pliki w terminalu:
node --version
npm --version
npm pełni rolę podobną do pip: pobiera biblioteki i rejestruje ich wersje dla projektu. W tym procesie nie tworzy się oddzielnego środowiska wirtualnego typu virtualenv w stylu Pythona; izolację zapewniają Node oraz lokalne drzewo node_modules projektu.
2. Stworzenie repozytorium na GitHubie
Stwórz nowe repozytorium na GitHubie dla strony. Zainicjuj je plikiem README.md oraz plikiem .gitignore dostosowanym do pracy nad interfejsem użytkownika. Przynajmniej plik ignore powinien zawierać:
node_modules/
dist/
.env
.env.*
Nigdy nie zapisuj pliku node_modules. Te pakiety są lokalnymi artefaktami. Każdy, kto sklonuje repozytorium, może je odtworzyć za pomocą polecenia npm install na podstawie pliku package.json. Sekrety również należy unikać w Git: pliki .env i .env.* powinny znaleźć się na liście do ignorowania, aby klucze API nigdy nie trafiły do historii zmian.
3. Sklonowanie lub otwarcie projektu lokalnie
Klonuj repozytorium lub utwórz folder na dysku, a następnie otwórz go w VS Code (lub innym edytorze). Praca w tym katalogu zapewnia, że szkielet Vite oraz późniejsze polecenia npm pozostaną umieszczone we właściwym miejscu.
4. Inicjalizacja React z Vite
Vite umożliwia szybkie uruchomienie nowoczesnych aplikacji front-end oraz dostarcza responsywnego serwera rozwojowego. Z korzenia projektu uruchom:
npm create vite@latest .
Zakończenie . informuje narzędzie tworzące szkielet o umieszczeniu plików w bieżącym katalogu, zamiast tworzenia zakładanej struktury folderów. Gdy pojawią się prośby, wybierz:
Framework: React
Variant: JavaScript
Część wersji pyta również o narzędzie do sprawdzania składni. Jego użycie pomaga wcześnie wykryć problemy składniowe i stylistyczne; zasady można dostosować później.
5. Instalacja zależności
Jeśli narzędzie tworzące szkielet nie zainstalowało pakietów automatycznie, uruchom:
npm install
npm czyta plik package.json, tworzy katalog node_modules i instaluje wszystkie wymienione zależności. Ten katalog jest duży i zależny od konkretnego sprzętu, dlatego nie znajduje się w systemie kontroli wersji.
6. Uruchomienie serwera rozwojowego
Zainstaluj lokalny serwer za pomocą:
npm run dev
Vite wyświetla lokalną adres URL, zazwyczaj:
http://localhost:5173/
Otwórz ten adres w przeglądarce. Edytowanie i zapisywanie kodu źródłowego React powinno odświeżać stronę poprzez mechanizm aktualizacji na żywo Vite podczas rozwoju, dzięki czemu zobaczysz zmiany w interfejsie bez konieczności za każdym razem ręcznego odświeżania strony.
Python kontra React: Różnica, która mi pomogła
Schemat, który rozwiewa zamieszanie, wygląda następująco. Typowy projekt w Pythonie funkcjonuje w ten sposób:
Python → venv → pip → requirements.txt
Projekt oparty na React i Vite funkcjonuje w ten sposób:
Node.js → npm → package.json → node_modules
Portfel Reacta nie wymaga Pythona z użyciem venv. Node.js jest środowiskiem wykonywania, npm służy do instalacji, package.json to plik manifestu, a node_modules przechowuje zainstalowane pakiety. Dzięki oddzieleniu tych funkcji unika się łączenia zwyczajów związanych z Pythonem z interfejsem front-endowym w JavaScriptzie.
Ostateczne uwagi
Dla osób przychodzących z świata Pythona lub nauk o danych, konfiguracja skupiona wokół Node może wydawać się niejasna, dopóki nie stanie się jasne zadanie każdego narzędzia. Gdy Node.js, npm, React i Vite będą dobrze skonfigurowane, droga do realizacji celów jest krótka:
Create repository
↓
Open project in VS Code
↓
Initialize React + Vite
↓
Install dependencies
↓
npm run dev
↓
Build!
Gdy ta łańcuchowa struktura będzie gotowa, środowisko front-endowe Reacta będzie gotowe do pracy nad portfelem oraz do dodawania dalszych bibliotek za pośrednictwem npm.
Pozycje pokrewne
- Zamiana ESLint i Prettier na Biome: Szybkość kontra zasada Hooks, której nadal potrzebujesz — Czas wykonywania zadań w Biome w porównaniu z ESLint i Prettier, różnice pomiędzy react-hooks a exhaustive-deps oraz kiedy podczas współdzielenia pracy dwóch narzędzi, użycie jednego pluginu ESLint jest najbardziej uczciwym rozwiązaniem migracyjnym.
- Przestań synchronizować stan z useEffect: Bezpieczniejszy wzorzec React — Dowiedz się, dlaczego używanie useEffect do synchronizacji stanu pochodnego powoduje sytuacje konkurencyjne i dodatkowe renderowania, oraz jak zastąpić to metodą wytwarzania stanu w czasie renderowania i użyciem atrybutu key.