Prima di approfondire i principi di funzionamento di React e scoprirne tutti i più reconditi segreti, ci accingeremo a creare un componente Web molto semplice, un esempio rapido ma anche reale, utile per capire quali sono le potenzialità offerte dalla libreria, gli strumenti che mette a disposizione e i passi rudimentali per creare componenti, per poi scendere nel dettaglio di ciascun aspetto affrontando soluzioni via via più complesse.
Creare il primo componente
Per muovere i primi passi, scriveremo un componente Web che rappresenta il classico “Hello World” con cui si inizia a imparare qualsiasi framework o linguaggio di programmazione.
Creiamo quindi una nuova pagina HTML con qualsiasi editor di testo e inseriamo al suo interno gli elementi HTML5 necessari a conferirle la struttura minimale di una tipica pagina vuota, importando però alcuni script della libreria React.
Ecco il codice iniziale della pagina:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Primi passi con React</title>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>Inseriamo quindi nel corpo della pagina, nell'elemento <body>, un elemento <div> che funga da “contenitore” per l'interfaccia visuale dell'applicazione, che in questo caso sarà rappresentata dal componente che stiamo creando.
NOTA: è buona prassi creare sempre un <div> per ospitare l'interfaccia dell'applicazione e dei componenti che la costituiscono, evitando di utilizzare direttamente il corpo (body) della pagina, poiché questo potrebbe interferire con il funzionamento di altre librerie JavaScript.
Utilizziamo ora la funzione React.createClass() della libreria per creare l'oggetto JavaScript che conterrà la logica del nostro componente.
Per produrre un contenuto che sia visibile sulla pagina, è necessario introdurre nell'oggetto una funzione render() che avrà la responsabilità di restituire il contenuto che si vuole mostrare nella pagina, ottenuto specificandone il markup HTML o richiamando altri componenti React.
Ecco il codice completo con la struttura di base del componente:
<body>
<div id="hello"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return <p>Hello <strong>React</strong>!</p>;
}
});
ReactDOM.render(<HelloWorld />, document.getElementById("hello"));
</script>
</body>Dopo aver salvato il file HTML della pagina, aprendolo con qualsiasi browser dovrebbe apparire un paragrafo di testo con scritto “Hello React!”.
C'è qualcosa di strano nel codice JavaScript? Ad esempio, qualcosa che ha tutta l'apparenza di essere HTML ma è inserito direttamente all'interno di una funzione? E poi, cosa diavolo è uno script di tipo "text/babel"? Se tutte queste domande stanno affiorando nella testa, sono del tutto lecite e andremo a spiegare la loro ragione d'essere nelle prossime lezioni di questa guida, creando componenti Web più complessi.