Che cos’è React?

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 1 di 42.

React è la libreria più popolare al mondo per creare interfacce utente. Facebook, Netflix, Airbnb: le parti interattive del web che usi ogni giorno sono realizzate con essa.

L’idea di fondo è semplice: invece di scrivere un’unica pagina enorme, crei piccoli elementi riutilizzabili chiamati componenti. Un pulsante è un componente. Una scheda del profilo è un componente. Un’intera pagina è composta semplicemente da componenti all’interno di altri componenti.

Un componente non è nulla di spaventoso: è una funzione JavaScript che restituisce ciò che dovrebbe apparire sullo schermo:

function App() {
    return <h1>Hello, React!</h1>;
}

Quella cosa dall'aspetto HTML dentro JavaScript si chiama JSX. Ti permette di descrivere la schermata proprio dove si trova la logica. React prende ciò che restituiscono i tuoi componenti e mantiene sincronizzata la pagina reale. Descrivi cosa vuoi, React stabilisce come aggiornare il browser.

In questo corso modificherai App.jsx, il componente principale di una piccola app React. L'anteprima sulla destra mostra la tua app in tempo reale mentre scrivi. Costruiamo qualcosa.

Sfida

Principiante

Ecco il tuo primo componente React, già scritto per te.

Cosa fare:

Leggi App.jsx: è una funzione che restituisce JSX.
Premi il pulsante Esegui.
Osserva l’anteprima a destra che visualizza ciò che ha restituito il componente.

Questo è tutto il ciclo di React: un componente restituisce JSX e React lo visualizza sullo schermo. Dalla prossima lezione in poi, scriverai tu stesso JSX.

Provalo tu

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>