Come installare React su Windows? La guida completa

ReactJS è una libreria JavaScript open source gratuita che ha cambiato in modo significativo le antiche tecniche di sviluppo del frontend. Reso pubblico nel 2013, React era un progetto interno di Facebook. Da allora, React è stato adottato da varie organizzazioni e startup. Gli sviluppatori front-end con una conoscenza sufficiente di JavaScript, HTML e CSS possono creare interfacce utente interattive per applicazioni web e mobili. Uno dei maggiori vantaggi di ReactJS è il suo approccio basato sui componenti. La creazione di componenti riutilizzabili incapsulati con il proprio stato indipendente semplifica le complesse interfacce utente.

È interessante notare che qualunque cosa scriviamo in ReactJS potrebbe sembrare HTML, ma non lo è. È noto come JSX, file JavaScript XML. Questo JSX produce "elementi" di React, che vengono renderizzati nel Document Object Model. In parole povere, JSX ci consente di scrivere la logica JavaScript all'interno del corpo HTML. Rendendo così React molto più semplice e facile da capire.

Per fare il suo uso ideale, tuffiamoci per imparare come installare React JS in Windows.

Come installare React JS su Windows?

Requisiti di sistema per Windows

Sebbene l'utilizzo di ReactJs sia abbastanza indolore, il processo di installazione di React JS in Windows può essere piuttosto noioso. Poiché ReactJS è un progetto open source, non è semplice come scaricare software da Internet. Innanzitutto, ci sono alcuni prerequisiti per utilizzare ReactJS su Windows.

1. Versione Windows: Windows XP, Windows 7 (32/64 bit) o ​​superiore.
2. Minimo 4 GB di RAM richiesti.
3. Almeno 10 GB di spazio su disco sul disco rigido.
4. Un browser Internet come Chrome, Microsoft Edge, Firefox ecc.
5. Un editor per eseguire il debug e testare il codice scritto in ReactJS.

Impara i corsi di sviluppo software online dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzata o programmi di master per accelerare la tua carriera.

Download e installazione di Node.js

Node.js è il server che ti aiuta a eseguire il codice ReactJS sul tuo sistema. Proprio come ReactJS, è anche open source. Il programma di installazione Node.js include NPM (Node Package Manager), che contiene vari moduli nodo che gli sviluppatori utilizzano per ospitare e pubblicare i propri moduli nelle comunità open source. Pertanto il nodo funziona fianco a fianco con il registro NPM, il che semplifica l'installazione di qualsiasi pacchetto utilizzando la CLI NPM. Il nodo racchiude ulteriormente l'applicazione ReactJS in un unico pacchetto web utilizzando per una facile installazione.

Ecco la procedura passo passo per scaricare e installare Node.js:

1. Per installare Node.js vai su https://nodejs.org/en/ .
2. A seconda della versione del tuo sistema operativo Windows, devi scegliere un programma di installazione adatto.
3. La home page di Node.js consiglia una versione LTS a seconda del sistema operativo. Cliccandoci sopra partirà automaticamente il download.
4. Troverai il programma di installazione nella cartella dei download. Esegui il programma di installazione.
5. Sullo schermo apparirà una procedura guidata di installazione, che richiederà il contratto di licenza con l'utente finale. Accetta i termini e le condizioni per procedere con l'installazione.
6. Quindi l'utente deve selezionare una cartella di destinazione con il percorso predefinito del programma di installazione. Fare clic su Avanti per procedere.
7. Il programma di installazione mostra quindi le funzionalità che verranno installate e imposta anche le variabili del percorso di ambiente sul prompt dei comandi. Fare clic su Avanti per iniziare l'installazione.
8. Al termine dell'installazione, verifica Node.js nel tuo sistema utilizzando il prompt dei comandi.
9. Digita "node -v" nel prompt dei comandi per verificare la versione di Node.js installata.
10. Digita "npm -v" nel prompt dei comandi per verificare anche l'installazione di npm.

Installazione di React

Dopo l'installazione di Node.js, possiamo installare React JS su Windows utilizzando due tecniche:

• Usando il pacchetto web e Babel

1. Creazione della cartella principale

Prima di installare ReactJS, crea una cartella radice con il nome "reactFile" utilizzando i seguenti comandi nel prompt dei comandi.

C:\Users\username\Desktop>mkdir reactFile

C:\Users\username\Desktop>cd reactFile

Dopo aver creato la directory, genera un file package.json utilizzando il seguente comando nel prompt dei comandi. Un file package.json aiuta a creare moduli.

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

Il prompt dei comandi richiede quindi informazioni relative al modulo; saltalo selezionando l'opzione "-y".

