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语法，我们还有两种方法创建组件。

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

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

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

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

• 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写法。