Skip to content

Commit 94981aa

Browse files
sebpruniersebprunier
committed
Upgrade step-0
1 parent cba4a02 commit 94981aa

File tree

11 files changed

+216
-128
lines changed

11 files changed

+216
-128
lines changed

‎step-0/readme.md

Lines changed: 47 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ Créez un fichier `package.json`, en déclarant les dépendances React :
88
{
99
"name": "react-workshop",
1010
"description": "React Workshop",
11-
"version": "0.0.0",
11+
"version": "0.1.0",
1212
"dependencies": {
13-
"react": "0.14.3",
14-
"react-dom": "0.14.3"
13+
"react": "0.14.7",
14+
"react-dom": "0.14.7"
1515
}
1616
}
1717
```
@@ -21,93 +21,84 @@ Lancez ensuite la commande `npm install` afin de télécharger localement les d
2121

2222
## Premier componsant
2323

24-
### todo.js
24+
### wine.js
2525

26-
Dans le répertoire `src/components`, créez le fichier `todo.js` qui contient le code de notre premier componsant, nommé `Todo` :
26+
Dans le répertoire `src/components`, créez le fichier `wine.js` qui contient le code de notre premier componsant, nommé `Wine` :
2727

2828
```javascript
29-
var React = require('react');
29+
import React from 'react';
3030

