相关技术：webpack+react+react-router+redux+immutable
郭永峰react学习指南
1.git bash--windows命令行工具 --教程 下载地址
2. immutable immutable的基础操作 中文基础操作文章
2.1 es6运行编译环境搭建
3. js创建对象的几种方法
4.阮一峰全栈开发教程
疑问点：
关于react-router中props传递的问题
-----1.className 有多个的时候
（1）用拼接字符串的方法
<div className={value.class + " " + value.class2}>{value.value}</div> （2）用字符串模板也行
<div className={`${value.class} ${value.class2}`}>{value.value}</div>花括号里面就是可以运算的部分啊
（3）如果是数组的话直接join也行啊
<div className={classnames.join(" ")}>{value.value}</div>
举例：<div className={`header ${className || ''}`}>------------------------------------------------------------
1.demo1---3 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<!-- 不能少逗号，render里不能加分号 -->
<!-- ReactDOM.render（）用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 -->
<div id="example"></div>
<div id="aa"></div>
<div id="bb">
<!-- 如果这个变量是一个数组，则会展开这个数组的所有成员 注意：字符串要加'',数字不用-->
</div>
<script type="text/babel">
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
var ages=['12','45','67','90'];
ReactDOM.render(
<div>
{
ages.map(function (age){
return <div>age:,{age}!</div>
})
}
</div>,
document.getElementById('aa')
);
var myArray= [
'12222ggg',
'3455555ggg',
'455444ggg'
];
var myArrayNum= [
12222,
3455555,
455444
];
var myArrayHtml= [
<h1>1245444</h1>,
<h2>2222222</h2>,
<h3>56898</h3>
];
ReactDOM.render(
<div>
{myArray}
{myArrayNum}
{myArrayHtml}
</div>,
document.getElementById('bb')
);
</script>
</body>
</html>
2.demo4--5 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example">
<!-- React.createClass 方法就用于生成一个组件类.
组件类只能包含一个顶层标签，否则也会报错。
-->
</div>
<div id="bb">
<!-- this.props.children 属性。它表示组件的所有子节点 -->
<!-- React.Children.map() 注意大小写 -->
<!-- ReactDOM.render() 必须分情况写，不能都写到一个render里 -->
</div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function(){
return <h3>hello {this.props.name} <a>age:{this.props.age}</a></h3>
}
});
var MoreChilds = React.createClass({
render:function(){
return (
<ul>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ul>
);
}
})
ReactDOM.render(
<HelloMessage name="20161206test" age="13"></HelloMessage>,
document.getElementById('example')
);
ReactDOM.render(
<MoreChilds>
<span>morechild1</span>,
<span>morechild2</span>
</MoreChilds>,
document.getElementById('bb')
);
</script>
</body>
</html>
3.demo6 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example">
<!-- 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求 -->
</div>
<div id="aa">
<!-- data_12变量直接输出 -->
</div>
<div id="bb">
<!-- 虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 -->
</div>
<script type="text/babel">
var data = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);
var data_11 = 12456;
var MyTitle_11 = React.createClass({
propTypes:{
title: React.PropTypes.string.isRequired,
},
handleClick:function(){
this.refs.myTextInput.focus();
},
render:function(){
return (
<div>
<h3>{this.props.title}</h3>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
)
}
});
ReactDOM.render(
<MyTitle_11 title={data_11} />,
document.getElementById('bb')
)
var data_12 = 'test123';
ReactDOM.render(
<h2>{data_12}</h2>,
document.getElementById('aa')
)
</script>
</body>
</html>
4.demo8 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="bb">
<!-- getInitialState 获得初始默认状态；this.setState 方法就修改状态值 -->
<!-- onClick={this.handleClick} 点击调用操作函数handleClick -->
<!-- 区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 -->
</div>
<script type="text/babel">
var LikeButton11 = React.createClass({
getInitialState: function(){
return {liked:false};
},
handleClick:function(){
this.setState({liked: !this.state.liked});
console.log("yyyyyy");
},
render: function(){
var text= this.state.liked ? 'like' : 'nononononno';
return (
<p onClick={this.handleClick}>
你 {text} 点击了切换
</p>
);
}
});
ReactDOM.render(
<LikeButton11 />,
document.getElementById('bb')
);
</script>
</body>
</html>
5.demo9 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="aa">
<!-- ，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况 -->
<!-- function(event) { //event 不能忘加
this.setState({value: event.target.value}); //设置值
var value = this.state.value; //勿忘定义
} -->
</div>
<script type="text/babel">
var Input11 = React.createClass({
getInitialState:function(){
return {value:'hello111!'};
},
handleChange:function(event) {
this.setState({value: event.target.value});
},
render:function(){
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input11/>,document.getElementById('aa'));
</script>
</body>
</html>