Crea il tuo primo componente

  • 4 minuti

Lo sviluppo in React è basato sui componenti. Queste unità autonome sono progettate all'insegna del riutilizzo e della modularità. I progetti React contengono in genere numerosi componenti.

Un componente può essere una funzione o una classe. La maggior parte degli sviluppatori React preferisce creare componenti usando le funzioni, quindi ci si concentrerà su questo stile.

Le applicazioni hanno in genere un componente principale, solitamente denominato App. App funge da radice dell'applicazione. Per iniziare, si creerà il componente App.

Creare il componente

  1. Aprire Visual Studio Code.

  2. Creare un nuovo file denominato src. Assegnargli il nome App.jsx.

  3. Aggiungere il codice seguente:

    import React from 'react';

function App() {
    return (
        <article>
            <h1>Recipe Manager</h1>
        </article>
    )
}

export default App;

Esplorare il codice

Nella parte iniziale del file App.jsx si inserisce un'istruzione di importazione di React in modo da poter usare la sintassi JSX. Si crea quindi una funzione denominata App, come si creerebbe qualsiasi altra funzione in JavaScript. Infine, si esporta la funzione usando la sintassi JavaScript standard. Il nucleo del componente è contenuto nell'istruzione return.

Si noti che viene usato il linguaggio HTML (tecnicamente XML) incorporato in JavaScript. Questa funzionalità mostra tutta la potenza di JSX. È possibile usare la logica e la potenza di JavaScript per creare unità di lavoro autonome (componenti).

Il codice HTML restituito dalla funzione (o dal componente) viene visualizzato nella pagina. L'intestazione contiene il testo Recipe Manager.

Nota

L'elemento h1 è annidato all'interno di un elemento article in formato HTML 5. Poiché JSX usa XML, deve essere presente un elemento radice. L'elemento article è la radice di questo componente. Questa struttura consente di aggiungere codice HTML e altri componenti React man mano che le dimensioni dell'applicazione aumentano.

Aggiornare l'applicazione per l'uso del componente principale

Si aggiornerà ora l'applicazione per l'uso del nuovo componente.

  1. Aprire index.jsx.

  2. Dopo la riga import ReactDOM from 'react-dom'; (dovrebbe essere la riga 3) aggiungere il codice seguente:

    import App from './App';

  3. Trovare il codice <h1>Hello, world!</h1>. Sostituire questo messaggio iniziale con una chiamata al componente App:

    <App />

Esplorare il codice

Ecco il contenuto completo di index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

L'istruzione import importa il componente usando la stessa sintassi che si userebbe per qualsiasi altro modulo. Ora si può usare il componente come se fosse codice HTML.

Nota

Poiché JSX usa la sintassi XML, è necessario chiudere il tag App. A questo scopo è possibile usare la sintassi in formato lungo <App></App> oppure quella abbreviata con chiusura automatica <App />. Entrambe le opzioni funzionano allo stesso modo, ma la maggior parte degli sviluppatori usa la forma abbreviata.

Visualizzazione dei risultati

Salvare tutti i file. Il browser si aggiorna automaticamente visualizzando i risultati.

Screenshot of the Recipe Manager heading in the browser window.