Installare React mediante Webpack e Babel

Category: blog, react
2.810 views Tempo di lettura: 7 minuti

Se state seguendo questa guida di sicuro conoscerete già React, per cui lo darò per scontato.Sappiamo che per installare la libreria tramite npm si utilizza la sintassi ‘create-react-app’ da linea di comando, troppo facile e banale.In questo tutorial vedremo come installare React mediante WebPack e Babel.

Lo scopo di realizzare un’applicazione con questo approccio è quella di renderla flessibile anche in caso di lavori più elaborati e complessi, cosa non sempre fattibile tramite l’utilizzo di altri metodi visti fino ad ora.

A cosa serve Babel?

In React si sfrutta il linguaggio ECMASCRIPT, ossia un’evoluzione di javascript con un codice più pulito e leggibile. Tuttavia ancora oggi non tutti i browser supportano questo linguaggio, quindi Babel transpila (ossia compila) il linguaggio in Javscript prima di essere inviato al browser.
I package di Babel che utilizzeremo sono:

babel-core : il motore principale del plugin babel per far funzionare le sue dipendenze;
babel-preset-env : parte di supporto ES5, ES6;
babel-preset-react : Babel può essere utilizzato in qualsiasi framework o libreria, in questo caso su react;
babel-loader : ponte di comunicazione tra Webpack e Babel.

A cosa serve Webpack?

Il Webpack può essere definito come uno static module bundler per applicazioni JavaScript il cui suo scopo è quello di realizzare un pacchetto di assets utilizzabile direttamente nel browser a partire da un insieme di file sorgenti strutturati su diversi file e con schemi di dipendenze complessi.. in realtà ci sarebbero altre risorse come Browserify,Parsel, Brunch, ma non si adattano bene a React come il primo.

Per comprendere al meglio il funzionamento di Webpack, è necessario comprendere alcuni concetti chiave.

Un entry point rappresenta il punto di partenza da utilizzare durante il processo di building. Di default l’entry point è src/index.js.
L’output rappresenta l’opposto dell’entry point, ovvero la cartella dove verrà generato il pacchetto di risorse utilizzabile dal browser. Di default la cartella di output è dist.
I loaders sono il vero cuore di webpack; essi rappresentano i vari engine che permetteranno di generare il pacchetto finale. Di default Webpack utilizza solamente un loader per i file .js ma tramite questa opzione abbiamo la possibilità di definirne altri (per esempio per i file .sass o .less).
I plugin sono simili ai loaders ma si occupano di aspetti più generali del processo di build mentre i loaders sono dedicati a determinati tipi di file: possiamo per esempio avere plugin di reportistica o che autoinstallano le dipendenze richieste dai sorgenti.
Il mode rappresenta l’ambiente sul quale webpack viene lanciato. Di default esso è valorizzato come production.

I package webpack che andremo ad utilizzare:

webpack : il plug-in webpack principale il motore delle sue dipendenze.
webpack-cli : ci consente di accedere ad alcuni comandi webpack tramite l’interfaccia della riga di comando come avviare il server di sviluppo, creare build di produzione, ecc.
webpack-dev-server : avvia il server lato client.
html-webpack-plugin : consente la creazione di modelli HTML per la nostra applicazione.

Se vuoi saperne di più ho scritto una guida apposita.

Installare React mediante Webpack e Babel

Prima di proseguire con l’installazione di React con webpack e babel devi installare, s non lo hai già fatto,Node.js il quale ci consente di scaricare le dipendenze da linea di comando.

Quindi crea una directory a tuo piacere e chiamala App ,apri il prompt dei comandi, spostati su di essa mediante il comando cd App e digita npm init il quale ci crea il file packege.json all’interno della stessa.
Installa le dipendenze react mediante il comando npm i –save react react-dom. Dove react è il motore principale della libreria e react-dom indica che lo staimo utilizzando in ambito web, altrimenti avremmo inserito react-native, ma non è questo il caso.
Installa i pacchetti Babel come dipendenza dev (in pratica sia Babel che webpack non saranno disponibili in fase di prouzione), inserisci in linea di comando npm i -D babel-core babel-loader@^7 babel-preset-env babel-preset-react.
Installa i pacchetti webPack come dipendenze npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin.

