Skip to content

Commit 293622d

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #13 from crsanti/issue/02-properties
Review 02 Properties (issue #3)
2 parents 338293c + b13b1f7 commit 293622d

File tree

7 files changed

+188
-1
lines changed

7 files changed

+188
-1
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ dist/
44
typings/
55
*.orig
66
.idea/
7-
*/src/**/*.js.map
7+
*/src/**/*.js.map
8+
*.log

‎02 Properties/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "samplereact-es6",
3+
"version": "1.0.0",
4+
"description": "A little project to provide a set of step by step guided samples using React and ES6",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --inline",
8+
"test": "echo \"Error: no test specified\" && exit 1"
9+
},
10+
"author": "",
11+
"license": "MIT",
12+
"dependencies": {
13+
"bootstrap": "^3.3.7",
14+
"react": "^15.3.2",
15+
"react-dom": "^15.3.2"
16+
},
17+
"devDependencies": {
18+
"babel-core": "^6.18.2",
19+
"babel-loader": "^6.2.7",
20+
"babel-preset-es2015": "^6.18.0",
21+
"babel-preset-react": "^6.16.0",
22+
"css-loader": "^0.25.0",
23+
"file-loader": "^0.9.0",
24+
"html-webpack-plugin": "^2.24.1",
25+
"style-loader": "^0.13.1",
26+
"url-loader": "^0.5.7",
27+
"webpack": "^1.13.3",
28+
"webpack-dev-server": "^1.16.2"
29+
},
30+
"repository": {
31+
"type": "git",
32+
"url": "https://github.com/Lemoncode/react-by-sample-es6"
33+
}
34+
}

‎02 Properties/readme.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# 02 Properties
2+
3+
In this sample we will introduce a basic React concept, handling properties.
4+
5+
We will add a _userName_ property and display it in the _Hello_ component.
6+
7+
We will take as a starting point sample __01 Hello React__:
8+
9+
Summary steps:
10+
11+
- Create a property in our _Hello_ stateless component that will hold the _userName_ value.
12+
13+
- Let's inform it from our parent control.
14+
15+
## Prerequisites
16+
17+
Install [Node.js and npm](https://nodejs.org/en/) if they are not already installed on your computer.
18+
19+
> Verify that you are running at least node v6.x.x and npm 3.x.x by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors.
20+
21+
## Steps to build it
22+
23+
- Copy the content from _01 HelloReact_ and execute `npm install`.
24+
25+
- Let's update __hello.jsx__ in order to reflect the new property added (_userName_) and display it using interpolation (`{props.userName}`):
26+
27+
```javascript
28+
import React from 'react';
29+
30+
export const HelloComponent = (props) => {
31+
return (
32+
<h2>Hello user: {props.userName}!</h2>
33+
);
34+
}
35+
```
36+
37+
- Let's update __main.jsx__ and inform the _userName_ propery value:
38+
39+
```javascript
40+
import React from 'react';
41+
import {render} from 'react-dom';
42+
import {HelloComponent} from './hello';
43+
44+
render(
45+
<HelloComponent userName="John" />
46+
, document.getElementById('root')
47+
);
48+
```

‎02 Properties/src/hello.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
export const HelloComponent = (props) => {
4+
return (
5+
<h2>Hello user: {props.userName}!</h2>
6+
);
7+
}
8+
9+
HelloComponent.propTypes = {
10+
userName: React.PropTypes.string.isRequired
11+
};

‎02 Properties/src/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Sample 02 Properties</title>
6+
</head>
7+
<body>
8+
<h1>Sample app</h1>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎02 Properties/src/main.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import {render} from 'react-dom';
3+
import {HelloComponent} from './hello';
4+
5+
render(
6+
<HelloComponent userName="John" />
7+
, document.getElementById('root')
8+
);

‎02 Properties/webpack.config.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
var HtmlWebpackPlugin = require('html-webpack-plugin');
4+
5+
var basePath = __dirname;
6+
7+
module.exports = {
8+
context: path.join(basePath, 'src'),
9+
resolve: {
10+
extensions: ['', '.js', '.jsx']
11+
},
12+
target: 'web',
13+
entry: [
14+
'./main.jsx',
15+
'../node_modules/bootstrap/dist/css/bootstrap.css'
16+
],
17+
output: {
18+
path: path.join(basePath, 'dist'),
19+
filename: 'bundle.js'
20+
},
21+
22+
devtool: 'source-map',
23+
24+
devServer: {
25+
contentBase: './dist', //Content base
26+
inline: true, //Enable watch and live reload
27+
host: 'localhost',
28+
port: 8080,
29+
stats: 'errors-only'
30+
},
31+
32+
module: {
33+
loaders: [
34+
{
35+
test: /\.jsx?$/,
36+
exclude: /node_modules/,
37+
loader: 'babel',
38+
query: {
39+
presets: ['react', 'es2015']
40+
}
41+
},
42+
{
43+
test: /\.css$/,
44+
loader: 'style-loader!css-loader'
45+
},
46+
// Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
47+
// Using here url-loader and file-loader
48+
{
49+
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
50+
loader: 'url?limit=10000&mimetype=application/font-woff'
51+
},
52+
{
53+
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
54+
loader: 'url?limit=10000&mimetype=application/octet-stream'
55+
},
56+
{
57+
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
58+
loader: 'file'
59+
},
60+
{
61+
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
62+
loader: 'url?limit=10000&mimetype=image/svg+xml'
63+
}
64+
]
65+
},
66+
plugins: [
67+
// Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
68+
new HtmlWebpackPlugin({
69+
filename: 'index.html', // Name of file in ./dist/
70+
template: 'index.html', // Name of template in ./src
71+
hash: true
72+
})
73+
]
74+
}

0 commit comments

Comments
 (0)