reactjs的最大的特性就是组件化，组件化的目的就是为了能够进行复用，减少代码的冗余。（ES6语法请自行找资料学习）
需求：
1、用户能够在记事本中添加新事件
2、用户能够对事件进行删除和编辑
3、对正在进行编辑的事件，可以进行撤销
最终效果图：
一、组件拆分
1、按钮有自己的方法(事件)如果项目中有大量的按钮，则可以将按钮单独的做成一个组件，该案例中按钮就只有一个功能，故按钮不做拆分。
2、列表中的项目分为可编辑和不可编辑的项目，可以将列表项拆分成两个组件，带输入框的和不带输入框进行展示的。
二、实现js代码逻辑
1、代码和页面进行分离，分别创建app.js和main.css文件
文件说明：app.js用来承载react的代码逻辑。main.css是我们自定义的样式。
2、页面的整体结构
<div class="container">
<div class="row">
<h3 class="text-center">React记事本</h3>
<div class="col-md-12">
<button class="btn btn-success glyphicon glyphicon-plus menu-add">
添加心事
</button>
<ul class="list-group">
<li class="list-group-item">
济南的风景真的挺不错的。。。。
<a href="#" class="item-right glyphicon glyphicon-remove"></a>
<a href="#" class="item-right glyphicon glyphicon-edit"></a>
</li>
<li class="list-group-item">
北京今天的车真的太堵了。。。。
<a href="#" class="item-right glyphicon glyphicon-remove"></a>
<a href="#" class="item-right glyphicon glyphicon-edit"></a>
</li>
<li class="list-group-item">
<input type="text">
<i class="glyphicon glyphicon-share"></i>
<i class="glyphicon glyphicon-remove"></i>
</li>
</ul>
</div>
</div>
</div>
main.css 文件代码
@charset "utf-8";
a{
text-decoration: none;
}
.menu-add{
margin: 5px 0 10px;
}
.item-right{
float: right;
margin: 0 5px ;
}
.list-group-item input[type="text"]{
outline: none;
border:0;
border-bottom: 1px solid #000000;
}
本人使用的是webstrom编辑器，webstrom编辑器能够识别react的JSX语法，需要进行设置，配置如下：文件(files) →设置(setting) → 语言和框架(language) →javascript → javascript language version 选择React JSX
app.js文件代码：
/**
* Created by Lenovo on 2017/4/6.
*/
//展示列表组件
const Items = React.createClass({
render(){
return <li className="list-group-item">
济南的风景真的挺不错的。。。。
<a href="#" className="item-right glyphicon glyphicon-remove"></a>
<a href="#" className="item-right glyphicon glyphicon-edit"></a>
</li>;
}
});
//编辑类表组件
const ItemEditor = React.createClass({
render(){
return <li className="list-group-item">
<input type="text"/>
<i className="glyphicon glyphicon-remove"></i>
<i className="glyphicon glyphicon-share"></i>
</li>;
}
});
//使用react进行渲染
ReactDOM.render(
<div>
<button className="btn btn-success glyphicon glyphicon-plus menu-add">
添加心事
</button>
<Items/>
<ItemEditor/>
</div>,
document.getElementById('content')
);
代码说明：
1、React中使用cearteClass方法创建组件。每一个组件对应的是一个类（类似于强类型语言java或c#中的类）组件的名字采用首字母大写的方式（必须否则报错)，
2、render 方法能够对组件中的html代码进行渲染。在JSX中，html中使用的类样式都要使用className进行指定！
3、调用ReactDOM的render方法时，html的代码段必须在外围有一个容器，这个和js中的对象一致。例如：a,b,c 这种并列的形式ReactDOM在渲染的时将报错。你必须这样d(a,b,c)（a,b,c,d为html标签,希望你自行测试体会下！）
4、render方法的第二个参数指定要渲染到的容器。
下一节，将探讨React数据的绑定
