转自https://github.com/hulufei/react-tutorial
利用 JSX 编写 DOM 结构，可以用原生的 HTML 标签，也可以直接像普通标签一样引用 React
组件。这两者约定通过大小写来区分，小写的 字符串是 HTML 标签，大写开头的 变量是 React 组件。
import React from 'react';import { render } from 'react-dom';var myDivElement = <div className="foo" />;render(myDivElement, document.getElementById('mountNode'));HTML 里的 class在 JSX 里要写成 className，因为 class在 JS 里是保留关键字。同理某些属性比如 for要写成 htmlFor。
import React from 'react';import { render } from 'react-dom';import MyComponent from './MyComponet';var myElement = <MyComponent someProperty={true} />;render(myElement, document.body);属性值使用表达式，只要用 {}替换 "":
// Input (JSX):var person = <Person name={window.isLoggedIn ? window.name : ''} />;// Output (JS):var person = React.createElement( Person, {name: window.isLoggedIn ? window.name : ''});子组件也可以作为表达式使用：
// Input (JSX):var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;// Output (JS):var content = React.createElement( Container, null, window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login));
在 JSX 里使用注释也很简单，就是沿用
JavaScript，唯一要注意的是在一个组件的子元素位置使用注释要用 {}包起来。
var content = ( <Nav> {/* child comment, put {} around */} <Person /* multi line comment */ name={window.isLoggedIn ? window.name : ''} // end of line comment /> </Nav>);
React 会将所有要显示到 DOM 的字符串转义，防止 XSS。所以如果 JSX
中含有转义后的实体字符比如 ©(©) 最后显示到 DOM 中不会正确显示，因为
React 自动把 ©中的特殊字符转义了。有几种解决办法：
<div dangerouslySetInnerHTML={{__html: 'cc © 2015'}} />
如果在 JSX 中使用的属性不存在于 HTML
的规范中，这个属性会被忽略。如果要使用自定义属性，可以用 data-前缀。
可访问性属性的前缀 aria-也是支持的。
如果你要使用的某些标签或属性不在这些支持列表里面就可能被 React
忽略，必须要使用的话可以提 issue，或者用前面提到的 dangerouslySetInnerHTML。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
