React JSX语法

JSX只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。

例如：

var Nav = React.createClass({/*...*/});

var app = <Nav color=“blue"><Profile>click</Profile></Nav>;

会被转化成

var Nav = React.createClass({/*...*/});

var app = React.createElement(

    Nav,

    {color:"blue"},

    React.createElement(Profile, null, "click")

);

ReactElement createElement(

    string/ReactClass type,

    [object props],

    [children ...]

)

这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。

使用jsx和不适用jsx的区别

// 使用JSX

React.render(

    <div>

        <div>

            <div>content</div>

        </div>

    </div>,

    document.getElementById('example')

);

// 不使用JSX

React.render(

    React.createElement('div', null,

        React.createElement('div', null,

            React.createElement('div', null, 'content')

        )

    ),

    document.getElementById('example')

);

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

注意:

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

JSX 把类 XML 的语法转成纯粹 JavaScript，XML 元素、属性和子节点被转换成 React.createElement 的参数。

注意:

JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过 React.createElement 里的校验代码。

属性表达式

要使用 JavaScript表达式作为属性值，只需把这个表达式用一对大括号 ({}) 包起来，不要用引号 (“”)。

// 输入 (JSX):

var person = <Person name={window.isLoggedIn ? window.name : ‘ ‘} />;

// 输出 (JS):

var person = React.createElement(

  Person,

  {name: window.isLoggedIn ? window.name : ''}

);

子节点表达式

同样地，JavaScript 表达式可用于描述子结点。

// 输入 (JSX):

var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;

// 输出 (JS):

var content = React.createElement(

  Container,

  null,

  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)

);

注释

JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

/var content = (

  <Nav>

    {/* 一般注释, 用 {} 包围 */}

    <Person

      /* 多

         行

         注释 */

      name={window.isLoggedIn ? window.name : ''} // 行尾注释

    />

  </Nav>

);