vendredi 6 novembre 2015

Bonjour le monde avec React

Depuis quelques temps je m'intéresse de plus en plus aux frameworks javascript. Après avoir suivi de superbes conférences à Paris Web ou encore les ateliers du samedi j'ai eu envie se sauter le pas en réalisant qu'on était bien en 2015 et que comme dit si justement Christophe ES6 c'est maintenant, les gens !  Du coup j'ai très envie de faire du javascript de manière plus avancé, en me mettant à ES6, en découvrant React,...

Et pour commencer, parce qu'il faut bien commencer par quelque chose, voici un "Hello World !" à la sauce React. Et pour que ce soit simple, sans passer par des conversions, transpilations, je vais utiliser les sources sur un CDNhttps://www.jsdelivr.com/ En cherchant on trouve facilement les deux bibliothèques nécessaires : react et react-dom, en version 0.14.2.

Le code pour afficher un simple Hello World peut ressembler à ça :

ReactDOM.render(React.createElement('h1', {}, 'Hello World!'), document.getElementById('app'));

Il ne reste plus qu'à l'ajouter à react et react-dom et mettre tout ça dans une page html. Il faut tout de même créer un conteneur (un div par exemple) avec un id app qui contiendra notre application. La page complète ressemble à ça :

 

Vous pouvez aussi voir la page pour de "vrai".

C'est une toute première étape mais je compte bien continuer !

Haut de la page