jsx语法

使用一个父节点包裹

//  <p> 外面必须再包裹一层 <div> return (         <div>             <p>段落1</p>             <p>段落2</p>        </div>   )

jsx里面用{/* */}注释

return(    //jsx外面的注释    <div>        {/*  这是里面的注释  */}        <p>这是p标签</p>    </div>)

样式

css样式：`<p className="header">这是p标签</p>`内联样式：`<p style={{ fontSize:"25px",color:"red"}}>这是p标签</p>` 

事件

    var NunAdd = React.createClass({            handlerClick:function(){                console.log(123)            },            render:function(){                return(                    <div>                        <button onClick = {this.handlerClick.bind(this)}>点击</button>                    </div>                )            }        })

注意：onClick是驼峰式写法，以及bind(this)建议都加上；

循环，遍历

一般用到的是jq里面的map

class Hello extends React.Components{    render(){        const arr = ["a","b","c"];        return(            <div>                {                arr.map((item,index)=>{                    return <p key={index}>this is {item}</p>                })            /* es5是这样的 上面的是箭头函数                arr.map(function(item,index){                    return <p key={index}>this is {item}                })            */                }            </div>        )    }}

注意，arr.map是包裹在{}中的，key={index}有助于React的渲染优化，jsx中的{}可放一个可执行的 js 程序或者变量

判断

jsx的判断一般用到的是三元表达式，表达式也是放在{}里面的

return (     <div>         <p style={{display: true ? "block" : "none"}}>段落1</p>     </div>     )

智能组件和木偶组件 （自己的记录。。）

    containers(智能组件) 和 components(木偶组件)两个不同的文件夹

智能组件 在日常开发中，我们也简称“页面”。为何说它“智能”，因为它只会做一些很聪明的事儿，脏活累活都不干。它只对数据负责，只需要获取了数据、定义好数据操作的相关函数，然后将这些数据、函数直接传递给具体实现的组件即可。
containers里面装的是页面,页面里面也可能有subpage等子页面

木偶组件 这里“木偶”一词用的特别形象，它总是被人拿线牵着。它从智能组件（或页面）那里接受到数据、函数，然后就开始做一些展示工作，它的工作就是把拿到的数据展示给用户，函数操作开放给用户。至于数据内容是什么，函数操作是什么，它不关心。
components里面装的是组件 必须是多个组件用到才会放到这个文件里面