├── basic_webpack_react
    ├── demo01
    │   ├── README.md
    │   ├── webpack.config.js
    │   ├── index.html
    │   └── app.js
    ├── demo02
    │   ├── webpack.config.js
    │   ├── index.html
    │   └── app.js
    ├── demo03
    │   ├── webpack.config.js
    │   ├── index.html
    │   └── app.js
    ├── demo04
    │   ├── webpack.config.js
    │   ├── index.html
    │   └── app.js
    ├── demo05
    │   ├── webpack.config.js
    │   ├── index.html
    │   └── app.js
    ├── demo06
    │   ├── webpack.config.js
    │   ├── index.html
    │   └── app.js
    ├── webpack.config.js
    ├── .gitignore
    ├── README.md
    ├── index.html
    ├── webpack.base.js
    ├── app.js
    └── package.json
├── react_webpack_cookbook_demo
    └── 第一步
    │   ├── .gitignore
    │   ├── app
    │       ├── main.js
    │       └── components.js
    │   ├── build
    │       └── index.html
    │   ├── webpack.config.js
    │   ├── package.json
    │   └── README.md
└── README.md


/basic_webpack_react/demo01/README.md:
--------------------------------------------------------------------------------
1 | # JSX语法


--------------------------------------------------------------------------------
/react_webpack_cookbook_demo/第一步/.gitignore:
--------------------------------------------------------------------------------
1 | build/bundle.js


--------------------------------------------------------------------------------
/basic_webpack_react/demo02/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../webpack.base.js')


--------------------------------------------------------------------------------
/basic_webpack_react/demo03/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../webpack.base.js')


--------------------------------------------------------------------------------
/basic_webpack_react/demo04/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../webpack.base.js')


--------------------------------------------------------------------------------
/basic_webpack_react/demo05/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../webpack.base.js')


--------------------------------------------------------------------------------
/basic_webpack_react/demo06/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../webpack.base.js')


--------------------------------------------------------------------------------
/basic_webpack_react/webpack.config.js:
--------------------------------------------------------------------------------
1 | var base = require('./webpack.base.js')
2 | module.exports = base
3 | 


--------------------------------------------------------------------------------
/basic_webpack_react/demo01/webpack.config.js:
--------------------------------------------------------------------------------
1 | var base = require('../webpack.base.js')
2 | module.exports = base


--------------------------------------------------------------------------------
/react_webpack_cookbook_demo/第一步/app/main.js:
--------------------------------------------------------------------------------
1 | var component = require('./components.js')
2 | document.body.appendChild(component())


