Bien commencer avec ReactJS

Vivien

ReactJS, on en parle beaucoup aujourd’hui. J’ai voulu voir ce que ça donnait.

Contrairement à Angular, ce n’est pas un framwork JavaScript mais une librairie. Cela induit donc qu’on a pas réellement de structure bien définie pour commencer. C’est d’ailleurs souvent le fouillis sur internet et on trouve de tout. Ce qui est parfois déroutant pour les nouveaux arrivants.
Je vous propose donc un petit “kit” que je me suis composé pour bien démarrer.

Avant de commencer, je pars du principe que vous avez déjà sur votre environnement :
– NodeJS (plus npm) => https://nodejs.org/en/
– Cygwin si vous êtes sur windows => http://cygwin.com/install.html

1- Venant du monde Java, je n’avais aucune connaissance sur comment gérer un projet JavaScript. En java, nous avons Maven que nous configurons via un pom.xml. En JavaScript, il y a npm. Et à la manière de maven, on passera ici par un fichier pour la configuration (Evidemment d’autres outils existent, mais nous utiliserons ici npm). Créez donc un fichier package.json à la racine de votre dossier :

Vous retrouvez dans ce fichier toutes les dépendances nécessaires à notre projet.

La première chose à laquelle je tenais, c’est d’utiliser la nouvelle norme ECMAScript 6. Même si les navigateurs ne la gèrent pas encore, c’est la norme de demain. Et venant du monde Java, je ne peux qu’apprécier cet effort de “typage” qui arrive dans le monde javascript.
Pour cela, nous allons utiliser BabelJS. C’est un outil qui nous permettra de compiler notre code JSX es6 au format es5 aujourd’hui géré par les navigateurs.

2- Configuration de notre projet pour utiliser babel et es6 (es2015) => Créer un fichier .babelrc à la racine

Ensuite, je tenais également à m’éviter les contraintes de lancer manuellement la compilation du code. Pour cela, nous allons utiliser Webpack. C’est un outil qui gère parfaitement la compilation à la volée. Concrètement, à chaque fois que vous sauvegardez un fichier, webpack le compile directement. Vous n’avez plus qu’à rafraîchir votre navigateur pour voir votre modification.
Mais pourquoi s’arrêter là ? Allons plus loin en faisant en sorte que le navigateur se rafraîchisse automatiquement. C’est ce que nous propose React Hot Loader

3- Configuration de webpack => Créer un fichier webpack.config.json à la racine

Ce fichier contient :
entry => Point d’entrée utilisé par notre serveur. Comme nous utilisons webpack-dev-server en mode hot replace, on rajoute les références, puis le fichier de départ (index.jsx)
output => Où seront compilé nos sources
plugins => Les plugins pour notre serveur. Ici le plugin pour recharger notre page à chaud
module => Les modules pour notre serveur. Contient les fichiers à prendre en compte et les loaders à utilisé.

4- Configuration du serveur node qui utilisera webpack => Créer un fichier server.js à la racine :

 

Et nous voilà avec notre configuration terminée. Avec ça vous avez de quoi commencer à développer en ReactJS. Vous trouverez évidemment pleins d’autres tuto sur internet présentant d’autres configurations. Celle-ci présente simplement un point de départ assez complet.

Passons maintenant à un petit “Hello, World!” pour tester notre configuration.
Pour mieux comprendre la suite, je vous invite à regarder le tutoriel Getting Started sur le site de react. Nous allons simplement adapter le code pour utiliser es6.
La première étape est de créer notre page html. Créez donc un fichier index.html à la racine

Ensuite créons un fichier index.jsx que l’on placera dans un dossier src.

Et le fichier App.jsx

Vous noterez la syntaxe qui diffère de ce que vous trouvez sur le tutoriel de React. Nous avons utilisé la nouvelle norme es6.
Maintenant que notre projet est enfin terminé, il ne nous reste plus qu’à essayer.

Dans votre dossier lancer les commandes suivantes :

Ouvrez votre navigateur sur http://localhost:3000. Vous devriez voir s’afficher Hello, world!
Changer maintenant le texte et regardez la magie s’opérer :)

N’hésitez pas à suivre le tutoriel complet dispo ici : https://facebook.github.io/react/docs/tutorial.html. Le challenge reste de développer en utilisant la norme es6 :)

facebooktwittergoogle_plusmail

3 thoughts on “Bien commencer avec ReactJS

Laisser un commentaire