react-jsx

在react中，并不是一定需要用jsx，但是，开发react，推荐使用jsx, 为什么？

1. 方便开发者开发。

2. 使用类似于XML的方式，需要一个闭合的标签，如<Node></Node>;

3. 它可以在javascript中使用，但是不会修改javascript的语义。

HTML 标签和 react 的comproents 比较：

如果只是渲染普通的html标签，标签的开头是以小写字母开头的，如：。

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

如果是渲染react 的comproent组件，只需要创建一个以大写字母开头的class变量：

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

在写react组件在写节点属性的时候，有两个属性需要注意一下，就是class和for，因为这个在es6中属于它的关键字，为避免冲突，将class的使用改为了className，for 改为了htmlFor，举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='../build/react.js'></script>
    <script type="text/javascript" src='../build/react-dom.js'></script>
    <script type="text/javascript" src='../build/browser.min.js'></script>
</head>
<body>
    <div id="example"></div>

    <script type='text/babel'>
        var HelloMessage = React.createClass({
            render:function(){
                return (
                                    <div>
                                       <h1 className="h1">Hello {this.props.name}</h1>;
                                       <label htmlFor="username"><input id="username" /></label>
                                    <div>
                                )
            }
        });

        ReactDOM.render(
            <HelloMessage name='xiangming' />,
            document.getElementById('example')
        )
    </script>
</body>
</html>

使用jsx创建一个class时，如果没有指定类名，jsx会默认地把定义的变量作为展示的类名使用。

// Input (JSX):
var Nav = React.createClass({ });
// Output (JS):
var Nav = React.createClass({displayName: "Nav", });

如果我们要在标签的属性上面使用变量作为属性值，我们需要用花括号 {} 代替双引号 "":

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

在js语法中，它的注释和js是有一些不同的：

jsx规定，在花括号{}中可以使用js代码，所以单行注释需要用花括号{}包裹一下，然后再使用 /*要注释的内容*/，

多行注释可以直接使用

多行注释内容1

多行注释内容2

多行注释内容3

var content = (
  <Nav>
    {/* child comment, put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
  </Nav>
);

参考链接：http://reactjs.cn/react/docs/jsx-in-depth.html

react-jsx

推荐阅读