--------------------------------------------------------------------------------
/basic_webpack_react/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | build
 3 | .ide
 4 | demo01/build
 5 | demo02/build
 6 | demo03/build
 7 | demo04/build
 8 | demo05/build
 9 | demo06/build
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack&React
2 | 
3 | - [basic_webpack_react 用Webpack构建例子，作为了解Webpack构建React应用是一个还不错的入门教程](https://github.com/bulldog478/Webpack-React/tree/master/basic_webpack_react)


--------------------------------------------------------------------------------
/react_webpack_cookbook_demo/第一步/app/components.js:
--------------------------------------------------------------------------------
1 | module.exports = function(){
2 | 	var element = document.createElement('h1')
3 | 	element.innerHTML = 'Hello world'
4 | 
5 | 	return element
6 | }


--------------------------------------------------------------------------------
/react_webpack_cookbook_demo/第一步/build/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>第一步</title>
 6 | </head>
 7 | <body>
 8 | 	<script src="bundle.js"></script>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/react_webpack_cookbook_demo/第一步/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | 
3 | module.exports = {
4 | 	entry:path.resolve(__dirname,'app/main.js'),
5 | 	output:{
6 | 		path:path.resolve(__dirname,'build'),
7 | 		filename:'bundle.js'
8 | 	}
9 | }


--------------------------------------------------------------------------------
/basic_webpack_react/demo01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Hello JSX</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	<script src="build/bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/basic_webpack_react/demo04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Hello Ref</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	<script src="build/bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/basic_webpack_react/demo05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Hello State</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	<script src="build/bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/basic_webpack_react/demo02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Hello Component</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	<script src="build/bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/basic_webpack_react/demo03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Hello Children</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	<script src="build/bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/basic_webpack_react/demo06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Hello LifeCycle</title>
 6 | </head>
 7 | <body>
 8 | 	<div id="app"></div>
 9 | 	<script src="build/bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/basic_webpack_react/demo01/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom';
 3 | 
 4 | var arr = [
 5 | 	<h1>Hello world!</h1>,
 6 | 	<h2>React is awesome</h2>
 7 | ]
 8 | 
 9 | render(
10 | 	<div>
11 | 		<div>{arr}</div>
12 | 	</div>,
13 | 	document.getElementById('app')
14 | )


--------------------------------------------------------------------------------
/basic_webpack_react/README.md:
--------------------------------------------------------------------------------
 1 | # Basic Webpack & React
 2 | > 非常朴素的入门教程:)
 3 | 
 4 | [在线demo地址](http://www.shineyao.cn/basic_webpack_react/)
 5 | 
 6 | - 例子主要是阮一峰老师的教程，自己经过了一些小修改，算一点小的知识扩展吧。
 7 | - 用Webpack构建例子，作为了解Webpack构建React应用是一个还不错的入门教程。
 8 | 
 9 | ## 运行
10 | 
11 | 1. 进入demo0x
12 | 2. 执行webpack
13 | 3. 打开index.html
14 | 
15 | 


--------------------------------------------------------------------------------
/react_webpack_cookbook_demo/第一步/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "first-step",
 3 |   "version": "1.0.0",
 4 |   "description": "webpack",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "build": "webpack"
 8 |   },
 9 |   "keywords": [
10 |     "webpack"
11 |   ],
12 |   "author": "Zan",
13 |   "license": "MIT"
14 | }
15 | 


--------------------------------------------------------------------------------
/basic_webpack_react/demo02/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom'
 3 | 
 4 | var background={
 5 | 	backgroundColor:'blue'
 6 | }
 7 | 
 8 | //创建一个组件
 9 | var HelloWorld = React.createClass({
10 | 	render: function(){
11 | 		return(
12 | 			<h1 style={background}>Hello {this.props.name}</h1>
13 | 		)
14 | 	}
15 | })
16 | 
17 | render(
18 | 	<HelloWorld name="World"/>,
19 | 	document.getElementById('app')
20 | )
21 | 
22 | 
23 | 


--------------------------------------------------------------------------------
/basic_webpack_react/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Navigator</title>
 6 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
 7 | 	<style>
 8 | 		body{
 9 | 			text-align: center;
10 | 		}
11 | 	</style>
12 | </head>
13 | <body>
14 | 	<div id="navi"></div>
15 | 	<script src="build/bundle.js"></script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/basic_webpack_react/demo03/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom'
 3 | 
 4 | var KinderGarden = React.createClass({
 5 | 	render:function(){
 6 | 		return(
 7 | 			<ol>
 8 | 				{
 9 | 					this.props.children.map(function(child){
10 | 						return <li>{child}</li>
11 | 					})
12 | 				}
13 | 			</ol>
14 | 		)
15 | 	}
16 | })
17 | 
18 | render(
19 | 	<KinderGarden>
20 | 		<span>hello</span>
21 | 		<span>world</span>
22 | 	</KinderGarden>,
23 | 	document.getElementById('app')
24 | )


--------------------------------------------------------------------------------
/basic_webpack_react/demo04/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom'
 3 | 
 4 | var KinderGarden = React.createClass({
 5 | 	clickHandler: function(){
 6 | 		this.refs.myTextInput.focus();
 7 | 	},
 8 | 	render:function(){
 9 | 		return(
10 | 			<div>
11 | 				<input type="text" ref="myTextInput"/>
12 | 				<input type="button" value="Focus the text input" onClick={this.clickHandler} />
13 | 			</div>
14 | 		)
15 | 	}
16 | })
17 | 
18 | render(
19 | 	<KinderGarden>
20 | 	</KinderGarden>,
21 | 	document.getElementById('app')
22 | )


