Oggi vedremo come creare una web app con React attraverso NPM (Node Package Manager) e contestualmente andremo a creare il nostro primo componente. Prima di entrare nel vivo della guida spieghiamo di cosa stiamo parlando. Innanzitutto che cos’è React? React è una libreria JavaScript che attraverso il suo elemento principale, Component, permette di creare delle interfacce utente (UI) facilmente riutilizzabili all’interno del progetto. La documentazione ufficiale aggiunge anche l’espressione “in maniera indolore” e in effetti quest’affermazione mi trova d’accordo. La gestione del codice è molto lineare e non a caso React ha avuto un discreto successo, ad esempio è stata integrata nel core delle ultime release di Wordpress.
Nel mercato del lavoro per sviluppatori è ancora molto richiesta anche se negli ultimi tempi stiamo assistendo ad una leggera flessione, che in ogni modo riguarda un po' tutte le librerie e framework JS. Questo andamento si può spiegare (a mio avviso) con l’evoluzione del JavaScript puro (Vanilla) che ha perfino dichiarato l’abbandono di jQuery da parte di Bootstrap a partire dalla prossima release (Bootstrap 5).
Creazione di una nuova React App
Veniamo alla pratica. Di cosa abbiamo bisogno per sviluppare con React? Come da indicazioni della documentazione ufficiale, abbiamo bisogno di Node >= 10.16 e Npm >= 5.6 installati nella nostra macchina. Se non abbiamo questi requisiti, dobbiamo rimediare. Se siamo su un OS Debian Based (Ubuntu, Mint), procediamo nella seguente maniera:
Assicuriamoci di aggiornare l'indice dei pacchetti, aprire il terminale e dare questo comando:
sudo apt update
Per installare Node digitare
sudo apt install nodejs
Verificare la versione di Node.js installata:
nodejs -v
Per installare NPM digitare:
sudo apt install npm
Verificare la versione di NPM installata:
npm -v
Ok, ora posizioniamoci con il terminale nella cartella all'interno di Apache o Nginx in cui vogliamo installare la nostra React App e digitiamo il seguente comando
npx create-react-app mia-app
Una volta che il processo d’installazione sarà terminato, spostiamoci all'interno della nostra nuova applicazione
cd mia-app
E lanciamo il comando per configurare l'ambiente di sviluppo e avviare il server
npm start
Uno sguardo alla struttura dell’applicazione
Apriamo il progetto con un qualsiasi IDE di sviluppo per dare un’occhiata a come è struttura l’applicazione. All’interno della cartella public troviamo il file index.html che al suo interno contiene un div con id root
<div id="root"></div>
Questo è il nodo DOM “radice” in quanto ogni cosa al suo interno verrà gestita dal DOM di React. Il concetto si può dimostrare apprendo il file index.js all’interno della cartella src. E qui si capisce come funziona REACT. Il metodo render di ReactDOM è composto da due parametri, il primo è il componente di REACT, il secondo è il nodo del DOM dove questo componente deve essere inserito
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Bene, ora che abbiamo compreso la logica di REACT, andiamo a creare il nostro primo componente
Come creare un Componente React
All'interno della cartella src creiamo un nuovo file denominato “Test” con estensione “.js”. Questo file conterrà il nostro componente. Adesso abbiamo a disposizione due strade:
- Definire il componente come funzione JavaScript
- Definire il componente come classe ES6
Noi opteremo per la seconda strada. Il primo step è importare il core di REACT in questo file
import React from "react";
Definiamo la classe
class Test extends React.Component
{
}
Inseriamo all’interno della classe il metodo render, che restituirà del codice HTML
class Test extends React.Component
class Test extends React.Component
{
render() {
return(
<div>Sono un nuovo componente</div>
)
}
}
Esportiamo la classe
export default Test;
Ora torniamo sul file index.js e importiamo il nostro componente nel DOM
import Test from "./Test";
ReactDOM.render(
<React.StrictMode>
<Test />
</React.StrictMode>,
document.getElementById('root')
);
Finito! Lanciamo nuovamente il comando npm start e nella finestra del browser visualizzeremo il nostro nuovo componente.