31-
var Todo = React.createClass({
32-
propTypes: {
33-
text: React.PropTypes.string.isRequired
34-
},
31+
const WineStyle = {
32+
padding: 8,
33+
boxShadow: '0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12)'
34+
};
3535

36-
render: function () {
37-
return (
38-
<div className="todo">
39-
{this.props.text}
40-
</div>
41-
);
42-
}
36+
const Wine = React.createClass({
37+
propTypes: {
38+
name: React.PropTypes.string.isRequired
39+
},
40+
41+
render() {
42+
return (
43+
<div style={WineStyle}>
44+
{this.props.name}
45+
</div>
46+
);
47+
}
4348
});
4449

45-
module.exports = Todo;
50+
export default Wine;
4651
```
4752

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`.
53+
Ce premier composant est volontairement très simple (de type "hello world"), il retourne simplement le nom du vin dans un élément HTML `<div>`.
54+
Le nom du vin est passé au composant grâce à une propriété `name`. Cette propriété est définie comme étant de type `string` et obligatoire (partie `propTypes` du composant).
5255

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*
56+
Un style est également appliqué au componsant via l'attribut `style`.
5557

5658
Vous pouvez également utiliser directement la fonction `createElement` de l'API `React` :
5759

5860
```javascript
59-
render: function () {
61+
render() {
6062
return React.createElement(
6163
'div',
62-
{className: 'todo'},
63-
this.props.text
64+
{style: WineStyle},
65+
this.props.name
6466
);
6567
}
6668
```
6769

6870
### index.html
6971

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.
72+
Dans le dossier `public`, 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.
7173

7274
```html
7375
<!DOCTYPE html>
7476
<html>
7577
<head>
7678
<meta charset="UTF-8"/>
77-
<title>React Workshop - Etape 0</title>
78-
<link rel="stylesheet" href="/css/index.css">
79+
<title>React Workshop</title>
7980
</head>
8081
<body>
81-
<h1>Etape 0 - Installation et premier composant</h1>
82+
<h1>Wines</h1>
8283

8384
<div id="main"></div>
8485

8586
</body>
8687
</html>
8788
```
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-
```
9889

9990
### app.js
10091

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 :
92+
A la racine du répertoire `src`, créez le fichier `app.js` qui contient le code nécessaire au rendu du componsant `Wine` dans la `<div>` créée précédemment :
10293

10394
```javascript
104-
var React = require('react');
105-
var ReactDOM = require('react-dom');
95+
import React from 'react';
96+
import ReactDOM from 'react-dom';
10697

107-
var Todo = require('./components/todo');
98+
import Wine from './components/wine';
10899

109100
ReactDOM.render(
110-
<Todo text="Ceci est une tâche à réaliser."/>,
101+
<Wine name="Château Chevrol Bel Air"/>,
111102
document.getElementById('main')
112103
);
113104
```
@@ -117,8 +108,8 @@ Vous pouvez également utiliser directement la fonction `createElement` de l'API
117108
```javascript
118109
ReactDOM.render(
119110
React.createElement(
120-
Todo,
121-
{text:'Ceci est une tâche à réaliser.'}
111+
Wine,
112+
{name:'Château Chevrol Bel Air'}
122113
),
123114
document.getElementById('main')
124115
);
@@ -196,7 +187,7 @@ Enfin, pensez à référencer le script `bundle.js` dans le fichier `index.html`
196187

197188
```html
198189
<body>
199-
<h1>Etape 0 - Installation et premier composant</h1>
190+
<h1>Wines</h1>
200191

201192
<div id="main"></div>
202193

@@ -225,7 +216,7 @@ Ajoutez un nouveau script permettant de lancer le serveur Webpack :
225216

226217
Lancez enfin la commande `npm start` et ouvrez la page `http://localhost:8080`.
227218

228-
Modifiez le code du composant `Todo` et observez les modifications en live dans votre navigateur !
219+
Modifiez le code du composant `Wine` et observez les modifications en live dans votre navigateur !
229220

230221
## ESLint
231222

@@ -249,13 +240,15 @@ Créez ensuite le fichier `.eslintrc` qui permet de configurer ESLint :
249240
"extends": "eslint:recommended",
250241
"env": {
251242
"browser": true,
252-
"node": true
243+
"node": true,
244+
"es6": true
253245
},
254246
"plugins": [
255247
"react"
256248
],
257249
"ecmaFeatures": {
258-
"jsx": true
250+
"jsx": true,
251+
"modules": true
259252
},
260253
"rules": {
261254
"react/prop-types": 1,
@@ -266,7 +259,7 @@ Créez ensuite le fichier `.eslintrc` qui permet de configurer ESLint :
266259
* L'attribut `extends` permet d'hériter d'une configuration existante. `eslint:recommended` contient les règles recommandée par ESLint.
267260
* 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.
268261
* 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.
262+
* La partie `ecmaFeatures` permet de définir les options du langage Javascript supportées lors de l'analyse. Ici nous activons la syntaxe JSX ainsi que les modules ES6.
270263
* 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)
271264

272265
Il est possible d'exclure certains fichiers ou dossiers de l'analyse, grâce au fichier `.eslintignore`. Exemple :
@@ -281,6 +274,6 @@ Enfin, ajoutez un script dans le fichier `package.json` permettant d'exécuter E
281274

282275
```json
283276
"scripts": {
284-
"lint": "eslint src tests"
277+
"lint": "eslint src"
285278
}
286279
```

‎step-1/.eslintrc

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,18 @@
22
"extends": "eslint:recommended",
33
"env": {
44
"browser": true,
5-
"node": true
5+
"node": true,
6+
"es6": true
67
},
78
"plugins": [
89
"react"
910
],
1011
"ecmaFeatures": {
11-
"jsx": true
12+
"jsx": true,
13+
"modules": true
1214
},
1315
"rules": {
14-
"react/display-name": 1,
16+
"react/display-name": 0,
1517
"react/forbid-prop-types": 1,
1618
"react/jsx-boolean-value": 1,
1719
"react/jsx-closing-bracket-location": 1,
@@ -37,7 +39,7 @@
3739
"react/no-multi-comp": 1,
3840
"react/no-set-state": 1,
3941
"react/no-unknown-property": 1,
40-
"react/prefer-es6-class": 1,
42+
"react/prefer-es6-class": 0,
4143
"react/prop-types": 1,
4244
"react/react-in-jsx-scope": 1,
4345
"react/require-extension": 1,

‎step-1/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "react-workshop",
33
"description": "React Workshop",
4-
"version": "0.0.0",
4+
"version": "0.1.0",
55
"dependencies": {
6-
"react": "0.14.3",
7-
"react-dom": "0.14.3"
6+
"react": "0.14.7",
7+
"react-dom": "0.14.7"
88
},
99
"devDependencies": {
1010
"webpack": "1.12.9",

‎step-1/src/app.js

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,7 @@ import ReactDOM from 'react-dom';
33

44
import Wine from './components/wine';
55

6-
const ChevrolBelAir = {
7-
"id": "chevrol-bel-air",
8-
"name": "Château Chevrol Bel Air",
9-
"type": "Rouge",
10-
"appellation": {
11-
"name": "Lalande-de-Pomerol",
12-
"region": "Bordeaux"
13-
},
14-
"grapes": ["Cabernet Sauvignon", "Merlot", "Cabernet Franc"]
15-
};
16-
176
ReactDOM.render(
18-
<Wine wine={ChevrolBelAir}/>,
7+
<Wine name="Château Chevrol Bel Air"/>,
198
document.getElementById('main')
209
);

‎step-1/src/components/wine.js

Lines changed: 9 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,22 @@
1-
import React, { PropTypes } from 'react';
1+
import React from 'react';
22

3-
const Styles = {
4-
Card: {
5-
padding: 8,
6-
boxSizing: 'border-box',
7-
boxShadow: '0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12)',
8-
width: '40%',
9-
minHeight: 280
10-
},
11-
Title: {
12-
fontWeight: 'bold',
13-
fontSize: '1.2em'
14-
},
15-
Info: {
16-
marginTop: 16,
17-
marginBottom: 16
18-
},
19-
Label: {
20-
color: 'white',
21-
marginRight: 8,
22-
padding: 4,
23-
background: 'grey',
24-
borderRadius: '4px'
25-
},
26-
Image: {
27-
float: 'left'
28-
}
3+
const WineStyle = {
4+
padding: 8,
5+
boxShadow: '0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12)'
296
};
307

318
const Wine = React.createClass({
329
propTypes: {
33-
wine: PropTypes.shape({
34-
id: PropTypes.string,
35-
name: PropTypes.string,
36-
type: PropTypes.oneOf(['Rouge', 'Blanc', 'Rosé', 'Effervescent', 'Moelleux']),
37-
appellation: PropTypes.shape({
38-
name: PropTypes.string,
39-
region: PropTypes.string
40-
}),
41-
grapes: PropTypes.arrayOf(PropTypes.string)
42-
})
10+
name: React.PropTypes.string
4311
},
4412

4513
render() {
46-
let wine = this.props.wine;
4714
return (
48-
<div style={Styles.Card}>
49-
<img style={Styles.Image} src="img/chevrol-bel-air.png" />
50-
<div style={Styles.Title}>{wine.name}</div>
51-
<div style={Styles.Info}>
52-
<span style={Styles.Label}>Type</span>{wine.type}
53-
</div>
54-
<div style={Styles.Info}>
55-
<span style={Styles.Label}>Région</span>{wine.appellation.region}
56-
</div>
57-
<div style={Styles.Info}>
58-
<span style={Styles.Label}>Appellation</span>{wine.appellation.name}
59-
</div>
60-
<div style={Styles.Info}>
61-
<span style={Styles.Label}>Cépages</span>{wine.grapes.join(', ')}
62-
</div>
15+
<div style={WineStyle}>
16+
{this.props.name}
6317
</div>
64-
)
18+
);
6519
}
66-
})
20+
});
6721

6822
export default Wine;

‎step-2/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎step-2/.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
webpack.config.js
3+
public
4+
README.md

0 commit comments

Comments
 (0)