Realizato da

Pubblicato il

react

js

javascript

web

app


guida italiano introduzione react.js installazione e prima app hello world

Benvenuti a questa guida su come cerare una semplice web app  “Hello World”  usando la libreria React.js

In questo tutorial andiamo a vedere come impostare un ambiente di sviluppo che sia ottimizzato per lo sviluppo in React.js, in seguito andremo a testare la nostra installazione e configurazione con un semplice programma Hello world.

Se non siete interessati alla spiegazione potete trovare il codice di questo tutorial sulla repository GitHub di devnews.it

date anche un occhiata al nostro corso completo per sviluppo di applicazioni web con React.js

Requisiti

Per eseguire un’app fatta con React in produzione non abbiamo bisogno di installare software o pacchetti aggiuntivi, ma per il development (sviluppo) avremo bisogno di avere Node.js ed alcuni pacchetti NPM installati sul nostro sistema. Se non avete Node.js installato sul vostro PC potete trovare qui le guide Windows Mac

1) Creare la cartella ed inizializzare il progetto

Per prima cosa vogliamo creare la nostra directory su cui andremo a lavorare per poi selezionarla con i seguenti comandi eseguiti dal Terminal:

mkdir reactPrimaApp
cd reactPrimaApp


Ora che ci troviamo nella nostra nuova directory, possiamo inizializzare un nuovo progetto con il comando: 

npm init –y


Questo comando creerà un nuovo file  package.json , in cui andremo a specificare tute le nostre dependencies, e che per ora, ha un contenuto del tipo:

// package.json
{
    "name": "reactTestApp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}


Per poter compilare i nostri file React.js abbiamo bisogno di alcuni pacchetti NPM tra cui webpack, che è il pacchetto principale per sviluppare in React.

Per prima cosa andiamo ad installare react e react-dom il quale serve per collegare React alle nostre pagine HTML. Eseguiamo il seguente comando per installare i pacchetti e per salvarli nelle nostre dependencies in  package.json :

npm install --save react react-dom


Adesso andiamo ad installare quel che potrebbero sembrare molti pacchetti, che però ci aiuteranno ad avere un ambiente di sviluppo ottimizzato per la codifica di web app con React. Non fatevi intimidire dal numero di pacchetti, cercherò di spiegarvi tutti i loro funzionamenti associati.

Installiamo quindi questi pacchetti come pacchetti di sviluppo (dato che non sono necessari in produzione) con il comando:

npm install -D babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader webpack webpack-dev-server


I pacchetti babel ci permettono di usare codice ES6 con React, react-hot-loader ci permette di ricaricare la pagina della web app automaticamente ad ogni salvataggio, webpack e webpack-dev-server hanno il ruolo di compilare e servire i nostri vari file JS in un unico grande file che sarà consumato dalla nostra applicazione ( bundle.js ).

come creare prima web app con react.js e webpack

E finalmente andiamo ad installare webpack e webpack-dev-server globalmente in modo da poter eseguire il server webpack.
Eseguiamo il seguente comando:

npm install –g webpack webpack-dev-server

2) Come cerare il file di configurazione di webpack

Webpack, per poter compilare i nostri file JS ha bisogno di alcune istruzioni, tra cui: directory del nostro progetto, directory dove vogliamo posizionare il nostro file JS compilato, ed altre configurazioni. 

Andiamo quindi a cerare il nostro file di configurazione, che strettamente deve avere il nome di:  webpack.config.js 

Con il nostro terminal / cmd, nella directory creata precedentemente andiamo a creare il file di configurazione con il comando:

touch webpack.config.js


In cui, con un text editor, andiamo ad inserire il seguente contenuto:

// webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};


Ora siamo quasi pronti per testare il nostro server ed il funzionamento di React ed ES6.

3) Creare la prima pagina React

Ora creiamo con il comando touch o manualmente un file HTML  chiamato  index.html  che avrà la funzione di contenitore della nostra app React. In questo file, oltre ai soliti tag di una pagina HTML, dobbiamo inserire due cose:

  1. Un div con un id unico
  2. Uno script tag per collegare il file che sarà compilato da webpack per noi.
<!-- index.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React test</title>
    </head>
    <body>
        <div id='app'></div>
        <script src="bundle.js"></script>
    </body>
</html>


Come potete vedere dalla sezione entry del nostro file di configurazione per webpack, i file della nostra app React dovranno essere posizionati in una directory chiamata  src . Creiamo questa directory:

mkdir src


All’interno di cui creiamo un file chiamato  index.js  che sarà il nostro file principale per la nostra app React.

touch src/index.js

4) Creare la nostra prima applicazione con React

Se tutti i passi sono stati eseguiti in modo corretto, ora avrete una ambiente di sviluppo per creare applicazioni con React, vediamo come testare se tutto funziona in modo corretto.

All’interno del nostro file  index.js  inseriamo del codice ES6 in modo da testare sia webpack che babel.

let ciao = “HELLO WORLD”;
console.log(ciao);


Ora possiamo eseguire il nostro webpack dev server, che andrà a cercare il file  index.js  all’interno della cartella  /src  e creerà un file chiamato  bundle.js  il quale è stato linkato alla nostra pagina HTML.

Con il seguente comando ed il terminal nella stessa directory del file  webpack.config.js  andiamo a eseguire il server webpack:

webpack-dev-server


Il webpack dev server va usato solamente per lo sviluppo dell’applicazione React e non va assolutamente utilizzato in produzione.


Ora dal nostro browser se navighiamo all’indirizzo  localhost:8080  dovremmo vedere nella console JS un messaggio dalla nostra app. 

Ora possiamo inserire il codice per cerare la nostra prima applicazione con React. Questo codice ci mostrerà la scritta Hello world sul nostro browser.
All’interno di  index.js  inseriamo:

// index.js
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
    render(){
        return(
            <h1>Hello World</h1>
        )
    }
}
render(<App/>, document.getElementById('app'));


Salvate tutto e se il caricamento automatico di react-hot-loader funziona correttamente dovreste vedere la vostra pagina ricaricare automaticamente sul browser all’indirizzo  localhost:8080 

CI siamo! ora avete create la vostra prima web app con React.js :) 


Se volete continuare con la programmazione React potete dare un'occhiata al nostro corso gratuito e completo per React.js


Ricordate che il codice per questa guida è disponibile anche su GitHub nella nostra repository. 

Grazie per aver seguito questa guida su come installare e creare la vostra prima app con React, iscrivetevi alla newsletter per ricevere aggiornamenti sulle guide su React che usciranno prossimamente. Seguiteci su Twitter e su Facebook e non dimenticate di commentare se avete problemi con l’installazione di React, sarò lieto di aiutarvi.