Skip to content

Commit 97ec38c

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #58 from calbzam/master
Sample 08 (Color picker) update from scratch
2 parents b2de1ff + b15b0b6 commit 97ec38c

File tree

8 files changed

+89
-85
lines changed

8 files changed

+89
-85
lines changed

‎01 HelloReact/src/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<body>
88
<h1>Sample app</h1>
99
<div id="root">
10-
</div
10+
</div>
1111
</body>
1212
</html>
13+

‎08 Colorpicker/.babelrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"presets": [
3+
[
4+
"env",
5+
{
6+
"modules": false
7+
}
8+
],
9+
"react"
10+
]
11+
}

‎08 Colorpicker/package.json‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
11
{
2-
"name": "samplereact",
2+
"name": "sample-es6",
33
"version": "1.0.0",
44
"description": "In this sample we are going to setup the basic plumbing to \"build\" our project and launch it in a dev server.",
55
"main": "index.js",
66
"scripts": {
7-
"start": "webpack-dev-server --inline",
7+
"start": "webpack-dev-server --mode development --inline --hot --open",
8+
"build": "webpack --mode development",
89
"test": "echo \"Error: no test specified\" && exit 1"
910
},
1011
"author": "",
1112
"license": "ISC",
1213
"devDependencies": {
13-
"babel-core": "^6.18.2",
14-
"babel-eslint": "^7.1.0",
15-
"babel-loader": "^6.2.7",
16-
"babel-plugin-transform-runtime": "^6.15.0",
17-
"babel-preset-es2015": "^6.18.0",
18-
"babel-preset-react": "^6.16.0",
19-
"css-loader": "^0.25.0",
20-
"eslint-config-airbnb": "^13.0.0",
21-
"file-loader": "^0.9.0",
22-
"html-webpack-plugin": "^2.24.1",
23-
"style-loader": "^0.13.1",
24-
"url-loader": "^0.5.7",
25-
"webpack": "^1.13.3",
26-
"webpack-devserver": "0.0.6"
14+
"babel-core": "^6.26.0",
15+
"babel-loader": "^7.1.4",
16+
"babel-preset-env": "^1.6.1",
17+
"babel-preset-react": "^6.24.1",
18+
"css-loader": "^0.28.11",
19+
"file-loader": "^1.1.11",
20+
"html-webpack-plugin": "^3.2.0",
21+
"mini-css-extract-plugin": "^0.4.0",
22+
"url-loader": "^1.0.1",
23+
"webpack": "^4.6.0",
24+
"webpack-cli": "^2.0.14",
25+
"webpack-dev-server": "3.1.0"
2726
},
2827
"dependencies": {
29-
"bootstrap": "^3.3.7",
30-
"react": "^15.3.2",
31-
"react-dom": "^15.3.2"
28+
"bootstrap": "^4.1.0",
29+
"prop-types": "^15.6.1",
30+
"react": "^16.3.2",
31+
"react-dom": "^16.3.2",
32+
"react-redux": "^5.0.7"
3233
}
3334
}

‎08 Colorpicker/src/app.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ export class App extends React.Component {
2828
blue: {this.state.color.blue}
2929
]
3030
</span>
31-
<ColorPicker color={this.state.color} onColorUpdated={this.setColorState} />
31+
<ColorPicker
32+
color={this.state.color}
33+
onColorUpdated={this.setColorState.bind(this)}
34+
/>
3235
</div>
3336
);
3437
}

‎08 Colorpicker/src/colordisplayer.jsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import * as React from 'react';
2+
import PropTypes from 'prop-types';
23

