Utworzenie środowiska programistycznego React jest łatwe

Pierwsze kroki w programowaniu internetowym z Reactem mogą być ekscytującym wyzwaniem. Jesteś tutaj, ponieważ chcesz nauczyć się, jak szybko i wydajnie skonfigurować swoje środowisko programistyczne i rozpocząć swój pierwszy projekt. Ten przewodnik zaprowadzi Cię przez niezbędne kroki do stworzenia aplikacji React z użyciem Vite jako narzędzia do budowania.

Najważniejsze wnioski

Aby skonfigurować środowisko programistyczne dla Reacta, potrzebujesz Visual Studio Code, Node.js oraz NPM. Dzięki odpowiednim poleceniom i narzędziom szybko i łatwo możesz stworzyć swoją pierwszą aplikację React i wyświetlić ją w przeglądarce.

Instrukcja krok po kroku

Skonfiguruj środowisko programistyczne

Przed rozpoczęciem właściwego programowania musisz upewnić się, że dysponujesz odpowiednimi narzędziami. Po pierwsze, zainstaluj Visual Studio Code. Jest to popularne i darmowe środowisko programistyczne od Microsoftu, specjalizujące się w programowaniu w języku JavaScript. Aby pobrać Visual Studio Code, odwiedź oficjalną stronę i postępuj zgodnie z instrukcjami dotyczącymi pobierania i instalacji.

Podstawowym wymaganiem obok Visual Studio Code jest Node.js, zapewniający środowisko uruchomieniowe JavaScript oraz NPM, menedżer pakietów. Node.js można pobrać ze strony internetowej Node.js. Kliknij na stronie pobierania i wybierz wersję LTS (długoterminowe wsparcie), aby uzyskać stabilną i sprawdzoną wersję.

Instalacja i sprawdzenie Node.js i NPM

Po zainstalowaniu Node.js warto sprawdzić, czy wszystko zostało zainstalowane poprawnie. Otwórz terminal. Możesz to zrobić bezpośrednio w Visual Studio Code, przechodząc do "Terminal" a następnie "Nowe terminal". Wpisz polecenie npm -v w terminalu. Jeśli nie wyświetli się numer wersji, może być problem z instalacją.

Warto również upewnić się, że Node.js działa poprawnie. Możesz to zrobić, wpisując polecenie node -v w terminalu. Oba polecenia powinny zwrócić zainstalowaną wersję NPM i Node.js.

Tworzenie nowego projektu przy użyciu Vite

Następnym krokiem jest stworzenie nowego projektu. Do tego celu użyj polecenia npm create vite, a następnie nazwę swojej aplikacji. W tym przykładzie pracujemy nad "Aplikacją do zadań". Spowoduje to uruchomienie kreatora, który oferuje różne opcje. Zostaniesz zapytany, czy chcesz użyć Reacta lub innego frameworka. Wybierz "React".

Następnie zostaniesz zapytany, czy chcesz korzystać z Reacta z TypeScriptem. Na początek zaleca się pracować bez TypeScriptu, dlatego wybierz standardową opcję "React".

Przejście do katalogu projektu

Po skutecznym utworzeniu projektu przejdź do nowo utworzonego katalogu swojej aplikacji. Można to zrobić za pomocą polecenia cd todo-app. Po dotarciu tam, należy zainstalować wymagane pakiety. Wpisz polecenie npm install w terminalu. Spowoduje to zainstalowanie wszystkich potrzebnych zależności, w tym Reacta.

Rozpoczęcie serwera deweloperskiego

Teraz nadchodzi interesująca część: możesz uruchomić serwer deweloperski! Wpisz polecenie npm run dev. Uruchomi to serwer deweloperski z Vite, a otrzymasz adres URL, pod którym można otworzyć aplikację w przeglądarce.

Otwórz nowoczesną przeglądarkę internetową i wpisz podany adres. Powinieneś zobaczyć prostą stronę z obracającym się logiem oraz tekstem, a także przyciskiem wyświetlającym licznik.

Modyfikacje aplikacji

Aby uzyskać pierwsze wrażenia z funkcjonalności, możesz wprowadzić niewielkie zmiany w aplikacji. Otwórz plik src/main.jsx i zmień tekst w komponencie aplikacji. Zapisz plik i obserwuj, jak zmiany są natychmiast odzwierciedlane w przeglądarce, bez konieczności ponownego ładowania strony. To pokazuje, jak efektywne jest gorące przeładowywanie w Vite - doskonała funkcja dla szybkiej informacji zwrotnej podczas programowania.

Zauważ, że stan licznika pozostaje nienaruszony, nawet gdy tekst jest aktualizowany. To jeden z atutów Reacta: stan pozostaje, nawet gdy interfejs użytkownika zostaje zaktualizowany.

Podsumowanie

Skonfigurowałeś pomyślnie swoje środowisko deweloperskie, zainstalowałeś Node.js i NPM, utworzyłeś nowy projekt React i uruchomiłeś go w swojej przeglądarce. Podstawy konfiguracji aplikacji React z Vite zostały ustanowione, więc teraz możesz zacząć pracę nad swoją pierwszą aplikacją.