概念知识：
1.JSX是什么 JSX其实是JavaScript的扩展，React为了代码的可读性更方便地创建虚拟DOM等原因，加入了一些类似XML的语法的扩展。 2.编译器——jsxTransformer JSX代码并不能直接运行，需要将它编译成正常的JavaScript表达式才能运行，jsxTransformer.js就是这一编译器的角色。
3.第二代编译器——babel React官方博客发布了一篇文章，声明其自身用于JSX语法解析的编译器JSTransform已经过期，不再维护，React JS和React Native已经全部采用第三方Babel的JSX编译器实现。原因是两者在功能上已经完全重复，而Babel作为专门的JavaScript语法编译工具，提供了更为强大的功能。而browser.js是babel编译器的浏览器版本。
在react 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后，这个依赖的库改为browser.js 页面script标签的type也由text/jsx改为text/babel
1. 组件名称开头必须大写
var NewList = React.createClass(){}
2.ReactDOM.render是React最基本的方法，用于将模板转化为HTML语言 并插入制定DOM节点
3.事件都使用骆驼命名法：onClick onChange等
4、this.props.children 表示组件的所有子节点
var NotesList = React.createClass({ render: function() { return ( <ol> {
// props获取父组件的数据
// this.props.children.map(function(child){})
// var rows = this.props.children;React.Children.map(rows,function(child){})
React.Children.map(this.props.children, function (child) { // React 提供一个工具方法React.Children来处理this.props.childrenreturn <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
5.获取子元素的长度:render:function(){return(<p>count子元素长度：{React.Children.count(this.props.children)}</p>)}
6.获取DOM节点-ref属性
<input type="text" ref="txtData">
获取文本框的值
var inputDom = this.refs.txtData; // 不需要使用findDOMNode()方法
var data = inputDom.value;
7.React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理 this.props
React开发的规范，组件内部的数据由state控制，外部对内部传递数据时使用 props
8.在组建中添加多个属性写法：
var Info = React.createClass({ render:function(){ var myAttr = { 'ref ': 'txtData', 'data-id': 'inputID', 'onClick': function () { console.log("onClick"); } } return <input type="button" {...myAttr} value={this.props.name} /> // {...myAttr}绑定多个属性 } }) ReactDOM.render(<Info name="I AM A BUTTON" />,document.getElementById('box'));
例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>todolist</title> 6 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 7 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 8 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> 9 <style> 10 ul{margin:0;padding:0;} 11 ul li{list-style: none;} 12 .ul-box{margin-top:20px;} 13 .ul-box li{margin-top:10px;} 14 button{margin-left:10px;background: #f1f1f1;border:1px solid #e2e2e2;padding:6px 10px;} 15 .input-txt{height: 27px;line-height: 27px;border:1px solid #e2e2e2;} 16 </style> 17 </head> 18 <div id="container"></div> 19 <!-- <script type="text/babel"></script>webstorm暂时不支持这一种 --> 20 <script type="text/jsx"> 21 // 增删改Demo 22 // this.props.todo.map 循环 23 var TodoList = React.createClass({ 24 // 初始化数据 25 getInitialState:function(){ 26 return{ 27 todoList:[] 28 } 29 }, 30 // 更新数据 31 changeHandle:function(rows){ 32 this.setState({ 33 todoList : rows 34 }) 35 }, 36 37 render:function(){ 38 return( 39 <div> 40 <NewList onAdd={this.changeHandle} todo={this.state.todoList}/> 41 <ShowList onDel={this.changeHandle} todo={this.state.todoList} onSave={this.changeHandle}/> 42 43 </div> 44 ) 45 } 46 }); 47 48 // 新增 49 var NewList = React.createClass({ 50 addHandle:function(e){ 51 e.preventDefault(); 52 // 从父组件获取数据 使用props 53 var rows = this.props.todo; 54 // 获取文本框的值 55 var inputNew = this.refs.txtNewDate; 56 var newData = inputNew.value.trim(); 57 if(newData != ""){ 58 // 追加到原来的数据中 59 rows.push(newData); 60 this.props.onAdd(rows); 61 } 62 inputNew.value = ""; 63 }, 64 render:function(){ 65 return( 66 <form onSubmit={this.addHandle}> 67 <input className="input-txt" type="text" placeholder="新增内容" ref="txtNewDate" id="txtNewDate"/> 68 <button onClick={this.addHandle}>新增</button> 69 </form> 70 ) 71 } 72 }) 73 // 展示+修改+删除 74 var ShowList = React.createClass({ 75 delHandle:function(e){ 76 // 获取要删除的索引 77 var delIndex = e.target.getAttribute("data-key"); 78 this.props.todo.splice(delIndex,1); 79 this.props.onDel(this.props.todo); 80 }, 81 editHandle:function(e){ 82 // 将原本的值赋值到文本框 83 // 将按钮文字改为保存 84 var inputNew = document.getElementById("txtNewDate"); 85 //console.log(e.target.innerHTML) 86 inputNew.value = e.target.getAttribute("data-item"); 87 }, 88 saveHandle:function(e){ 89 var saveIndex = e.target.getAttribute("data-key"); 90 var rows = this.props.todo; 91 92 React.Children.map(rows,function(item,i){ 93 if(i == saveIndex){ 94 // 保存时存在相同id则删除原来的 95 rows.splice(saveIndex,1); 96 } 97 }) 98 var inputNew = document.getElementById("txtNewDate"); 99 var saveData = inputNew.value.trim(); 100 rows.push(saveData); 101 this.props.onSave(rows);// 更新render 102 }, 103 render:function(){ 104 var children = this.props.todo; 105 var childArray = React.Children.toArray(children); 106 107 return( 108 <div> 109 <h3>toArray数组排序：{childArray.sort().join(' ')}</h3> 110 <p>count长度：{React.Children.count(this.props.todo)}</p> 111 <ul className="ul-box"> 112 { 113 // 循环li 114 // 方法一：this.props.todo.map(function(item,i){}) 115 React.Children.map(children,function(item,i){ 116 var id = "itemList"; 117 return( 118 <li> 119 <label data-id={id-i}>{item}</label> 120 <button data-key={i} onClick={this.delHandle}>删除</button> 121 <button data-key={i} data-item={item} onClick={this.editHandle}>修改</button> 122 <button data-key={i} onClick={this.saveHandle}>保存</button> 123 </li> 124 ) 125 }.bind(this)) 126 } 127 </ul> 128 </div> 129 ) 130 131 } 132 }) 133 ReactDOM.render(<TodoList/>,document.getElementById("container")); 134 </script> 135 </body> 136 </html>
学习参考：
http://www.ruanyifeng.com/blog/2015/03/react.html
https://www.cnblogs.com/wangfupeng1988/p/5302738.html