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
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 ).
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-server2) 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:
- Un div con un id unico
- 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.js4) 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 :)
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.
