Skip to content

Commit 477ab23

Browse files
sebpruniersebprunier
committed
Copy step-0 code from sebprunier's workshop
1 parent a4deabe commit 477ab23

File tree

12 files changed

+186
-0
lines changed

12 files changed

+186
-0
lines changed

‎step-1/.babelrc

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

‎step-1/.eslintignore

+4
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-1/.eslintrc

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

‎step-1/.gitignore

+7
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-1/package.json

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

‎step-1/public/css/index.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.todo {
2+
border: 1px solid darkblue;
3+
background: lightblue;
4+
color: darkblue;
5+
padding: 5px;
6+
}

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

13.2 KB
Loading

‎step-1/public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>React Workshop - Etape 0</title>
6+
7+
<link rel="stylesheet" href="/css/index.css">
8+
<link rel="icon" type="image/png" href="/img/react.png">
9+
</head>
10+
<body>
11+
<h1>Etape 0 - Installation et premier composant</h1>
12+
13+
<div id="main"></div>
14+
15+
<script src="/js/bundle.js"></script>
16+
</body>
17+
</html>

‎step-1/public/js/.gitkeep

Whitespace-only changes.

‎step-1/src/app.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var React = require('react');
2+
var ReactDOM = require('react-dom');
3+
4+
var Todo = require('./components/todo');
5+
6+
ReactDOM.render(
7+
<Todo text="Ceci est une tâche à réaliser."/>,
8+
document.getElementById('main')
9+
);
10+
11+
// Version utilisant directement la fonction createElement() de React
12+
/*
13+
ReactDOM.render(
14+
React.createElement(
15+
Todo,
16+
{text:'Ceci est une tâche à réaliser.'}
17+
),
18+
document.getElementById('main')
19+
);
20+
*/

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var React = require('react');
2+
3+
var Todo = React.createClass({
4+
propTypes: {
5+
text: React.PropTypes.string.isRequired
6+
},
7+
8+
render: function () {
9+
return (
10+
<div className="todo">
11+
{this.props.text}
12+
</div>
13+
);
14+
}
15+
16+
// Version utilisant directement la fonction createElement() de React
17+
/*
18+
render: function () {
19+
return React.createElement(
20+
'div',
21+
{className: 'todo'},
22+
this.props.text
23+
);
24+
}
25+
*/
26+
27+
});
28+
29+
module.exports = Todo;

‎step-1/webpack.config.js

+27
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)