Introduzione al framework React

Introduzione

React è una libreria JavaScript open source per la creazione di interfacce utente, spesso per applicazioni web single-page. È mantenuto da Facebook e da una comunità di singoli sviluppatori e aziende.

Passaggio 1: Installazione

Prima di tutto, devi avere Node.js e npm (node package manager) installati sul tuo computer. Puoi scaricarli dal sito ufficiale di Node.js.

Una volta installati, è possibile creare un nuovo progetto React con il comando:

npx create-react-app mio-progetto

Dove mio-progetto è il nome del tuo progetto.

Passaggio 2: Struttura del progetto

Naviga nella directory del tuo progetto con cd mio-progetto e apri il codice in un editor di tua scelta. Vedrai una struttura di cartelle come questa:

• node_modules/
• public/
• • index.html
• src/
• • App.js
  • index.js
• package.json

Il codice React va in genere nella cartella src/.

Passaggio 3: Creare un componente

In React, tutto è un componente. Un componente è fondamentalmente una parte dell'interfaccia utente. Puoi creare un nuovo componente creando un nuovo file nella cartella src/. Ad esempio, src/MioComponente.js.

In questo file, potresti avere qualcosa del genere:

import React from 'react';

class MioComponente extends React.Component {
  render() {
    return <h1>Ciao, mondo!</h1>;
  }
}

export default MioComponente;

Quindi, puoi usare questo componente in altri componenti importandolo.

Passaggio 4: Rendering del componente

Per rendere il tuo componente, dovrai aggiungerlo al file src/App.js.

import React from 'react';
import MioComponente from './MioComponente';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <MioComponente />
      </div>
    );
  }
}

export default App;

Passaggio 5: Avviare l'applicazione

Infine, per avviare l'applicazione, usa il comando npm start nella root del tuo progetto. Dovresti vedere l'applicazione avviarsi e il tuo componente renderizzato nel browser.

Conclusione

React è una potente libreria per costruire interfacce utente interattive con facilità. Questo tutorial è solo la punta dell'iceberg di ciò che è possibile fare con React. Buona programmazione!