Jak zainstalować React w systemie Windows? Kompletny przewodnik

ReactJS to bezpłatna biblioteka JavaScript o otwartym kodzie źródłowym, która znacząco zmieniła odwieczne techniki programowania frontendów. Upubliczniony w 2013 roku React był autorskim projektem Facebooka. Od tego czasu React został przyjęty przez różne organizacje i startupy. Programiści frontendowi z wystarczającą znajomością JavaScript, HTML i CSS mogą tworzyć interaktywne interfejsy użytkownika zarówno dla aplikacji internetowych, jak i mobilnych. Jedną z największych zalet ReactJS jest podejście oparte na komponentach. Budowanie hermetyzowanych komponentów wielokrotnego użytku z własnym niezależnym stanem upraszcza złożone interfejsy użytkownika.

Co ciekawe, cokolwiek napiszemy w ReactJS, może wyglądać jak HTML, ale tak nie jest. Jest znany jako plik JSX, JavaScript XML. Ten JSX tworzy „elementy” Reacta, które są renderowane w Document Object Model. W kategoriach laika JSX pozwala nam pisać logikę JavaScript w treści HTML. Dzięki temu React jest znacznie prostszy i łatwiejszy do zrozumienia.

Aby idealnie go wykorzystać, przyjrzyjmy się, jak zainstalować React JS w systemie Windows.

Jak zainstalować React JS w systemie Windows?

Wymagania systemowe dla systemu Windows

Podczas gdy korzystanie z ReactJs jest dość bezbolesne, proces instalacji React JS w systemie Windows może być dość żmudny. Ponieważ ReactJS jest projektem typu open source, nie jest to tak proste, jak pobieranie oprogramowania z Internetu. Przede wszystkim istnieją pewne wymagania wstępne dotyczące używania ReactJS w systemie Windows.

1. Wersja systemu Windows: Windows XP, Windows 7 (32/64-bitowy) lub nowszy.
2. Wymagane minimum 4 GB RAM.
3. Minimum 10 GB miejsca na dysku twardym.
4. Przeglądarka internetowa, taka jak Chrome, Microsoft Edge, Firefox itp.
5. Jeden edytor do debugowania i testowania kodu napisanego w ReactJS.

Ucz się kursów programistycznych online z najlepszych światowych uniwersytetów. Zdobądź programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Pobieranie i instalowanie Node.js

Node.js to serwer, który pomaga uruchomić kod ReactJS w twoim systemie. Podobnie jak ReactJS, jest również open source. Instalator Node.js zawiera NPM (Node Package Manager), który zawiera różne moduły węzłów, których programiści używają do hostowania i publikowania własnych modułów w społecznościach open source. Dzięki temu Node działa równolegle z rejestrem NPM, co ułatwia instalację dowolnego pakietu za pomocą NPM CLI. Węzeł dalej opakowuje aplikację ReactJS w jedną za pomocą pakietów internetowych dla łatwej instalacji.

Oto krok po kroku procedura pobierania i instalowania Node.js:

1. Aby zainstalować Node.js, przejdź do https://nodejs.org/en/ .
2. W zależności od wersji systemu operacyjnego Windows należy wybrać odpowiedni instalator.
3. Strona główna Node.js zaleca wersję LTS w zależności od systemu operacyjnego. Kliknięcie go automatycznie rozpocznie pobieranie.
4. Instalator znajdziesz w folderze pobierania. Uruchom instalator.
5. Na ekranie pojawi się kreator konfiguracji, który poprosi o Umowę licencyjną użytkownika końcowego. Zaakceptuj warunki, aby kontynuować instalację.
6. Następnie użytkownik musi wybrać folder docelowy z domyślną ścieżką instalatora. Kliknij Dalej, aby kontynuować.
7. Następnie instalator pokazuje funkcje, które zostaną zainstalowane, a także ustawia zmienne ścieżki środowiskowej w wierszu polecenia. Kliknij przycisk Dalej, aby rozpocząć instalację.
8. Po zakończeniu instalacji zweryfikuj Node.js w swoim systemie za pomocą wiersza polecenia.
9. Wpisz „node -v” w wierszu polecenia, aby sprawdzić zainstalowaną wersję Node.js.
10. Wpisz „npm -v” w wierszu polecenia, aby również zweryfikować instalację npm.

Instalacja Reacta

Po zainstalowaniu Node.js możemy zainstalować React JS na Windows, używając dwóch technik:

• Korzystanie z pakietu internetowego i Babel

1. Tworzenie folderu głównego

Przed zainstalowaniem ReactJS utwórz folder główny o nazwie „reactFile”, używając następujących poleceń w wierszu poleceń.

C:\Użytkownicy\nazwa_użytkownika\Pulpit>mkdir plik reakcji

C:\Użytkownicy\nazwa użytkownika\Pulpit>cd plik reakcji

Po utworzeniu katalogu wygeneruj plik package.json przy użyciu następującego polecenia w wierszu polecenia. Plik package.json pomaga w tworzeniu modułów.

C:\Users\nazwa użytkownika\Desktop>reactFile> npm init

Następnie wiersz polecenia prosi o informacje dotyczące modułu; pomiń go, wybierając opcję „-y”.

2. Zainstaluj React i reaguj-dom

Zainstaluj pakiety React i react-dom za pomocą następujących poleceń npm i dodaj pakiety do pliku package.json za pomocą polecenia „-save”.

C:\Users\username\Desktop>reactFile> npm install reaguj – zapisz

C:\Users\username\Desktop>reactFile> npm install reag-dom –save

Zapoznaj się z naszymi bezpłatnymi kursami tworzenia oprogramowania

3. Zainstaluj pakiet internetowy

Zainstaluj webpack, webpack-dev-server i webpack-cli za pomocą następujących poleceń.

