Guida introduttiva a React: costruisci la tua prima interfaccia utente da zero

React è una libreria JavaScript per la costruzione di interfacce utente. È sviluppata e mantenuta da Facebook ed è diventata uno degli strumenti più popolari nello sviluppo front-end. Questa guida ti guiderà passo dopo passo, partendo da zero, attraverso i concetti fondamentali di React e ti aiuterà a costruire una semplice interfaccia utente.

Perché scegliere React?

React ha i seguenti vantaggi:

• Componentizzazione: React scompone l'interfaccia utente in componenti indipendenti e riutilizzabili. Ciò rende il codice più facile da mantenere e comprendere.
• Dichiarativo: React utilizza uno stile di programmazione dichiarativo, il che significa che devi solo descrivere ciò che vuoi presentare e React gestirà automaticamente gli aggiornamenti e il rendering.
• Efficiente: React utilizza un DOM virtuale e un algoritmo diff intelligente, che possono aggiornare in modo efficiente l'interfaccia utente, riducendo il rendering non necessario.
• Ampio supporto della comunità: React ha una vasta comunità e un ricco ecosistema, puoi trovare un sacco di tutorial, librerie e strumenti per aiutarti a sviluppare.
• Capacità cross-platform: React Native ti consente di utilizzare React per sviluppare applicazioni mobili native (iOS e Android).

Preparazione

Prima di iniziare, devi assicurarti di avere i seguenti strumenti installati sul tuo computer:

• Node.js: Node.js è un ambiente di runtime JavaScript utilizzato per eseguire gli strumenti di sviluppo React. Puoi scaricarlo e installarlo da https://nodejs.org/.
• npm o yarn: npm (Node Package Manager) e yarn sono gestori di pacchetti JavaScript utilizzati per installare e gestire le dipendenze di React. Normalmente npm viene installato insieme a Node.js. Yarn può essere installato da https://yarnpkg.com/.

Crea la tua prima applicazione React

Useremo create-react-app per creare rapidamente un progetto React.

1. Crea usando npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Crea usando yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Dopo aver eseguito i comandi precedenti, create-react-app creerà automaticamente una directory denominata my-first-react-app e inizializzerà un progetto React in quella directory. Il comando npm start o yarn start avvierà il server di sviluppo e potrai visitare http://localhost:3000 nel tuo browser per visualizzare la tua applicazione React.

Struttura della directory

La struttura della directory del progetto creato da create-react-app è la seguente:

my-first-react-app/
├── node_modules/         # Librerie da cui dipende il progetto
├── public/               # Risorse statiche (ad esempio file HTML)
│   ├── index.html        # File HTML di ingresso dell'applicazione
│   └── ...
├── src/                  # Codice sorgente React
│   ├── App.css           # Stile CSS del componente App
│   ├── App.js            # Componente App
│   ├── App.test.js       # File di test del componente App
│   ├── index.css         # Stile CSS globale
│   ├── index.js          # File JavaScript di ingresso dell'applicazione
│   ├── logo.svg          # Logo di React
│   └── ...
├── .gitignore            # File ignorati da Git
├── package.json          # Metadati e dipendenze del progetto
├── README.md             # Documentazione del progetto
└── yarn.lock             # File di blocco della versione delle dipendenze (se si usa yarn)

Comprensione dei Componenti React

Un'applicazione React è composta da componenti. I componenti sono blocchi di codice indipendenti e riutilizzabili, utilizzati per renderizzare parti specifiche dell'interfaccia utente.

Nel file src/App.js, puoi vedere un componente App predefinito:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Spiegazione del codice:

• import React from 'react'; importa la libreria React.
• function App() { ... } definisce un componente funzione chiamato App.
• return ( ... ) restituisce un'espressione JSX, che descrive cosa dovrebbe renderizzare il componente.
• export default App; esporta il componente App, in modo che possa essere utilizzato in altri file.

JSX (JavaScript XML)

JSX è un'estensione della sintassi JavaScript che ti consente di scrivere codice simile a HTML nel codice JavaScript. Nell'esempio sopra, ... è un'espressione JSX. Il codice JSX viene convertito in codice JavaScript standard da Babel, in modo che il browser possa comprenderlo.

Modifica del Componente App

Modifichiamo il componente App per creare un semplice contatore.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {\n    setCount(count + 1);\n  };\n\n  const decrement = () => {\n    setCount(count - 1);\n  };\n\n  return (\n    \n      \n\n# Contatore\n\n      Conteggio attuale: {count}\n\n      +\n      -\n    \n  );\n}\n\nexport default App;\n```\n\n**Modifiche:**\n\n* `import React, { useState } from 'react';` Importa l'Hook `useState`. `useState` è un Hook di React utilizzato per aggiungere lo stato ai componenti funzionali.\n* `const [count, setCount] = useState(0);` Utilizza l'Hook `useState` per creare una variabile di stato chiamata `count` e la inizializza a `0`. `setCount` è una funzione utilizzata per aggiornare lo stato di `count`.\n* `const increment = () => { setCount(count + 1); };` Definisce una funzione chiamata `increment` che incrementa di 1 lo stato di `count`.\n* `const decrement = () => { setCount(count - 1); };` Definisce una funzione chiamata `decrement` che decrementa di 1 lo stato di `count`.\n* `Conteggio attuale: {count}

` Visualizza il valore dello stato `count` nella pagina. `{count}` è un'espressione JSX utilizzata per inserire variabili JavaScript nel codice JSX.\n* `+` e `-` Crea due pulsanti, associando rispettivamente le funzioni `increment` e `decrement`. `onClick` è un gestore di eventi utilizzato per eseguire la funzione specificata quando si fa clic sul pulsante.\n\nDopo aver salvato il file `src/App.js`, il browser si aggiornerà automaticamente e vedrai un semplice contatore. Fare clic sul pulsante \ const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Usa l'oggetto styles per fare riferimento alle classi CSS */}
      

# Contatore

      Conteggio attuale: {count}

      +
      -
    
  );
}

export default App;

Utilizzo di un file CSS normale:

Puoi anche utilizzare un file CSS normale per definire stili globali. Nel file src/index.css, puoi definire stili globali.

Ad esempio, aggiungi il seguente stile CSS:

body {
  font-family: sans-serif;
}

Questo stile verrà applicato all'elemento body dell'intera applicazione.

Prossimi passi

Congratulazioni, hai completato la tua prima applicazione React! Successivamente, puoi imparare di più su React, ad esempio:

• Comunicazione tra componenti: Impara come far comunicare diversi componenti tra loro.
• Gestione dei moduli: Impara come creare e gestire i moduli.
• Routing: Impara come utilizzare React Router per creare applicazioni multipagina.
• Redux o Context API: Impara come gestire lo stato dell'applicazione.
• Hooks: Approfondisci la conoscenza di React Hooks, come useEffect, useContext ecc.

Ricorda, React è una tecnologia che richiede pratica e apprendimento continui. Ti auguro un buon apprendimento!