--------------------------------------------------------------------------------
/basic_webpack_react/demo05/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom'
 3 | 
 4 | var KinderGarden = React.createClass({
 5 | 	getInitialState: function(){
 6 | 		return {
 7 | 			like: false
 8 | 		}
 9 | 	},
10 | 	changeHandler:function(){
11 | 		//this.state.like = !this.state.like //不能这样用，这样不会调用this.render
12 | 		this.setState({like:!this.state.like})
13 | 	},
14 | 	render:function(){
15 | 		let text = this.state.like?'React 非常棒':'React还是没有MVVM好……'
16 | 		return(
17 | 			<div>
18 | 				<p>{text}</p>
19 | 				<input type="checkbox" checked={this.state.like} onClick={this.changeHandler} />
20 | 			</div>
21 | 		)
22 | 	}
23 | })
24 | 
25 | render(
26 | 	<KinderGarden>
27 | 	</KinderGarden>,
28 | 	document.getElementById('app')
29 | )


--------------------------------------------------------------------------------
/basic_webpack_react/webpack.base.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     entry: "./app.js",
 3 |     output: {
 4 |         path: './build',
 5 |         publicPath:'build/',
 6 |         filename: "bundle.js"
 7 |     },
 8 |     module: {
 9 |         loaders: [
10 |             { test: /\.css$/, loader: "style!css" },
11 |             {test: /\.less/,loader: 'style!css!less'},
12 |             {
13 |               test: /\.js$/,
14 |               exclude: /node_modules/,
15 |               loader: "babel",
16 |               query:
17 |                 {
18 |                   presets:['react','es2015']
19 |                 }
20 |             }
21 |         ]
22 |     },
23 |     resolve:{
24 |         extensions:['','.js','.json']
25 |     },
26 |     devtool:'source-map'
27 | };
28 | 


--------------------------------------------------------------------------------
/basic_webpack_react/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom'
 3 | import {Pagination} from 'react-bootstrap'
 4 | 
 5 | let NaviPage = React.createClass({
 6 | 	getInitialState(){
 7 | 		return{
 8 | 			activePage:0
 9 | 		}
10 | 	},
11 | 	handleSelect(event, selectEvent){
12 | 		let pageNum = selectEvent.eventKey
13 | 		window.open('demo0'+ pageNum +'/index.html')
14 | 	},
15 | 	render(){
16 | 		return(
17 | 			<div>	
18 | 				<h2>{this.props.title}</h2>
19 | 				<Pagination
20 | 					bsSize="large"
21 | 					items={6}
22 | 					activePage={this.state.activePage}
23 | 					onSelect={this.handleSelect} />
24 | 				<br/>
25 | 				<a href={this.props.github} target="_blank">本教程github地址</a>
26 | 			</div>
27 | 		)
28 | 	}
29 | })
30 | 
31 | render(
32 | 	<NaviPage title="Basic Webpack&React Tutorials" github="xxx"/>,
33 | 	document.getElementById('navi')
34 | )


--------------------------------------------------------------------------------
/basic_webpack_react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "basic_webapack_react_tuts",
 3 |   "version": "1.0.0",
 4 |   "description": "webapck react",
 5 |   "main": "app.js",
 6 |   "dependencies": {
 7 |     "babel-core": "^6.7.6",
 8 |     "babel-plugin-react-transform": "^2.0.2",
 9 |     "babel-loader": "^6.2.4",
10 |     "babel-preset-react": "^6.5.0",
11 |     "react-dom": "^15.0.1",
12 |     "babel-preset-es2015": "^6.6.0",
13 |     "react-hot-loader": "^1.3.0",
14 |     "react": "^15.0.1",
15 |     "css-loader": "^0.23.1",
16 |     "style-loader": "^0.13.1",
17 |     "webpack": "^1.13.0",
18 |     "webpack-dev-server": "^1.14.1",
19 |     "react-bootstrap": "^0.28.5"
20 |   },
21 |   "devDependencies": {},
22 |   "scripts": {
23 |     "test": "echo \"Error: no test specified\" && exit 1"
24 |   },
25 |   "keywords": [
26 |     "webapck",
27 |     "react"
28 |   ],
29 |   "author": "Zan",
30 |   "license": "MIT"
31 | }
32 | 


