Hello World!
Segue una prova di laboratorio con gli strumenti ufficiali come da esempi presenti sul sito ufficiale di ReactJs.
Creare una nuova cartella progetto. Creare il file helloworld.jsx.
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Il contenuto di questo file non è interpretabile direttamente da un broswser. Non è Javascript ma ci assomiglia molto! E' un miscuglio tra Javascript e HTML.
Abbiamo bisogno di un compilatore: react-tools.
Un pacchetto Node che ci permette di compilare il codice JSX in JS.
React Tools
Istallare React Tools.
npm install react-tools
Ora avete a disposizione il compilatore jsx. Digitate il seguente comando nella cartella di progetto.
jsx helloworld.jsx > helloworld.js
Lo strumento jsx compila il contenuto del file .jsx in codice Javascript.
Creare un file index.html.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js"></script>
</head>
<body>
<div id="example"></div>
<script src="helloworld.js" ></script>
</body>
</html>
Non resta che visualizzare il file con il vostro browser e godetevi lo spettacolo del vostro primo Hello World! in ReactJs.
Bene, ora passeremo ad un livello successivo; grazie a WebPack potremo automatizzare tutto il processo di compilazione e bundling senza limitarci ai soli file javascript.
Note di approfondimento
La libreria react.min.js può essere scaricata utilizzando npm install react oppure presa direttamente dal sito e posizionata nella cartella di progetto.
Bower
Personalmente utilizzo bower, questo pacchetto (che a sua volta è un ulteriore gestore di pacchetti) concettualmente fa la stessa cosa di npm ma è specifico per le librerie front-end; vi lascio a Google per documentarvi sulle differenze specifiche che esulano dagli obiettivi che mi sono dato.
Qualora vogliate provare bower ed istallare ReactJs utilizzandolo ecco cosa fare
Istallare Bower
npm install bower -g
Bower è da questo momento istallato globalmente sul vostro computer. Ricordate di lanciare l'operazione con diritti di amministratore
Istallare ReactJs utilizzando Bower
bower install react
Fatto!
La cartella bower_components contiene react.
Il numero di file presenti è nettamente minore rispetto a quella che si otterrebbe lanciando npm install react, cosa che rende bower più adatto al nostro scopo.
Per concludere, bower gestisce dei pacchetti come fa anche npm ma è specifico per le librerie front-end.