Premiers pas avec React.js - Partie 1
I - Quâest-ce que React.js ?
A - Présentation
React.js est une bibliothĂšque Javascript libre dĂ©veloppĂ©e par Facebook depuis 2013. Cette bibliothĂšque permet via un systĂšme de composants de gĂ©nĂ©rer une portion ou une page en HTML Ă chaque changement dâĂ©tat. Il sâagit lĂ de faciliter la crĂ©ation dâapplications web Monopage.
React.js gĂšre simplement la partie interface (Vue) dâune application web. En effet, React est connu pour ĂȘtre rapide, les applications faites en React peuvent gĂ©rer des mises Ă jour complexes tout en restant rapides et rĂ©actives. Il reste Ă©galement modulaire, au lieu dâĂ©crire de gros fichiers de code denses on peut Ă©crire beaucoup de petits fichiers rĂ©utilisables. La modularitĂ© de React reste une bonne solution aux problĂšmes de maintenabilitĂ© de JavaScript.
B - JSX
React.js utilise JSX pour le rendu de ses composants. Cette extension syntaxique de Javascript comporte plusieurs diffĂ©rences avec le HTML bien quâelle sâen rapproche.
Cependant, on doit avoir un compilateur JSX pour traduire nâimporte quel code JSX en JavaScript.
1 | const title = <h1>Hello World</h1> |
ReactDOM est une bibliothÚque Javascript qui contient plusieurs méthodes spécifiques à React et qui traitent le DOM d'une maniÚre ou d'une autre.
ReactDOM.render() est le moyen le plus commun pour effectuer le rendu dâun Ă©lĂ©ment JSX. Il prend lâexpression JSX et crĂ©Ă© un arbre correspondant aux noeuds du DOM puis il ajoute cet arbre au DOM.
C - Virtual DOM
Avec React.js, pour chaque objet DOM, il y a un "objet DOM virtuel" correspondant. Un objet DOM virtuel est une représentation d'un objet DOM, comme une copie allégée.
Un objet DOM virtuel a les mĂȘmes propriĂ©tĂ©s qu'un objet DOM rĂ©el, mais il n'a pas le pouvoir de changer directement ce qui est Ă l'Ă©cran. Entre deux mises Ă jour, React va donc comparer l'ancien et le nouveau DOM Virtuel pour dĂ©terminer oĂč effectuer d'Ă©ventuels changements.
Suite à ça donc, React.js va cibler les noeuds du DOM oĂč des modifications doivent ĂȘtre faites et les appliquer. Ce principe va limiter les calculs dans notre page et donc se traduire par des applications plus rapides.
II - Installation et mise en route
A - Node & NPM
Pour pouvoir configurer votre Projet React.js vous aurez besoin dâinstaller Node.js sur votre ordinateur en suivant ce lien. En faisant ça, vous aurez accĂšs Ă Node Package Manager (NPM). NPM est le gestionnaire de paquets officiel de Node.js et il vous permettra de pouvoir installer au sein de votre projet des Packages (BibliothĂšque Javascript).
Vous trouverez toute la liste des packages disponibles sur https://www.npmjs.com/.
Pour commencer, dĂ©cidez oĂč vous voulez enregistrer votre application. Dans le terminal, cd oĂč vous voulez enregistrer votre application. Utilisez mkdir pour crĂ©er un nouveau rĂ©pertoire avec le nom de votre application. cd dans votre nouveau rĂ©pertoire.
Ensuite on va utiliser la commande
1 | npm init |
Cette commande va créer automatiquement un nouveau fichier nommé package.json qui contient des métadonnées sur votre nouveau projet comme ses dépendances ou les scripts d'exécution.
Dans le package.json, les dĂ©pendances servent Ă remplir diffĂ©rents objectifs. Certaines dĂ©pendances sont nĂ©cessaires pour construire votre projet Ă savoir celles dont vous avez besoin pour faire tourner votre code, dâautres sont nĂ©cessaire lorsque votre programme sâexĂ©cute, câest Ă dire celles dont vous aurez besoin Ă un moment ou Ă un autre lors de la phase de dĂ©veloppement, mais pas pour l'exĂ©cution du code. Ainsi, il existe plusieurs types de dĂ©pendances que vous pouvez avoir par exemple dependencies qui va regroupes les dĂ©pendances nĂ©cessaires pour faire tourner le code. Ensuite nous avons devDependencies qui va lui regrouper les dĂ©pendances auxquelles nous auront Ă faire appel lors des diffĂ©rentes phases de dĂ©veloppement mais non pour l'exĂ©cution du code.
1 2 3 4 5 6 7 8 | { âdependenciesâ: { âpackage_1â: â^1.0.0â }, âdevDependenciesâ: { âpackage_2: â^1.2.1â }} |
Enfin, on installe nos deux modules « react » et « react-dom »:
1 | npm install --save react react-dom |
B - Babel
Babel est un compilateur JavaScript qui inclut la possibilité de compiler JSX en JavaScript normal.
Le nom du module npm de Babel est babel-core. Au lieu de npm install --save babel-core on utilisera la syntaxe npm install --save-dev babel-core, parce que vous n'utiliserez Babel qu'en mode développement.
Vous allez également installer deux autres modules liés à Babel, nommés babel-loader et babel-preset-react :
1 | npm install --save-dev babel-core babel-loader babel-preset-react |
Pour que babel fonctionne vous devez Ă©crire un fichier de configuration de babel.
Dans votre répertoire racine, créez un nouveau fichier nommé .babelrc .
Puis enregistrer le code suivant dans votre fichier .babelrc :
1 | { presets: [react] } |
C - Webpack
Webpack est un âModule Bundlerâ qui a pour but de prendre tous les fichiers Javascript, CSS ou HTML et de les regrouper dans un ou plusieurs modules pour palier Ă la modularitĂ© du Javascript. Webpack va faire appel Ă des loaders (ex: Babel) qui vont gĂ©rer chaque aspect de lâapplication pour les compiler directement en Javascript interprĂ©table par le navigateur.
Pour faire court, Webpack agit en tant qu'harmoniseur en transformant le code hétérogÚne en code natif et statique directement compréhensible par le navigateur.
Dans notre cas, nous devons configurer webpack pour que notre app utilise Babel afin de compiler et de donner un chemin Ă notre fichier bundle.js
Afin de configurer Webpack nous allons commencer par installer le Package dans notre projet :
1 | npm install --save webpack webpack-dev-server webpack-cli |
Webpack-dev-server nous sera utile pour lancer un serveur web de dĂ©veloppement qui nous permettra dâutiliser des outils comme le hot reload.
Webpack-CLI (Command Line Interface) quant Ă lui est lâinterface en ligne de commande de Webpack.
Il est maintenant temps de créer notre fichier index.html à la racine de notre projet.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html> <head> <title> Premier composant React </title> </head> <body> <div id="app"></div> <script type="text/javascript" src="/bundle.js"></script> </body></html> |
Dans ce fichier, nous retrouvons une div avec lâid âappâ qui sera lâendroit oĂč notre code sera injectĂ©.
Pour finir la configuration du projet, nous allons maintenant crĂ©er un fichier index.js qui sera le point dâentrĂ©e de notre configuration Webpack. CrĂ©ez un dossier src dans lequel vous placerez ce fichier.
A la racine, créez le fichier index.js :
1 2 3 4 5 6 7 8 | import React from 'react';import ReactDOM from 'react-dom';// main appimport App from './components/App';ReactDOM.render(<App />, document.getElementById('app')) |
Dans ce fichier, nous importons react et react-dom. Nous importons aussi notre composant App que nous créerons juste aprÚs. Pour finir, nous effectuons le rendu dans notre node principal situé dans le fichier index.html précédemment créé.
A prĂ©sent,, il nous faut crĂ©er un dossier âwebpackâ dans lequel nous crĂ©erons un fichier âwebpack.dev.config.jsâ :
1 2 3 4 5 6 7 8 | var webpack = require('webpack');var path = require('path');module.exports = { entry: [ path.join(__dirname, '../index.js') ]} |
Ensuite, nous ajouterons des loaders qui auront pour but de compiler nos fichiers source :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | var webpack = require('webpack');var path = require('path');var parentDir = path.join(__dirname, '../');module.exports = { entry: [ path.join(parentDir, 'index.js') ], module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use:{ loader: 'babel-loader', options:{ presets: ['babel-preset-react'] } } } ] }, output: { path: parentDir + '/dist', filename: 'bundle.js' }, devServer: { contentBase: parentDir, historyApiFallback: true }} |
A travers ces quelques lignes, nous configurons babel-loader pour charger les fichiers js/jsx grĂące aux loaders. Ensuite, nous configurons webpack pour quâil sache oĂč placer le fichier bundle.js (cf output). La derniĂšre Ă©tape de la configuration de webpack est de lui spĂ©cifier les options relatives Ă notre serveur de dev (cf devServer).
Il est maintenant temps de créer notre premier composant React !
Ajoutez un dossier âcomponentsâ Ă votre projet et dans celui-ci, ajoutez un fichier App.js.
Pour ce premier exemple, nous allons simplement crĂ©er un composant qui affichera âHello World !â :
1 2 3 4 5 6 7 8 | import React, {Component} from 'react';export default class App extends Component { render () { return <p>Hello World !</p> }} |
Dans ce fichier nous commençons par importer React et Component depuis le package 'react'. Ensuite, nous exportons notre composant App. Afin de pouvoir afficher notre message, nous utilisons la méthode render() qui est automatiquement appelée dans react et qui va retourner le jsx affichant Hello World.
Avant de pouvoir tester notre App dans le navigateur, nous allons ajouter un script npm qui nous permettra de lancer le serveur de dev en entrant simplement la commande ânpm run devâ dans notre terminal.
Dans votre fichier package.json, ajoutez simplement les lignes suivantes :
1 2 3 4 5 6 7 | "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"} |
Il est maintenant temps de tester notre application !
Dans votre terminal, rentrez le commande précédemment créée :
1 | npm run dev |
Ensuite rendez vous sur http://localhost:8080 et TADA ! Notre message sâaffiche bien !
D - Create-react-app
Pour ceux préférant ne pas passer trop de temps à configurer leur projet, Facebook a mis à disposition une commande qui permet de pouvoir créer son projet React sans passer par la configuration de Webpack ainsi que de Babel qui seront directement pré-configurés. Ainsi vous pourrez directement vous concentrer sur votre projet !
1 | npx create-react-app my-app |
Commentaires