使用一个父节点包裹
//
<p> 外面必须再包裹一层
<div>
return (
<div>
<p>段落1
</p>
<p>段落2
</p>
</div>
)
jsx里面用{/* */}注释
return(
<
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>
})
}
</
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里面装的是组件 必须是多个组件用到才会放到这个文件里面
