ReactJS - Configurazione dell'ambiente

In questo capitolo, ti mostreremo come configurare un ambiente per uno sviluppo React di successo. Si noti che sono coinvolti molti passaggi, ma ciò contribuirà ad accelerare il processo di sviluppo in seguito. Avremo bisognoNodeJS, quindi se non lo hai installato, controlla il collegamento dalla seguente tabella.

Sr.No.	Software e descrizione
1	NodeJS and NPM NodeJS è la piattaforma necessaria per lo sviluppo di ReactJS. Controlla la nostra configurazione dell'ambiente NodeJS .

Dopo aver installato con successo NodeJS, possiamo iniziare a installare React su di esso usando npm. Puoi installare ReactJS in due modi

Utilizzando webpack e babel.
Usando il create-react-app comando.

Installazione di ReactJS usando webpack e babel

Webpackè un bundler di moduli (gestisce e carica moduli indipendenti). Prende i moduli dipendenti e li compila in un unico bundle (file). È possibile utilizzare questo pacchetto durante lo sviluppo di app utilizzando la riga di comando o configurandolo utilizzando il file webpack.config.

Babel è un compilatore e transpiler JavaScript. Viene utilizzato per convertire un codice sorgente in un altro. Usando questo sarai in grado di utilizzare le nuove funzionalità di ES6 nel tuo codice dove, babel lo converte in un semplice vecchio ES5 che può essere eseguito su tutti i browser.

Passaggio 1: creare la cartella principale

Crea una cartella con il nome reactApp sul desktop per installare tutti i file richiesti, utilizzando il comando mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Per creare qualsiasi modulo, è necessario generare il file package.jsonfile. Pertanto, dopo aver creato la cartella, dobbiamo creare un filepackage.jsonfile. Per fare ciò è necessario eseguire il filenpm init comando dal prompt dei comandi.

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

Questo comando richiede informazioni sul modulo come nome pacchetto, descrizione, autore, ecc. È possibile ignorarli utilizzando l'opzione –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Passaggio 2: installa React e reagisci dom

Poiché il nostro compito principale è installare ReactJS, installarlo ei suoi pacchetti dom, usando install react e react-domrispettivamente i comandi di npm. Puoi aggiungere i pacchetti che installiamo apackage.json file utilizzando l'estensione --save opzione.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Oppure puoi installarli tutti in un unico comando come:

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

Passaggio 3: installa webpack

Dato che stiamo usando webpack per generare bundler install webpack, webpack-dev-server e webpack-cli.

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

Oppure puoi installarli tutti in un unico comando come:

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

Passaggio 4: installa babel

Installa babel e i suoi plugin babel-core, babel-loader, babel-preset-env, babel-preset-react e, html-webpack-plugin

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

Oppure puoi installarli tutti in un unico comando come:

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

Passaggio 5: creare i file

Per completare l'installazione, dobbiamo creare alcuni file, ovvero index.html, App.js, main.js, webpack.config.js e,.babelrc. È possibile creare questi file manualmente o, utilizzandocommand prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Passaggio 6: impostare compilatore, server e caricatori

Aperto webpack-config.jsfile e aggiungi il codice seguente. Stiamo impostando il punto di ingresso del webpack su main.js. Il percorso di output è il luogo in cui verrà offerta l'app in bundle. Stiamo anche impostando il server di sviluppo su8001porta. Puoi scegliere qualsiasi porta desideri.

webpack.config.js

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

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Apri il package.json ed elimina "test" "echo \"Error: no test specified\" && exit 1" dentro "scripts"oggetto. Stiamo eliminando questa riga poiché non eseguiremo alcun test in questo tutorial. Aggiungiamo il filestart e build comandi invece.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Passaggio 7: index.html

Questo è solo HTML normale. Ci stiamo ambientandodiv id = "app" come elemento radice per la nostra app e aggiungendo index_bundle.js script, che è il nostro file app in bundle.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Passaggio 8: App.jsx e main.js

Questo è il primo componente React. Spiegheremo i componenti di React in modo approfondito in un capitolo successivo. Questo componente verrà renderizzatoHello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Dobbiamo importare questo componente e renderlo alla nostra radice App elemento, così possiamo vederlo nel browser.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Note - Ogni volta che vuoi usare qualcosa, devi importprima. Se vuoi rendere il componente utilizzabile in altre parti dell'app, devi farloexport dopo la creazione e importarlo nel file in cui si desidera utilizzarlo.

Crea un file con il nome .babelrc e copiarvi il seguente contenuto.

{
   "presets":["env", "react"]
}

Passaggio 9: esecuzione del server

La configurazione è completa e possiamo avviare il server eseguendo il seguente comando.

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

Mostrerà la porta che dobbiamo aprire nel browser. Nel nostro caso lo èhttp://localhost:8001/. Dopo averlo aperto, vedremo il seguente output.

Passaggio 10: generazione del pacchetto

Infine, per generare il bundle è necessario eseguire il comando build nel prompt dei comandi come:

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Questo genererà il pacchetto nella cartella corrente come mostrato di seguito.

Utilizzando il comando create-react-app

Invece di usare webpack e babel puoi installare ReactJS più semplicemente installando create-react-app.

Passaggio 1: installa l'app create-react

Sfoglia il desktop e installa l'app Crea React utilizzando il prompt dei comandi come mostrato di seguito:

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

Questo creerà una cartella denominata my-app sul desktop e installerà tutti i file richiesti al suo interno.

Passaggio 2: eliminare tutti i file di origine

Sfoglia la cartella src nella cartella my-app generata e rimuovi tutti i file al suo interno come mostrato di seguito -

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Passaggio 3: aggiungi file

Aggiungi file con nomi index.css e index.js nella cartella src come -

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

Nel file index.js aggiungi il seguente codice

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Passaggio 4: eseguire il progetto

Infine, esegui il progetto utilizzando il comando di avvio.

npm start

↰ Previous page Next page ↱

ReactJS - Configurazione dell'ambiente

Installazione di ReactJS usando webpack e babel

Passaggio 1: creare la cartella principale

Passaggio 2: installa React e reagisci dom

Passaggio 3: installa webpack

Passaggio 4: installa babel

Passaggio 5: creare i file

Passaggio 6: impostare compilatore, server e caricatori

Passaggio 7: index.html

Passaggio 8: App.jsx e main.js

Passaggio 9: esecuzione del server

Passaggio 10: generazione del pacchetto

Utilizzando il comando create-react-app

Passaggio 1: installa l'app create-react

Passaggio 2: eliminare tutti i file di origine

Passaggio 3: aggiungi file

Passaggio 4: eseguire il progetto

Tutorial ReactJS

Risorse utili di ReactJS