React 入门感悟
现在网上有很多 React 入门教程 一搜一大堆。 但是我比较推荐 阮一峰和菜鸟教程
阮一峰 ： http://www.ruanyifeng.com/blog/2015/03/react.html
菜鸟教程： http://www.runoob.com/react/react-tutorial.html
看完了这两篇教程 我发现里面的demo 都是基于ES5 语法写的！ 并没有使用ES6语法
比如 创建一个 类
// es5
var HelloMessage = React.createClass(){}
// es6
class HelloMessage extends React.Component{}
提示: 网上的教程很多也很杂 选择一种语法学习就好 别搞混了！
教程的内容基本都差不多 JSX 组件 State Props Refs 围绕这些东西写的！ 也有一些实例的demo
不要感觉简单， 一步一个脚印慢慢来！ 不要直接学习项目搭建 先把基础打好了 项目还不是说整就整的？
找了一些比较经典的demo 分享给大家吧!
demo01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="mount-point"></div>
<script type="text/babel">
var FilteredList = React.createClass({
filterList: function(event){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
initialItems: [
"Apples",
"Broccoli",
"Chicken",
"Duck",
"Eggs",
"Fish",
"Granola",
"Hash Browns"
],
items: []
}
},
componentWillMount: function(){
this.setState({items: this.state.initialItems})
},
render: function(){
return (
<div className="filter-list">
<input type="text" placeholder="Search" onChange={this.filterList}/>
<List items={this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.items.map(function(item) {
return <li key={item}>{item}</li>
})
}
</ul>
)
}
});
ReactDOM.render(<FilteredList/>, document.getElementById('mount-point'));
</script>
</body>
</html>
demo02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo02</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Message = React.createClass({
handleClick : function (event) {
// 获取真实的dom 节点
var tipE = ReactDOM.findDOMNode(this.refs.tip);
// 判断显示隐藏
if(tipE.style.display == 'none'){
tipE.style.display = 'inline';
}else {
tipE.style.display = 'none'
}
},
// 渲染结构
render: function () {
return (
<div>
<button onClick={this.handleClick}>显示 | 隐藏</button>
<span ref="tip">点击测试</span>
</div>
)
}
});
var TestInoutComponent = React.createClass({
getInitialState : function () {
return {
inputContent : ''
}
},
changeHander : function (event) {
this.setState({
inputContent : event.target.value
})
},
render : function () {
return (
<div>
<input type="text" onChange={this.changeHander}/>
<span>{this.state.inputContent}</span>
</div>
)
}
})
ReactDOM.render(
<div>
<Message/>
<TestInoutComponent/>
</div>,
document.getElementById('app')
)
</script>
</body>
</html>
demo03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<style type="text/css">
.btn{
height: 20px;
margin: 5px;
}
</style>
<body>
<div id="mount-point"></div>
<script type="text/babel">
var Counter = React.createClass({
incrementCount: function(){
this.setState({
count: this.state.count + 1
});
},
reduce: function(){
this.setState({
count: this.state.count - 1
});
},
getInitialState: function(){
return {
count: 0
}
},
reset : function () {
this.setState({
count: 0
});
},
render: function(){
return (
<div class="my-component">
<h1>Count: {this.state.count}</h1>
<button type="button" className='btn' onClick={this.incrementCount}>incrementCount</button>
<button type="button" className='btn' onClick={this.reduce}>reduce</button>
<br/>
<button onClick={this.reset}>重置</button>
</div>
);
}
});
ReactDOM.render(<Counter/>, document.getElementById('mount-point'));
</script>
</body>
</html>
demo 04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="mount-point"></div>
<script type="text/babel">
var FilteredList = React.createClass({
filterList: function(event){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
initialItems: [
"Apples",
"Broccoli",
"Chicken",
"Duck",
"Eggs",
"Fish",
"Granola",
"Hash Browns"
],
items: []
}
},
componentWillMount: function(){
this.setState({items: this.state.initialItems})
},
render: function(){
return (
<div className="filter-list">
<input type="text" placeholder="Search" onChange={this.filterList}/>
<List items={this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.items.map(function(item) {
return <li key={item}>{item}</li>
})
}
</ul>
)
}
});
ReactDOM.render(<FilteredList/>, document.getElementById('mount-point'));
</script>
</body>
</html>
