Skip to content

Commit f1df67d

Browse files
committedMar 20, 2016
Add step-4: react-router
1 parent ae7d236 commit f1df67d

19 files changed

+390
-0
lines changed
 

‎index.sh

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#!/bin/bash
2+
3+
APP_PATH=`pwd`
4+
5+
STEPS=`find . -type d -name "step-*"`
6+
7+
for item in ${STEPS[*]}
8+
do
9+
if [ -f "$item/package.json" ];
10+
then
11+
npm install
12+
else
13+
echo "nothing to do for $item"
14+
fi
15+
done

‎step-4/.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-4/.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

‎step-4/.eslintrc

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"extends": "eslint:recommended",
3+
"env": {
4+
"browser": true,
5+
"node": true,
6+
"es6": true
7+
},
8+
"plugins": [
9+
"react"
10+
],
11+
"ecmaFeatures": {
12+
"jsx": true,
13+
"modules": true
14+
},
15+
"rules": {
16+
"jsx-quotes": 1,
17+
"react/display-name": 0,
18+
"react/forbid-prop-types": 1,
19+
"react/jsx-boolean-value": 1,
20+
"react/jsx-closing-bracket-location": 1,
21+
"react/jsx-curly-spacing": 1,
22+
"react/jsx-handler-names": 1,
23+
"react/jsx-indent-props": 1,
24+
"react/jsx-key": 1,
25+
"react/jsx-max-props-per-line": 1,
26+
"react/jsx-no-bind": 1,
27+
"react/jsx-no-duplicate-props": 1,
28+
"react/jsx-no-literals": 0,
29+
"react/jsx-no-undef": 1,
30+
"react/jsx-pascal-case": 1,
31+
"react/jsx-sort-prop-types": 1,
32+
"react/jsx-sort-props": 0,
33+
"react/jsx-uses-react": 1,
34+
"react/jsx-uses-vars": 1,
35+
"react/no-danger": 1,
36+
"react/no-did-mount-set-state": 0,
37+
"react/no-did-update-set-state": 0,
38+
"react/no-direct-mutation-state": 1,
39+
"react/no-multi-comp": 1,
40+
"react/no-set-state": 0,
41+
"react/no-unknown-property": 1,
42+
"react/prefer-es6-class": 0,
43+
"react/prop-types": 1,
44+
"react/react-in-jsx-scope": 1,
45+
"react/require-extension": 1,
46+
"react/self-closing-comp": 1,
47+
"react/sort-comp": 1,
48+
"react/wrap-multilines": 1
49+
}
50+
}

‎step-4/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Node.js
2+
node_modules
3+
npm-debug.log
4+
5+
# Bundles
6+
bundle.js
7+
bundle.js.map

‎step-4/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "react-workshop",
3+
"description": "React Workshop",
4+
"version": "0.1.0",
5+
"dependencies": {
6+
"react": "0.14.7",
7+
"react-dom": "0.14.7",
8+
"react-router": "^2.0.1",
9+
"whatwg-fetch": "^0.11.0"
10+
},
11+
"devDependencies": {
12+
"webpack": "1.12.9",
13+
"webpack-dev-server": "1.14.0",
14+
"babel-loader": "6.2.0",
15+
"babel-preset-es2015": "6.1.18",
16+
"babel-preset-react": "6.1.18",
17+
"babel-register": "6.3.13",
18+
"eslint": "1.10.3",
19+
"eslint-plugin-react": "3.11.3"
20+
},
21+
"scripts": {
22+
"lint": "eslint src",
23+
"bundle": "webpack -p --colors --progress",
24+
"start": "webpack-dev-server -d --colors --inline --content-base public",
25+
"build": "npm run lint && npm run bundle"
26+
}
27+
}

‎step-4/public/css/avalanche.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎step-4/public/css/main.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
font-family: 'Roboto', sans-serif;
3+
}

‎step-4/public/img/chevrol-bel-air.png

28.6 KB
Loading

‎step-4/public/img/react.png

13.2 KB
Loading

‎step-4/public/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>React Workshop</title>
6+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7+
<link href="./css/avalanche.css" rel="stylesheet" type="text/css">
8+
<link href="./css/main.css" rel="stylesheet" type="text/css">
9+
<link rel="icon" type="image/png" href="/img/react.png">
10+
</head>
11+
<body>
12+
<h1>Wines</h1>
13+
14+
<div id="main"></div>
15+
16+
<script src="/js/bundle.js"></script>
17+
</body>
18+
</html>

‎step-4/public/js/.gitkeep

Whitespace-only changes.

‎step-4/src/app.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import WineApp from './components/wine-app';
5+
import Regions from './components/regions';
6+
import WineList from './components/wine-list';
7+
import Wine from './components/wine';
8+
import { NotFound } from './components/not-found';
9+
10+
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
11+
12+
ReactDOM.render(
13+
<Router history={hashHistory}>
14+
<Route path="/" component={WineApp}>
15+
<IndexRoute component={Regions} />
16+
<Route path="regions/:regionId" component={WineList} />
17+
<Route path="regions/:regionId/wines/:wineId" component={Wine} />
18+
<Route path="*" component={NotFound} />
19+
</Route>
20+
</Router>
21+
, document.getElementById('main')
22+
);

‎step-4/src/components/not-found.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { PropTypes } from 'react';
2+
3+
export const NotFound = React.createClass({
4+
render() {
5+
return (
6+
<h2>Il semble que vous n'êtes pas au bon endroit !!!</h2>
7+
);
8+
}
9+
});

