react 创建组件

解析React

方法一、使用webpack

在package.json添加

"dependencies": {
"react": "^0.14.0",
"react-dom": "^0.14.1"
}

安装依赖

npm init

或者直接

npm install  react react-dom --save-dev

在你编写的react组件文件里



在你的入口文件里



其他事情就交给webpack去做吧。、

方法二、在页面载入解析文件

这种方法更方便，但是不利用实际开发，平时练习也就算了。

<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script src="build/browser.min.js"></script>

Jsx语法

组件类的第一个字母必须大写
JS代码

var Comment=React.createClass({
render:function(){
return (
<div className = "comment" >
<h2 className="commentAuthor">
{this.props.author}
</h2>
<p className="commentContent">{this.props.children}</p>
</div>
);
}
})

React.render(
<Comment author="Liz">
Hello!world.
</Comment>,
document.getElementById('container')
);

Html代码

<div id="container"></div>

Result

React创建简单组件

如果不使用jsx语法，我们还有两种方法创建组件。

（1）Jsx，更加语义化，可直接套子节点和内容

<div className = "comment" >
<h2 className="commentAuthor">
Liz
</h2>
<p className="commentContent">Hello!world.</p>
</div>

（2）React,类似于json格式，需要什么就嵌套，但是参数顺序比较严格，参数一为标签名，第二个属性json格式，第三个是内容，第二个不能省略，实在没有属性就填null.

React.createElement("div",
{className:"comment"},
React.createElement("h2",{className:"commentAuthor"},"Liz"),
React.createElement("p",{className:"commentContent"},"Hello!world.")
)

（3）React工厂

var div = React.DOM.div;
var h2 = React.DOM.h2;
var p = React.DOM.p;

div({className:"comment"},
h2({className:"commentAuthor"},"Liz"),
p({className:"commentContent"},"Hello!world."))

得到的结果都是一样的。

相比之下，我还是更倾向于Jsx写法。