React come funziona

React è una libreria JavaScript per la costruzione di interfacce lato client.
A differenza di un framework come AngularJs che si occupa dell'intero ciclo di vita di una Single Page Application, React si occupa solo dell'interfaccia utente. Inoltre si basa su un paradigma diverso da MVVM.

Il modo migliore per iniziare ad usare React è quello di partire da questo template html di base:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <!--script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>

    <div id="root"></div>

    <script type="text/babel">

    //inserire qui il codice JSX.

    </script>
  </body>
</html>
L'esempio utilizza due librerie: react.js e react-dom.js.
Il codice di una applicazione React si basa su una sintassi XML mista a JavaScript chiamata JSX, questo è un esempio:

React JSX

function Welcome(props) {
  return <h1>Ciao {props.name}</h1>;
}

const element = <Welcome name="Sgart" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);
essendo basato su XML il codice deve essere Well-formed ovvero tutti i tag devono essere correttamente annidati e chiusi
Visto che il codice JSX non è direttamente interpretabile dal browser, è necessario una terza libreria babel.min.js, per compilare (transpiler) il codice JSX in JavaScript a runtime.
Il tag script ha la proprietà type impostata a text/babel anziché il classico text/javascript
La pagina html contiene anche un tag:

HTML

<div id="root"></div>
che è il punto in cui verrà inserito il "render" html dell'applicazione tramite ReactDOM.render e document.getElementById:

React JSX

ReactDOM.render(
  <....>,
  document.getElementById('root')
);

Nell'esempio viene creato un componente:

React JSX

function Welcome(props) {
  return <h1>Ciao {props.name}</h1>;
}
Il nome del componente deve sempre iniziare con la lettera maiuscola e deve sempre ritornare un solo elemento di root (ricorda è un XML non HTML)
poi viene dichiarata una variabile contenente l'html che rappresenta il nuovo componente:

HTML

const element = <Welcome name="Sgart" />;
la proprietà name viene passata al parametro della funzione (aggiunta all'oggetto di react props)

il nome del tag coincide con il nome del componente (nome funzione)
const è una nuova keyword che fa parte della specifica ECMAScript 6 (ES6)
infine viene visualizzato in pagina:

React JSX

ReactDOM.render(
  element,
  document.getElementById('root')
);

l'html risultante sarà:

HTML

<div id="root"><h1>Ciao Sgart</h1></div>
Se volessi fare un nuovo componente (App) che contiene altri componenti il codice è questo:

React JSX

function App() {
  return (
    <div>
      <Welcome name="Sgart" />
      <Welcome name="Alberto" />
      <Welcome name="Sara" />
    </div>
  );
}
come dicevo prima un componente deve sempre ritornare un solo elemento di root, per questo ho aggiunto il tag div.
Per utilizzarlo modificare il metodo ReactDOM.render:

React JSX

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
In questo caso ho passato direttamente il tag App anziché la variabile element dell'esempio precedente

Questo è solo una breve introduzione di base, prossimamente pubblicherò altro materiale su React.

Vedi anche: React come funziona - Gestire lo Stato del componente
Tags:
Esempi225 HTML74 JavaScript184 React17 XML / XSL / XSLT29
Potrebbe interessarti anche: