Hello, world!

  • 5 minuti

Il modo più comune per iniziare qualsiasi corso di programmazione consiste nel visualizzare il testo "Hello, world!". Seguendo questa tradizione, si userà React per visualizzare questo famoso testo.

Si creeranno due elementi per la base del progetto:

  • Il file index.html ospita l'applicazione React.
  • Il file index.jsx monta l'applicazione.

Creare l'host dell'applicazione

  1. In Visual Studio Code creare un nuovo file nella cartella public. Assegnargli il nome index.html.

  2. Aggiungere il codice HTML seguente:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Recipes</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
</body>
</html>

Esplorare il codice

Il codice HTML contiene due righe importanti:

  • <div id="app"></div>
    • Questa riga crea l'elemento HTML che ospita l'applicazione React.
    • Questo elemento viene chiamato in base al relativo ID per eseguire il rendering dell'applicazione.
  • <script type="module" src="/dist/index.js"></script>
    • Questa riga carica il codice JavaScript.

Nota

Il nome del file da importare è index.js. Non si usa index.jsx perché i browser non possono eseguire il rendering dei file JSX. Per generare codice JavaScript è sempre necessario un bundler, ad esempio Snowpack. Si fa riferimento al codice JavaScript invece che a JSX.

L'attributo type="module" consente di usare le istruzioni import nei file JavaScript (o JSX). Questa funzionalità è relativamente nuova per i browser. Consente di importare i pacchetti e i componenti necessari.

Creare il punto di ingresso per l'applicazione React

È necessario del codice per eseguire il rendering dell'applicazione React all'interno del codice HTML. Tradizionalmente viene usato il file index.jsx per eseguire il rendering dell'applicazione.

  1. Creare un nuovo file all'interno della cartella src. Assegnargli il nome index.jsx.

  2. Aggiungere il codice seguente:

    import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

Esplorare il codice

La prima parte del file index.jsx importa due librerie importanti. La prima libreria, React, consente di usare JSX. Verrà importata in ogni componente o file JSX creato. La seconda libreria, ReactDOM, esegue il rendering dell'applicazione all'interno del codice HTML.

render accetta due parametri:

  • Il codice HTML che si vuole visualizzare, in questo caso un'intestazione h1.
  • L'elemento HTML che si vuole usare per visualizzare il codice HTML. Si userà l'elemento il cui ID è app. Questo elemento è stato creato in precedenza.

La possibilità di usare HTML all'interno del codice JavaScript è una delle funzionalità di JSX.

Controllare la pagina

Ora che il codice è stato creato, è possibile vedere il sito in azione.

  1. Aprire il terminale integrato in Visual Studio Code selezionando Visualizza>Terminale oppure premendo Ctrl+`. In un Mac premere invece Cmd+`.

  2. Usare il comando seguente per avviare il server di sviluppo di Snowpack:

    npm start

Il browser predefinito dovrebbe aprirsi automaticamente e visualizzare la pagina. Se la pagina non viene visualizzata automaticamente, aprire il browser e passare a http://localhost:8080. La pagina dovrebbe essere ora visibile.

Screenshot showing a

Esplorare il codice generato

Il codice JSX viene convertito nel codice HTML e JavaScript appropriato per la visualizzazione nel browser. Aprire il file JavaScript generato da Snowpack: http://localhost:8080/dist/index.js. Verrà visualizzato il codice seguente:

import React from "../web_modules/react.js";
import ReactDOM from "../web_modules/react-dom.js";
ReactDOM.render(/* @__PURE__ */ React.createElement("h1", null, "Hello, world!"), document.getElementById("app"));

Osservare la riga di codice che genera l'elemento h1 e inserisce il testo al suo interno:

React.createElement("h1", null, "Hello, world!")

L'uso di questo codice è simile all'uso di document.createElement con Vanilla JavaScript. Gli strumenti forniti da Snowpack e altri bundler consentono di usare JSX per generare automaticamente il codice appropriato per il browser.