‎step-4/src/components/regions.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, { PropTypes } from 'react';
2+
import { Link } from 'react-router';
3+
4+
const computeRegionStyle = function(region, selected) {
5+
let style = {
6+
padding: 16,
7+
cursor: 'pointer',
8+
};
9+
if (region === selected) {
10+
style['fontWeight'] = 'bold';
11+
style['backgroundColor'] = 'lightGrey';
12+
}
13+
return style;
14+
}
15+
16+
const Regions = React.createClass({
17+
18+
getInitialState() {
19+
return {
20+
regions: []
21+
};
22+
},
23+
24+
componentDidMount() {
25+
fetch('http://localhost:3000/api/regions')
26+
.then(r => r.json())
27+
.then(data => {
28+
this.setState({ regions: data });
29+
})
30+
.catch(response => {
31+
console.error(response); // eslint-disable-line
32+
});
33+
},
34+
35+
render () {
36+
return (
37+
<div>
38+
{
39+
this.state.regions.map(region =>
40+
<div key={region}
41+
style={computeRegionStyle(region, this.props.selected)}>
42+
<Link to={`/regions/${region}`}>{region}</Link>
43+
</div>
44+
)
45+
}
46+
</div>
47+
)
48+
}
49+
})
50+
51+
export default Regions

‎step-4/src/components/wine-app.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import 'whatwg-fetch';
2+
import React from 'react';
3+
4+
import Regions from './regions';
5+
import WineList from './wine-list';
6+
import Wine from './wine';
7+
8+
const WineApp = React.createClass({
9+
10+
render () {
11+
return (
12+
<div className="grid">
13+
<div className="1/2 grid__cell">
14+
{this.props.children}
15+
</div>
16+
</div>
17+
);
18+
}
19+
})
20+
21+
export default WineApp

‎step-4/src/components/wine-list.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, { PropTypes } from 'react';
2+
import { Link } from 'react-router';
3+
4+
const computeWineStyle = function(region, selected) {
5+
let style = {
6+
padding: 16
7+
};
8+
if (region === selected) {
9+
style['fontWeight'] = 'bold';
10+
style['backgroundColor'] = 'lightGrey';
11+
}
12+
return style;
13+
}
14+
15+
const WineList = React.createClass({
16+
17+
getInitialState() {
18+
return {
19+
wines: []
20+
};
21+
},
22+
23+
componentDidMount() {
24+
fetch(`http://localhost:3000/api/wines?region=${this.props.params.regionId}`)
25+
.then(r => r.json())
26+
.then(data => {
27+
this.setState({ wines: data });
28+
})
29+
.catch(response => {
30+
console.error(response); // eslint-disable-line
31+
});
32+
},
33+
34+
render () {
35+
if (this.state.wines.length === 0) {
36+
return <div>Loading ...</div>
37+
}
38+
return (
39+
<div>
40+
{
41+
this.state.wines.map((wine, index) =>
42+
<div key={wine.id} style={computeWineStyle(wine, this.props.selected)}>
43+
<Link to={`/regions/${this.props.params.regionId}/wines/${wine.id}`}>{wine.name}</Link>
44+
</div>
45+
)
46+
}
47+
</div>
48+
)
49+
}
50+
})
51+
52+
export default WineList

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, { PropTypes } from 'react';
2+
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+
minHeight: 280
9+
},
10+
Title: {
11+
fontWeight: 'bold',
12+
fontSize: '1.2em'
13+
},
14+
Info: {
15+
marginTop: 16,
16+
marginBottom: 16
17+
},
18+
Label: {
19+
color: 'white',
20+
marginRight: 8,
21+
padding: 4,
22+
background: 'grey',
23+
borderRadius: '4px'
24+
},
25+
Image: {
26+
float: 'left'
27+
}
28+
};
29+
30+
const Wine = React.createClass({
31+
32+
getInitialState() {
33+
return {
34+
wine: undefined,
35+
};
36+
},
37+
38+
componentDidMount() {
39+
fetch(`http://localhost:3000/api/wines/${this.props.params.wineId}`)
40+
.then(r => r.json())
41+
.then(data => {
42+
this.setState({ wine: data });
43+
})
44+
.catch(response => {
45+
console.error(response); // eslint-disable-line
46+
});
47+
},
48+
49+
render() {
50+
const { wine } = this.state;
51+
if (!wine) {
52+
return <div>Loading ...</div>
53+
}
54+
return (
55+
<div style={Styles.Card}>
56+
<img style={Styles.Image}
57+
src={`http://localhost:3000/api/wines/${wine.id}/image`}
58+
/>
59+
<div style={Styles.Title}>{wine.name}</div>
60+
<div style={Styles.Info}>
61+
<span style={Styles.Label}>Type</span>{wine.type}
62+
</div>
63+
<div style={Styles.Info}>
64+
<span style={Styles.Label}>Région</span>{wine.appellation.region}
65+
</div>
66+
<div style={Styles.Info}>
67+
<span style={Styles.Label}>Appellation</span>{wine.appellation.name}
68+
</div>
69+
<div style={Styles.Info}>
70+
<span style={Styles.Label}>Cépages</span>{wine.grapes.join(', ')}
71+
</div>
72+
</div>
73+
)
74+
}
75+
});
76+
77+
export default Wine;

‎step-4/webpack.config.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var webpack = require('webpack');
2+
3+
module.exports = {
4+
output: {
5+
path: './public/js/',
6+
publicPath: '/js/',
7+
filename: 'bundle.js'
8+
},
9+
entry: {
10+
app: ['./src/app.js']
11+
},
12+
resolve: {
13+
extensions: ['', '.js', '.jsx']
14+
},
15+
module: {
16+
loaders: [
17+
{
18+
test: /\.js$/,
19+
exclude: /node_modules/,
20+
loader: 'babel',
21+
query: {
22+
presets: ['react', 'es2015']
23+
}
24+
}
25+
]
26+
}
27+
};

0 commit comments

Comments
 (0)
Please sign in to comment.