Ora il file package.json appare così:

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^4.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

il primo passo dell’intsallare React mediante Babel e webpack è terminato!

Configurare Babel

Sempre nella root principale del progetto quindi in \App crea il file .babelrc, aprilo e scrivi:

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

Questo è il file di configurazione cercato da Babel.

Configurare il WebPack

Sempre nella directory principale \App crea il file webpack.config.js ed inserisci:

var path    = require('path');
var hwp     = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'build.js',
        path: path.join(__dirname, '/dist')
    },
    module:{
        rules:[{
            exclude: /node_modules/,
            test: /\.js$/,
            loader: 'babel-loader'
        }]
    },
    plugins:[
        new hwp({template:path.join(__dirname, '/src/index.html')})
    ]
}

La riga #5 indica il punto di partenza dell’applicazione. nello specifico index.js che andremo a realizzare nel percorso \App\src. Quindi crea la directory src all’interno di App, aprila e crea il file index.js, per il momento lasciamolo molo vuoto. Allo stesso modo crea il file index.html, anche questo vuoto.

Il file HTML è colui che si occupa di far visualizzare il contenuto in forma SPA(single page application), in pratica cambia di volta in volta ogni qualvolta che un utente richiede la modifica della view, grazie al plugin html-webpack-plugin riportato in riga #2.

Dalla riga #6 alla riga #8 viene definita la messa in produzione dell’applicazione (build.js). Il file verrà creato nella directory \App\dist automaticamente.

Fra le righe #10 e #16 si definisce il rules webpack associato. Le regole #12, #13, #14 indicano al webpack di cercare tutti i file .js esclusi quelli all’interno della directory node_modules con lo scopo di trascrivere i codici ES5/ES6 ed utilizzare un caricatore chiamato babel-loader per tale compito.

Dalla riga #17 alla #19 il webpack, nel caso siano utilizzati altri plugin nell’applicazione, li deve riconoscere ai fini della traspilazione quindi è necessario inserire i loro riferimenti all’interno dell’array.

Bene , ci siamo quasi!! 🙂

Ora aprite il file index.html realizzato in precedenza ed inserite:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

Nota il div id=’root’ , tutto ciò che verrà visualizzato nel browser risiede all’interno di esso a prescindere dalle dimensioni dell’applicazione.

Ora aprite il file index.js ed inserite:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () =>(
    <div>
        Hello world!
    </div>
)


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

Se vi ricordate in fase di configurazione del webpack abbiamo stabilito che questo sarebbe stato il punto di ingresso dell’applicazione.

La parte principale del file sicuramente quella relativa alla riga #11, dove viene definito il metodo render() responsabile del render dei vari componenti. La riga avvisa react-dom di renderizzare il componente <App/> in un elemento del DOM con id pari a root.

Ciò che vedete fra la riga #5 e la riga #7 non è HTML ma è JSX (javascript-xml), linguaggio utilizzato in react.

Ok ora non ci resta che configurare il server per visualizzare l’applicazione nel Browser. Aprite il file package.json ed agiornate il nodo scripts:

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

Quindi start si occuperà di avviare l’applicazione in fase di sviluppo, mentre build la prepara per la produzione.
in start –open fa si che il browser si apra automaticamente ,mentre –hot dice di refresharsi in caso di modifiche dell’app.

Una volta pronti per la messa in produzione della nostra applicazione da terminale digitate npm run build ed il webpack prepara l’app all’interno di una directory creata automaticamente chiamata dist in \App\dist.

Dai aprite il terminale e digitate npm start, dovreste vedere una pagina bianca con la fatidica frase HELLO WORLD!

Potete vedere il risultato da SackBlitz:

react-2j4yef – StackBlitz

Starter project for React apps that exports to the create-react-app CLI.

Se vi interessa approfondire concetti su React potete seguire il corso: React e redux la guida completa.
Ciauz 🙂 🙂

A cosa serve Babel?

A cosa serve Webpack?

Installare React mediante Webpack e Babel

Configurare Babel

Configurare il WebPack

react-2j4yef – StackBlitz

Potrebbero interessarti: