Cum se instalează React pe Windows? Ghidul complet

ReactJS este o bibliotecă JavaScript gratuită, cu sursă deschisă, care a schimbat semnificativ tehnicile de dezvoltare frontend vechi. Făcut public în 2013, React a fost un proiect intern al Facebook. De atunci, React a fost adoptat de diverse organizații și startup-uri. Dezvoltatorii front-end cu cunoștințe suficiente despre JavaScript, HTML și CSS pot crea interfețe de utilizator interactive atât pentru aplicații web, cât și pentru cele mobile. Unul dintre cele mai mari avantaje ale ReactJS este abordarea bazată pe componente. Construirea de componente reutilizabile încapsulate cu propria lor stare independentă simplifică interfețele complexe cu utilizatorul.

Interesant, orice am scrie în ReactJS ar putea părea HTML, dar nu este. Este cunoscut ca fișier JSX, JavaScript XML. Acest JSX produce „elemente” React, care sunt redate în Document Object Model. În termeni profani, JSX ne permite să scriem logica JavaScript în corpul HTML. Astfel, React este mult mai simplu și ușor de înțeles.

Pentru a-i folosi ideal, haideți să învățăm cum să instalați React JS în Windows.

Cum se instalează React JS pe Windows?

Cerințe de sistem pentru Windows

În timp ce utilizarea ReactJs este destul de nedureroasă, procesul de instalare a React JS în Windows poate fi destul de obositor. Deoarece ReactJS este un proiect open-source, nu este la fel de simplu ca descărcarea de software de pe internet. În primul rând, există câteva condiții prealabile pentru utilizarea ReactJS pe Windows.

1. Versiunea Windows: Windows XP, Windows 7 (32/64 biți) sau o versiune ulterioară.
2. Sunt necesare minimum 4 GB RAM.
3. Un minim de 10 GB spațiu pe disc pe hard disk.
4. Un browser de internet, cum ar fi Chrome, Microsoft Edge, Firefox etc.
5. Un editor pentru a depana și a testa codul scris în ReactJS.

Învață cursuri de dezvoltare software online de la cele mai bune universități din lume. Câștigați programe Executive PG, programe avansate de certificat sau programe de master pentru a vă accelera cariera.

Descărcarea și instalarea Node.js

Node.js este serverul care vă ajută să rulați codul ReactJS pe sistemul dvs. La fel ca ReactJS, este, de asemenea, open source. Programul de instalare Node.js include NPM (Node Package Manager), care conține diverse module de noduri pe care dezvoltatorii le folosesc pentru a găzdui și a publica propriile module în comunitățile open-source. Astfel, Nodul lucrează cot la cot cu registrul NPM, ceea ce facilitează instalarea oricărui pachet folosind NPM CLI. Node înglobează în continuare aplicația ReactJS într-un singur pachet web care utilizează pachete web pentru o instalare ușoară.

Iată procedura în pas pentru a descărca și instala Node.js:

1. Pentru a instala Node.js, accesați https://nodejs.org/en/ .
2. În funcție de versiunea sistemului de operare Windows, trebuie să alegeți un program de instalare adecvat.
3. Pagina de pornire Node.js recomandă o versiune LTS în funcție de sistemul dvs. de operare. Făcând clic pe acesta, va începe automat descărcarea.
4. Veți găsi programul de instalare în folderul de descărcări. Rulați programul de instalare.
5. Pe ecran va apărea un expert de configurare, care va solicita Acordul de licență pentru utilizatorul final. Acceptați termenii și condițiile pentru a continua instalarea.
6. Apoi, utilizatorul trebuie să selecteze un folder de destinație cu calea implicită a programului de instalare. Faceți clic pe următorul pentru a continua.
7. Programul de instalare arată apoi caracteristicile care vor fi instalate și, de asemenea, setează variabilele căii de mediu la promptul de comandă. Faceți clic pe lângă pentru a începe instalarea.
8. După finalizarea instalării, verificați Node.js în sistemul dvs. utilizând promptul de comandă.
9. Tastați „node -v” în promptul de comandă pentru a verifica versiunea Node.js instalată.
10. Tastați „npm -v” în promptul de comandă pentru a verifica și instalarea npm.

Instalarea React

După instalarea Node.js, putem instala React JS pe Windows utilizând două tehnici:

• Folosind pachetul web și Babel

1. Crearea dosarului rădăcină

Înainte de a instala ReactJS, creați un folder rădăcină cu numele „reactFile” folosind următoarele comenzi din promptul de comandă.

C:\Users\username\Desktop>mkdir reactFile

C:\Users\username\Desktop>cd reactFile

După crearea directorului, generați un fișier package.json utilizând următoarea comandă din promptul de comandă. Un fișier package.json ajută la crearea modulelor.

C:\Users\username\Desktop>reactFile> npm init

Promptul de comandă solicită apoi informații despre modul; omiteți-l selectând opțiunea „-y”.

2. Instalați React și react-dom

Instalați pachetele React și react-dom folosind următoarele comenzi npm și adăugați pachetele în fișierul package.json folosind comanda „-save”.

C:\Users\username\Desktop>reactFile> npm install react –save

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

Explorați cursurile noastre gratuite de dezvoltare software

3. Instalați Webpack

Instalați webpack, webpack-dev-server și webpack-cli folosind următoarele comenzi.

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

4. Instalați Babel

Babel este un transpiler care convertește codul JavaScript în ceva pe care browserul îl înțelege. Astfel, instalarea Babel și a următoarelor pluginuri, și anume, babel-loader, babel-preset-env, babel-preset-react și html-webpack-plugin, este foarte importantă.

Utilizați următoarea comandă pentru a instala toate pluginurile babel simultan.

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

5. Creați fișiere ReactJS

Pentru a finaliza procesul de instalare, trebuie să creăm manual anumite fișiere folosind promptul de comandă.

C:\Users\username\Desktop\reactFile>type nul > index.html

C:\Users\username\Desktop\reactFile>type nul > App.js

C:\Users\username\Desktop\reactFile>type nul > main.js

C:\Users\username\Desktop\reactFile>type nul> webpack.config.js

C:\Users\username\Desktop\reactFile>type nul > .babelrc

6. Configurați compilatorul, serverele și încărcătoarele

Odată ce aceste fișiere ReactJS sunt create în folderul „reactFile”, puteți pregăti serverul de implementare setându-l la portul 8001 sau orice port doriți în webpack.-config.js.

Utilizați următorul cod în fișierul webpack-config.js,

const cale = require('cale');

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

module.exports = {

intrare: „./main.js”,

ieșire: {

cale: path.join(__dirname, '/bundle'),

nume de fișier: „index_bundle.js”

},

devServer: {

inline: adevărat,

port: 8001

},

modul: {

reguli: [

{

test: /\.jsx?$/,

exclude: /node_modules/,

încărcător: „babel-loader”,

interogare: {

presetări: ['es2015', 'react']

}

}

]

},

pluginuri:[

nou HtmlWebpackPlugin({

șablon: „./index.html”

})

]

}

7. Configurarea index.html

În interiorul index.html scrieți un cod HTML obișnuit cu div id="app” ca element rădăcină și apoi adăugați scriptul index_bundle.js în corpul HTML.

Abilități de dezvoltare software la cerere

8. Configurarea App.js și main.js

Scrieți componenta React în App.js pentru a reda o clasă sau o funcție. Introduceți textul pe care doriți să îl redați în interiorul componentei, care va apărea în browser odată compilat. Apoi importați componenta în elementul rădăcină al aplicației din main.js, astfel încât rezultatele să apară în browser.

Creați un fișier „.babelrc” și introduceți următoarele linii de cod,

{

„presetări”:[“env”, „reacționează”]

}

9. Afișarea conținutului pe pagina web

Configurarea este în sfârșit finalizată, iar serverul va fi pornit și rulează odată ce tastați următoarea comandă în promptul de comandă.

C:\Users\username\Desktop\reactFile>npm start

De îndată ce apăsați enter, browserul vă va afișa mesajul pe care l-ați redat în interiorul componentei.

• Folosind comanda create-react-app

1. Instalați aplicația create-react

Deschideți promptul de comandă și scrieți următorul cod pentru a instala aplicația create-react-app.

C:\Users\username\Desktop>npx create-react-app my-app

Această comandă instalează toate fișierele și folderele necesare în folderul „aplicația mea” de pe desktop. Această linie de cod finalizează instalarea lui React în sistemul dumneavoastră în câteva minute.

2. Rulați serverul

Accesați linia de comandă și tastați

C:\Users\username\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm start

Proiectul tău React funcționează în browser cu ajutorul localhost, care găzduiește proiectul tău pe portul disponibil.

Explorați cursurile noastre populare de inginerie software

Concluzie

ReactJS a schimbat jocul de dezvoltare frontend de la lansarea sa și a devenit una dintre cele mai populare biblioteci JavaScript open-source. Mai multe companii, cum ar fi Meta, Netflix și Slack, folosesc ReactJS. Unul dintre cele mai mari avantaje este reutilizarea componentelor pentru a reda modificările în pagina web. Mai multe aplicații React sunt implementate în Azure Web App folosind Azure DevOps. Aceasta este una dintre cele mai căutate abilități în industria IT acum.

Dacă sunteți dezvoltator React, vă puteți îmbunătăți setul de abilități cunoscând Azure DevOps prin programul de certificat avansat al upGrad în DevOps de la IIIT Bangalore . Cursul oferă mai mult de 250 de ore de module de învățare împreună cu un ghid de pregătire a interviului. De asemenea, veți putea participa la sesiuni de mentorat în carieră cu experți DevOps, care vă pot oferi o foaie de parcurs clară a ceea ce se așteaptă industria. Primești un certificat și statut de absolvent IIITB la sfârșitul cursului, ceea ce îl face un plus excepțional la CV-ul tău!