React组件化

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

webstome 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数据的绑定