--------------------------------------------------------------------------------
/basic_webpack_react/demo06/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom'
 3 | 
 4 | var KinderGarden = React.createClass({
 5 | 	getInitialState(){
 6 | 		return {
 7 | 			opacity: 1.0
 8 | 		}
 9 | 	},
10 | 	componentWillMount(){
11 | 		console.log('dom will be mounted') //仅执行一次
12 | 	},
13 | 	componentDidMount(){
14 | 		console.log('dom has be mounted') //仅执行一次
15 | 		this.timer = setInterval(() => {
16 | 			var opacity = this.state.opacity;
17 | 			this.setState({
18 | 				opacity:opacity
19 | 			})
20 | 			this.state.opacity -= 0.05;
21 | 		},100)
22 | 	},
23 | 	componentDidUpdate(nextProps, nextState){
24 | 		console.log(nextState.opacity)
25 | 		if(this.state.opacity < 0.1){
26 | 			this.state.opacity = 1.0
27 | 		}
28 | 	},
29 | 	render:function(){
30 | 		var { name, word } = this.props
31 | 		return(
32 | 			<div style={{opacity:this.state.opacity}}>
33 | 				<p>Hello {name},{word}</p>
34 | 			</div>
35 | 		)
36 | 	}
37 | })
38 | 
39 | render(
40 | 	<KinderGarden name="boy" word="you are awesome!">
41 | 	</KinderGarden>,
42 | 	document.getElementById('app')
43 | )


--------------------------------------------------------------------------------
/react_webpack_cookbook_demo/第一步/README.md:
--------------------------------------------------------------------------------
 1 | ## 安装Webpack
 2 | npm i webpack --save-dev 然后通过node_modules/.bin/webpack 运行
 3 | or npm i -g webpack 直接webpack运行
 4 | 
 5 | ## 目录结构
 6 | - /app
 7 |     + main.js
 8 |     + component.js
 9 | - /build
10 |     + bundle.js(构建生成)
11 |     + index.html
12 | - package.json
13 | - webpack.config.js
14 | 
15 | ## 设置Webpack
16 | webpack.config.js
17 | ```js
18 | var path = require('path')
19 | 
20 | module.exports = {
21 |     entry:path.resolve(__dirname,'app/main.js'),
22 |     output:{
23 |         path:path.resolve(__dirname,'build'),
24 |         filename:'bundle.js'
25 |     }
26 | }
27 | ```
28 | 
29 | ## 运行你的第一个编译
30 | 
31 | app/component.js
32 | ```js
33 | module.exports = function(){
34 |     var element = document.createElement('h1')
35 |     element.innerHTML = 'Hello world'
36 | 
37 |     return element
38 | }
39 | ```
40 | 
41 | app/main.js
42 | ```js
43 | var component = require('./components.js')
44 | document.body.appendChild(component())
45 | ```
46 | 
47 | build/index.html
48 | ```html
49 | <!DOCTYPE html>
50 | <html lang="en">
51 | <head>
52 |     <meta charset="UTF-8">
53 |     <title>第一步</title>
54 | </head>
55 | <body>
56 |     <script src="bundle.js"></script>
57 | </body>
58 | </html>
59 | ```
60 | 
61 | ## 构建
62 | 在控制台执行webpack（全局安装）
63 | 
64 | ## 运行应用
65 | ### 设置`package.json` __scripts__'
66 | 
67 | npm是一个非常好用的用来编译的指令，通过npm你可以不用担心项目中使用什么技术，你还要调用这个指令就可以了，只要你在`package.json`中设置`script`就可以了
68 | 
69 | 本案例我们把编译步骤放到npm run build中：
70 | 
71 | 1. 执行npm init
72 | 2. 在package.json加入`"scripts": {"build": "webpack"}`
73 | 3. npm run build就可以编译了
74 | 
75 | 


--------------------------------------------------------------------------------