2. Installa React e react-dom

Installa i pacchetti React e react-dom utilizzando i seguenti comandi npm e aggiungi i pacchetti al file package.json utilizzando il comando "-save".

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

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

Esplora i nostri corsi gratuiti di sviluppo software

3. Installa Webpack

Installa webpack, webpack-dev-server e webpack-cli utilizzando i seguenti comandi.

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

4. Installa Babele

Babel è un transpiler che converte il codice JavaScript in qualcosa che il browser comprende. Pertanto, l'installazione di Babel e dei suoi plug-in seguenti, ovvero babel-loader, babel-preset-env, babel-preset-react e html-webpack-plugin, è molto importante.

Usa il seguente comando per installare tutti i plugin babel contemporaneamente.

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

5. Crea file ReactJS

Per completare il processo di installazione, dobbiamo creare manualmente determinati file utilizzando il prompt dei comandi.

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

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

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

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

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

6. Configurare compilatore, server e caricatori

Una volta creati questi file ReactJS all'interno della cartella "reactFile", è possibile preparare il server di distribuzione impostandolo sulla porta 8001 o su qualsiasi porta desiderata in webpack.-config.js.

Usa il seguente codice nel file webpack-config.js,

const percorso = require('percorso');

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

modulo.esporta = {

voce: './main.js',

produzione: {

percorso: percorso.join(__dirname, '/bundle'),

nome file: 'index_bundle.js'

},

server di sviluppo: {

in linea: vero,

porto: 8001

},

modulo: {

regole: [

{

prova: /\.jsx?$/,

escludi: /node_modules/,

caricatore: 'babel-caricatore',

domanda: {

preimpostazioni: ['es2015', 'reagire']

}

}

]

},

plugin:[

new HtmlWebpackPlugin({

modello: './index.html'

})

]

}

7. Configurazione di index.html

All'interno di index.html scrivi un normale codice HTML con div id="app" come elemento radice e poi aggiungi ulteriormente lo script index_bundle.js nel corpo HTML.

Competenze di sviluppo software richieste

8. Configurazione di App.js e main.js

Scrivi il componente React all'interno di App.js per eseguire il rendering di una classe o di una funzione. Inserisci il testo che vuoi renderizzare all'interno del componente, che comparirà sul browser una volta compilato. Quindi importa il componente nel nostro elemento App root all'interno di main.js in modo che i risultati vengano visualizzati nel browser.

Crea un file “.babelrc” e inserisci le seguenti righe di codice,

{

“preimpostazioni”:[“env”, “reagire”]

}

9. Visualizzazione del contenuto sulla pagina web

L'installazione è finalmente completa e il server sarà attivo e funzionante una volta digitato il seguente comando nel prompt dei comandi.

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

Non appena premi invio, il browser ti mostrerà il messaggio che hai reso all'interno del componente.

• Utilizzo del comando create-react-app

1. Installa l'app create-react

Apri il prompt dei comandi e scrivi il seguente codice per installare l'app create-react.

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

Questo comando installa tutti i file e le cartelle richiesti all'interno della cartella "my-app" del desktop. Questa riga di codice completa l'installazione di React nel tuo sistema in pochi minuti.

2. Eseguire il server

Vai al prompt dei comandi e digita

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

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

Il tuo progetto React è attivo e funzionante sul tuo browser con l'aiuto di localhost, che ospita il tuo progetto sulla porta disponibile.

Esplora i nostri famosi corsi di ingegneria del software

Conclusione

ReactJS ha cambiato il gioco di sviluppo frontend sin dal suo rilascio ed è cresciuto fino a diventare una delle librerie JavaScript open source più popolari. Diverse aziende, come Meta, Netflix e Slack, utilizzano ReactJS. Uno dei maggiori vantaggi è la riutilizzabilità dei componenti per il rendering delle modifiche nella pagina web. Diverse app React vengono distribuite nell'app Web di Azure usando Azure DevOps. Questa è una delle competenze più ricercate nel settore IT ora.

Se sei uno sviluppatore React, puoi migliorare il tuo set di competenze conoscendo Azure DevOps tramite l' Advanced Certificate Program di upGrad in DevOps di IIIT Bangalore . Il corso offre più di 250 ore di moduli di apprendimento insieme a una guida alla preparazione del colloquio. Potrai anche partecipare a sessioni di tutoraggio professionale con esperti DevOps che possono darti una chiara tabella di marcia di ciò che il settore si aspetta. Alla fine del corso ricevi un certificato e lo status di ex-alunno IIITB, che lo rende un'aggiunta eccezionale al tuo curriculum!