|
| 1 | +# Etape 0 - Installation et premier composant |
| 2 | + |
| 3 | +## Package.json |
| 4 | + |
| 5 | +Créez un fichier `package.json`, en déclarant les dépendances React : |
| 6 | + |
| 7 | +```json |
| 8 | +{ |
| 9 | + "name": "react-workshop", |
| 10 | + "description": "React Workshop", |
| 11 | + "version": "0.0.0", |
| 12 | + "dependencies": { |
| 13 | + "react": "0.14.3", |
| 14 | + "react-dom": "0.14.3" |
| 15 | + } |
| 16 | +} |
| 17 | +``` |
| 18 | + |
| 19 | +Lancez ensuite la commande `npm install` afin de télécharger localement les dépendances (elles se trouvent dans le répertoire `node_modules`) |
| 20 | + |
| 21 | + |
| 22 | +## Premier componsant |
| 23 | + |
| 24 | +### todo.js |
| 25 | + |
| 26 | +Dans le répertoire `src/components`, créez le fichier `todo.js` qui contient le code de notre premier componsant, nommé `Todo` : |
| 27 | + |
| 28 | +```javascript |
| 29 | +var React = require('react'); |
| 30 | + |
| 31 | +var Todo = React.createClass({ |
| 32 | + propTypes: { |
| 33 | + text: React.PropTypes.string.isRequired |
| 34 | + }, |
| 35 | + |
| 36 | + render: function () { |
| 37 | + return ( |
| 38 | + <div className="todo"> |
| 39 | + {this.props.text} |
| 40 | + </div> |
| 41 | + ); |
| 42 | + } |
| 43 | +}); |
| 44 | + |
| 45 | +module.exports = Todo; |
| 46 | +``` |
| 47 | + |
| 48 | +Ce premier composant est volontairement très simple (type "hello world"), il retourne simplement un texte dans un élément HTML `<div>`. |
| 49 | +Ce texte est passé au composant grâce à une propriété `text`. Cette propriété est définie comme étant de type `string` et obligatoire (partie `propTypes` du composant). |
| 50 | + |
| 51 | +Afin de pouvoir ajouter du style sur ce componsant, on définit également une classe CSS via l'attribut `className`. |
| 52 | + |
| 53 | +*Remarque : n'oubliez pas que JSX n'est que du "sucre syntaxique" transformé en javascript, ce n'est pas du HTML ! |
| 54 | +Ce qui explique l'utilisation de `className` et non `class` qui est un mot clé réservé en javascript* |
| 55 | + |
| 56 | +Vous pouvez également utiliser directement la fonction `createElement` de l'API `React` : |
| 57 | + |
| 58 | +```javascript |
| 59 | +render: function () { |
| 60 | + return React.createElement( |
| 61 | + 'div', |
| 62 | + {className: 'todo'}, |
| 63 | + this.props.text |
| 64 | + ); |
| 65 | +} |
| 66 | +``` |
| 67 | + |
| 68 | +### index.html |
| 69 | + |
| 70 | +Créez une page HTML basique et ajoutez-y une `<div>` (possédant l'identifiant `main`) dans laquelle nous effectuerons le rendu de notre composant. |
| 71 | + |
| 72 | +```html |
| 73 | +<!DOCTYPE html> |
| 74 | +<html> |
| 75 | +<head> |
| 76 | + <meta charset="UTF-8"/> |
| 77 | + <title>React Workshop - Etape 0</title> |
| 78 | + <link rel="stylesheet" href="/css/index.css"> |
| 79 | +</head> |
| 80 | +<body> |
| 81 | +<h1>Etape 0 - Installation et premier composant</h1> |
| 82 | + |
| 83 | +<div id="main"></div> |
| 84 | + |
| 85 | +</body> |
| 86 | +</html> |
| 87 | +``` |
| 88 | +Cette page référence la feuille de style `css/index.css`. Pensez à la créer afin de donner du style au componsant `Todo`. Par exemple : |
| 89 | + |
| 90 | +```css |
| 91 | +.todo { |
| 92 | + border: 1px solid darkblue; |
| 93 | + background: lightblue; |
| 94 | + color: darkblue; |
| 95 | + padding: 5px; |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +### app.js |
| 100 | + |
| 101 | +A la racine du répertoire `src`, créez le fichier `app.js` qui contient le code nécessaire au rendu du componsant `Todo` dans la `<div>` créée précédemment : |
| 102 | + |
| 103 | +```javascript |
| 104 | +var React = require('react'); |
| 105 | +var ReactDOM = require('react-dom'); |
| 106 | + |
| 107 | +var Todo = require('./components/todo'); |
| 108 | + |
| 109 | +ReactDOM.render( |
| 110 | + <Todo text="Ceci est une tâche à réaliser."/>, |
| 111 | + document.getElementById('main') |
| 112 | +); |
| 113 | +``` |
| 114 | + |
| 115 | +Vous pouvez également utiliser directement la fonction `createElement` de l'API `React` : |
| 116 | + |
| 117 | +```javascript |
| 118 | +ReactDOM.render( |
| 119 | + React.createElement( |
| 120 | + Todo, |
| 121 | + {text:'Ceci est une tâche à réaliser.'} |
| 122 | + ), |
| 123 | + document.getElementById('main') |
| 124 | +); |
| 125 | +``` |
| 126 | + |
| 127 | +## Build avec Webpack |
| 128 | + |
| 129 | +Nous utilisons l'outil [Webpack](https://webpack.github.io/) afin de construire notre application. |
| 130 | + |
| 131 | +En complément de Webpack, nous utilisons [Babel](https://babeljs.io/), un compilateur Javascript qui permet d'utiliser les dernières nouveautés du langage. |
| 132 | +Dans notre cas, nous utilisons les plugins `react` et `es2015`. |
| 133 | + |
| 134 | +Dans le fichier `package.json`, ajoutez les dépendances de développement nécessaires au build Webpack : |
| 135 | + |
| 136 | +```json |
| 137 | +"devDependencies": { |
| 138 | + "webpack": "1.12.9", |
| 139 | + "babel-loader": "6.2.0", |
| 140 | + "babel-preset-es2015": "6.1.18", |
| 141 | + "babel-preset-react": "6.1.18" |
| 142 | +} |
| 143 | +``` |
| 144 | + |
| 145 | +Créez le fichier `webpack.config.js` permettant de configurer Webpack et Babel : |
| 146 | + |
| 147 | +```javascript |
| 148 | +var webpack = require('webpack'); |
| 149 | + |
| 150 | +module.exports = { |
| 151 | + output: { |
| 152 | + path: './public/js/', |
| 153 | + publicPath: '/js/', |
| 154 | + filename: 'bundle.js' |
| 155 | + }, |
| 156 | + entry: { |
| 157 | + app: ['./src/app.js'] |
| 158 | + }, |
| 159 | + resolve: { |
| 160 | + extensions: ['', '.js', '.jsx'] |
| 161 | + }, |
| 162 | + module: { |
| 163 | + loaders: [ |
| 164 | + { |
| 165 | + test: /\.js$/, |
| 166 | + exclude: /node_modules/, |
| 167 | + loader: 'babel', |
| 168 | + query: { |
| 169 | + presets: ['react', 'es2015'] |
| 170 | + } |
| 171 | + } |
| 172 | + ] |
| 173 | + } |
| 174 | +}; |
| 175 | +``` |
| 176 | + |
| 177 | +La configuration de Webpack est simple : |
| 178 | + |
| 179 | +* Le point d'entrée est le fichier `src/app.js` |
| 180 | +* Le fichier `bundle.js` est généré dans le répertoire `public/js` |
| 181 | +* Le build exécute le lanceur `babel` avec les plugins `react` et `es2015` |
| 182 | + * *Remarque : les plugins babel peuvent également être définis dans le fichier de configuration `.babelrc`* |
| 183 | + |
| 184 | +Vous pouvez ajouter les commandes Webpack sous forme de scripts dans le fichier `package.json`. Par exemple : |
| 185 | + |
| 186 | +```json |
| 187 | +"scripts": { |
| 188 | + "bundle": "webpack -p --colors --progress" |
| 189 | +} |
| 190 | +``` |
| 191 | + |
| 192 | +Ainsi, la commande `npm run bundle` permet de construire le fichier `bundle.js` |
| 193 | + |
| 194 | + |
| 195 | +Enfin, pensez à référencer le script `bundle.js` dans le fichier `index.html` : |
| 196 | + |
| 197 | +```html |
| 198 | +<body> |
| 199 | +<h1>Etape 0 - Installation et premier composant</h1> |
| 200 | + |
| 201 | +<div id="main"></div> |
| 202 | + |
| 203 | +<script src="/js/bundle.js"></script> |
| 204 | +</body> |
| 205 | +``` |
| 206 | + |
| 207 | +## Exécution avec Webpack Dev Server |
| 208 | + |
| 209 | +Afin de rendre la page `index.html` dans un navigateur, nous utilisons [Webpack Dev Server](http://webpack.github.io/docs/webpack-dev-server.html). |
| 210 | + |
| 211 | +Ajoutez la dépendance à `webpack-dev-server` dans le fichier `package.json` : |
| 212 | + |
| 213 | +```json |
| 214 | +"devDependencies": { |
| 215 | + "webpack-dev-server": "1.14.0" |
| 216 | +} |
| 217 | +``` |
| 218 | +Ajoutez un nouveau script permettant de lancer le serveur Webpack : |
| 219 | + |
| 220 | +```json |
| 221 | +"scripts": { |
| 222 | + "start": "webpack-dev-server -d --colors --inline --content-base public" |
| 223 | +} |
| 224 | +``` |
| 225 | + |
| 226 | +Lancez enfin la commande `npm start` et ouvrez la page `http://localhost:8080`. |
| 227 | + |
| 228 | +Modifiez le code du composant `Todo` et observez les modifications en live dans votre navigateur ! |
| 229 | + |
| 230 | +## ESLint |
| 231 | + |
| 232 | +[ESLint](http://eslint.org/) est un outil qui permet d'analyser votre code Javascript selon un certains nombre de règles. |
| 233 | + |
| 234 | +Dans notre cas, nous allons l'utiliser avec le plugin [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react) qui propose des règles spécifiques au développement de composants React. |
| 235 | + |
| 236 | +Pour commencer, ajoutez les dépendances nécessaires dans le fichier `package.json` : |
| 237 | + |
| 238 | +```json |
| 239 | +"devDependencies": { |
| 240 | + "eslint": "1.10.3", |
| 241 | + "eslint-plugin-react": "3.11.3" |
| 242 | +} |
| 243 | +``` |
| 244 | + |
| 245 | +Créez ensuite le fichier `.eslintrc` qui permet de configurer ESLint : |
| 246 | + |
| 247 | +```json |
| 248 | +{ |
| 249 | + "extends": "eslint:recommended", |
| 250 | + "env": { |
| 251 | + "browser": true, |
| 252 | + "node": true |
| 253 | + }, |
| 254 | + "plugins": [ |
| 255 | + "react" |
| 256 | + ], |
| 257 | + "ecmaFeatures": { |
| 258 | + "jsx": true |
| 259 | + }, |
| 260 | + "rules": { |
| 261 | + "react/prop-types": 1, |
| 262 | + } |
| 263 | +} |
| 264 | +``` |
| 265 | + |
| 266 | +* L'attribut `extends` permet d'hériter d'une configuration existante. `eslint:recommended` contient les règles recommandée par ESLint. |
| 267 | +* La partie `env` permet de définir quelles variables globales sont potentiellement utilisées dans le code. Ici nous ajoutons celles du navigateur et celle de node. |
| 268 | +* La partie `plugins` permet d'ajouter des plugins ESLint. Ici nous ajoutons le plugin React. |
| 269 | +* La partie `ecmaFeatures` permet de définir les options du langage Javascript supportées lors de l'analyse. Ici nous activons la syntaxe JSX. |
| 270 | +* La partie `rules` permet de définir les règles à appliquer lors de l'analyse du code. Pour plus de détails sur les règles disponibles : [https://www.npmjs.com/package/eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) |
| 271 | + |
| 272 | +Il est possible d'exclure certains fichiers ou dossiers de l'analyse, grâce au fichier `.eslintignore`. Exemple : |
| 273 | + |
| 274 | +``` |
| 275 | +node_modules |
| 276 | +webpack.config.js |
| 277 | +public |
| 278 | +``` |
| 279 | + |
| 280 | +Enfin, ajoutez un script dans le fichier `package.json` permettant d'exécuter ESLint grâce à la commande `npm run lint` : |
| 281 | + |
| 282 | +```json |
| 283 | +"scripts": { |
| 284 | + "lint": "eslint src tests" |
| 285 | +} |
| 286 | +``` |
0 commit comments