C:\Users\username\Desktop>reactFile> npm install webpack-dev-server webpack-cli –save

4. Zainstaluj Babel

Babel to transpilator, który konwertuje kod JavaScript na coś zrozumiałego dla przeglądarki. Dlatego bardzo ważne jest zainstalowanie Babel i następujących wtyczek, a mianowicie babel-loader, babel-preset-env, babel-preset-react i html-webpack-plugin.

Użyj następującego polecenia, aby zainstalować wszystkie wtyczki babel jednocześnie.

C:\Users\username\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Utwórz pliki ReactJS

Aby zakończyć proces instalacji, musimy ręcznie utworzyć określone pliki za pomocą wiersza polecenia.

C:\Użytkownicy\nazwa_użytkownika\Desktop\reactFile>wpisz nul > index.html

C:\Użytkownicy\nazwa_użytkownika\Desktop\reactFile>wpisz nul > App.js

C:\Users\nazwa_użytkownika\Desktop\reactFile>wpisz nul > main.js

C:\Użytkownicy\nazwa_użytkownika\Desktop\reactFile>wpisz nul > webpack.config.js

C:\Users\nazwa_użytkownika\Desktop\reactFile>wpisz nul > .babelrc

6. Skonfiguruj kompilator, serwery i programy ładujące

Po utworzeniu tych plików ReactJS w folderze „reactFile” możesz przygotować serwer wdrażania, ustawiając go na porcie 8001 lub dowolnym porcie w pliku webpack.-config.js.

Użyj następującego kodu w pliku webpack-config.js,

stała ścieżka = wymagaj („ścieżka”);

const HtmlWebpackPlugin = require('html-webpack-plugin');

moduł.eksport = {

wpis: './main.js',

wyjście: {

ścieżka: path.join(__nazwa_katalogu, '/pakiet'),

nazwa pliku: „index_bundle.js”

},

Serwer deweloperski: {

w linii: prawda,

port: 8001

},

moduł: {

zasady: [

{

test: /\.jsx?$/,

wyklucz: /node_modules/,

ładowarka: 'babel-loader',

zapytanie: {

presety: ['es2015', 'reaguj']

}

}

]

},

wtyczki:[

nowy HtmlWebpackPlugin({

szablon: „./index.html”

})

]

}

7. Konfigurowanie pliku index.html

Wewnątrz pliku index.html napisz zwykły kod HTML z elementem div id=”app” jako elementem głównym, a następnie dodaj skrypt index_bundle.js w treści HTML.

Umiejętności tworzenia oprogramowania na żądanie

8. Konfigurowanie App.js i main.js

Napisz komponent React w pliku App.js, aby wyrenderować klasę lub funkcję. Wstaw tekst, który chcesz renderować wewnątrz komponentu, który pojawi się w przeglądarce po skompilowaniu. Następnie zaimportuj komponent do naszego głównego elementu aplikacji w pliku main.js, aby wyniki pojawiły się w przeglądarce.

Utwórz plik „.babelrc” i wstaw następujące linie kodu,

{

„presety”:[„środowiska”, „reaguj”]

}

9. Wyświetlanie Treści na Stronie Internetowej

Konfiguracja została ostatecznie zakończona, a serwer zostanie uruchomiony po wpisaniu następującego polecenia w wierszu polecenia.

C:\Użytkownicy\nazwa użytkownika\Desktop\reactFile>npm start

Jak tylko naciśniesz enter, przeglądarka wyświetli komunikat, który wyrenderowałeś w komponencie.

• Za pomocą komendy create-react-app

1. Zainstaluj aplikację twórz-reaguj

Otwórz wiersz polecenia i wpisz następujący kod, aby zainstalować aplikację create-react-app.

C:\Użytkownicy\nazwa użytkownika\Desktop>npx utwórz-reaguj-aplikację moja-aplikacja

To polecenie instaluje wszystkie wymagane pliki i foldery w folderze „moja aplikacja” na pulpicie. Ta jedna linijka kodu kończy instalację Reacta w twoim systemie w ciągu kilku minut.

2. Uruchom serwer

Przejdź do wiersza polecenia i wpisz

C:\Użytkownicy\nazwa użytkownika\Desktop>cd moja-aplikacja

C:\Users\Tutorialspoint\Desktop>moja-aplikacja> npm start

Twój projekt React jest uruchomiony w Twojej przeglądarce za pomocą hosta lokalnego, który hostuje Twój projekt na dostępnym porcie.

Zapoznaj się z naszymi popularnymi kursami inżynierii oprogramowania

Wniosek

ReactJS zmienił gry programistyczne od frontendu od czasu swojej premiery i stał się jedną z najpopularniejszych bibliotek JavaScript typu open source. Kilka firm, takich jak Meta, Netflix i Slack, używa ReactJS. Jedną z największych zalet jest możliwość ponownego wykorzystania komponentów do renderowania zmian na stronie internetowej. Kilka aplikacji React jest wdrażanych w usłudze Azure Web App przy użyciu usługi Azure DevOps. Jest to obecnie jedna z najbardziej poszukiwanych umiejętności w branży IT.

Jeśli jesteś programistą React, możesz poszerzyć swoje umiejętności, poznając Azure DevOps w ramach Advanced Certificate Program upGrad w DevOps z IIIT Bangalore . Kurs oferuje ponad 250 godzin modułów szkoleniowych wraz z przewodnikiem przygotowującym do rozmowy kwalifikacyjnej. Będziesz także mógł uczestniczyć w sesjach mentoringu kariery z ekspertami DevOps, którzy mogą przedstawić Ci jasny plan tego, czego oczekuje branża. Na zakończenie kursu otrzymujesz certyfikat i status absolwenta IIITB, co czyni go wyjątkowym dodatkiem do Twojego CV!