34
export const ColorDisplayer = (props) => {
4-
// `rgb(${props.color.red},${props.color.green}, ${props.color.blue}) })`
5-
// 'rgb(' + props.color.red + ', 40, 80)'
5+
`rgb(${props.color.red},${props.color.green}, ${props.color.blue}) })`
6+
'rgb(' + props.color.red + ', 40, 80)'
67
const divStyle = {
78
width: '120px',
89
height: '80px',
@@ -15,9 +16,10 @@ export const ColorDisplayer = (props) => {
1516
};
1617

1718
ColorDisplayer.propTypes = {
18-
color: React.PropTypes.shape({
19-
red: React.PropTypes.number.isRequired,
20-
green: React.PropTypes.number.isRequired,
21-
blue: React.PropTypes.number.isRequired,
19+
color: PropTypes.shape({
20+
red: PropTypes.number.isRequired,
21+
green: PropTypes.number.isRequired,
22+
blue: PropTypes.number.isRequired,
2223
}).isRequired,
2324
};
25+

‎08 Colorpicker/src/colorpicker.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import PropTypes from 'prop-types';
23

34
export const ColorPicker = props => (
45
<div>
@@ -56,11 +57,14 @@ export const ColorPicker = props => (
5657
</div>
5758
);
5859

59-
ColorPicker.propTypes = {
60-
color: React.PropTypes.shape({
61-
red: React.PropTypes.number.isRequired,
62-
green: React.PropTypes.number.isRequired,
63-
blue: React.PropTypes.number.isRequired,
60+
ColorPicker.propTypes = {
61+
color: PropTypes.shape({
62+
red: PropTypes.number.isRequired,
63+
green: PropTypes.number.isRequired,
64+
blue: PropTypes.number.isRequired,
6465
}).isRequired,
65-
onColorUpdated: React.PropTypes.func.isRequired,
66-
};
66+
onColorUpdated: PropTypes.func.isRequired,
67+
};
68+
69+
70+

‎08 Colorpicker/src/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Sample 01: HelloReact</title>
5+
<title>React + ES6 by example</title>
66
</head>
77
<body>
88
<h1>Sample app</h1>
9-
<div id="root"></div>
9+
<div id="root"></div>
1010
</body>
1111
</html>

‎08 Colorpicker/webpack.config.js‎

Lines changed: 31 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,61 @@
1-
var path = require('path');
2-
var webpack = require('webpack');
3-
var HtmlWebpackPlugin = require('html-webpack-plugin');
1+
let path = require('path');
2+
let HtmlWebpackPlugin = require('html-webpack-plugin');
3+
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
4+
let webpack = require('webpack');
45

5-
var basePath = __dirname;
6+
let basePath = __dirname;
67

78
module.exports = {
89
context: path.join(basePath, "src"),
910
resolve: {
10-
extensions: ['', '.js', '.jsx']
11+
extensions: ['.js', '.jsx']
1112
},
1213
entry: [
1314
'./main.jsx',
1415
'../node_modules/bootstrap/dist/css/bootstrap.css'
1516
],
1617
output: {
1718
path: path.join(basePath, 'dist'),
18-
filename: 'bundle.js'
19+
filename: 'bundle.js',
1920
},
2021
devtool: 'source-map',
2122
devServer: {
22-
contentBase: './dist', //Content base
23-
inline: true, //Enable watch and live reload
23+
contentBase: './dist', // Content base
24+
inline: true, // Enable watch and live reload
2425
host: 'localhost',
2526
port: 8080,
2627
stats: 'errors-only'
27-
},
28+
},
2829
module: {
29-
loaders: [
30+
rules: [
3031
{
31-
test: /\.jsx$/,
32-
loader: "babel-loader",
32+
test: /\.jsx?$/,
3333
exclude: /node_modules/,
34-
query: {
35-
plugins: ['transform-runtime'],
36-
presets : ['es2015', 'react']
37-
}
38-
},
39-
{
40-
test: /\.js$/,
4134
loader: 'babel-loader',
42-
exclude: /node_modules/,
43-
query: {
44-
presets: ['es2015']
45-
}
4635
},
4736
{
48-
test: /\.css$/,
49-
loader: 'style-loader!css-loader'
37+
test: /\.css$/,
38+
use: [MiniCssExtractPlugin.loader, "css-loader"]
5039
},
51-
// Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
52-
// Using here url-loader and file-loader
5340
{
54-
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
55-
loader: 'url?limit=10000&mimetype=application/font-woff'
56-
},
57-
{
58-
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
59-
loader: 'url?limit=10000&mimetype=application/octet-stream'
60-
},
61-
{
62-
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
63-
loader: 'file'
41+
test: /\.(png|jpg|gif|svg)$/,
42+
loader: 'file-loader',
43+
options: {
44+
name: 'assets/img/[name].[ext]?[hash]'
45+
}
6446
},
65-
{
66-
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
67-
loader: 'url?limit=10000&mimetype=image/svg+xml'
68-
}
69-
]
47+
],
7048
},
7149
plugins: [
72-
// Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
50+
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
7351
new HtmlWebpackPlugin({
74-
filename: 'index.html', // Name of file in ./dist/
75-
template: 'index.html', // Name of template in ./src
76-
hash: true
77-
})
78-
]
79-
}
52+
filename: 'index.html', //Name of file in ./dist/
53+
template: 'index.html', //Name of template in ./src
54+
hash: true,
55+
}),
56+
new MiniCssExtractPlugin({
57+
filename: "[name].css",
58+
chunkFilename: "[id].css"
59+
}),
60+
],
61+
};

0 commit comments

Comments
 (0)