Primi Passi con React: Installazione Nuova App e creazione primo Componente

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.

Guarda il VideoTutorial