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:
<!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:
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
chiusiVisto 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:
che è il punto in cui verrà inserito il "render" html dell'applicazione tramite
ReactDOM.render e
document.getElementById:
ReactDOM.render(
<....>,
document.getElementById('root')
);
Nell'esempio viene creato un
componente:
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:
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:
ReactDOM.render(
element,
document.getElementById('root')
);
l'html risultante sarà:
<div id="root"><h1>Ciao Sgart</h1></div>
Se volessi fare un nuovo componente (App) che contiene altri componenti il codice è questo:
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:
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