JSX语法

JSX 的基本语法规则

遇到HTML标签（以 < 开头），就用HTML规则解析；遇到代码块JavaScript（以 { 开头），就用JavaScript规则解析，比如

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

React的组件以大写字母开头，原生的HTML标签以小写字母开头。
你可以通过React.createElement来创建一个树。第一个参数是标签，第二个参数是一个属性对象，第三个是子节点。

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);

js作为属性值和子节点才需要用大括号{}括起来，因为JSX最终会转换成JS输出，所以表达式只能用简单行内运算符如三母运算符，而不能使用if else

//属性表达式
// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);
  
//子节点表达式
// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

样式

style后传入一个js的对象而不是css字符串，最外层的{}表示是js，内层的{}表示为对象

<span style={{color:'red'}}></span>

事件

React组件的事件和属性都是驼峰的形式，比如：

<!-- 原html写法 -->
<form onsubmit="xxx"></form>
<!-- react写法 -->
render: function(){
return
<form onSubmit="xxx"></form>
}

Refs

我们利用 ref 属性给子组件命名，通过this.refs引用真实的DOM节点。

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    this.refs.author.value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
      </form>
    );
  }
});

变量

react变量似乎必须要加var，存疑?

数据流

React中数据是沿着组件树通过props传递，从上到下（最外层到最内层）单向流动的。

哪些组件应该有state

常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过props传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。

参考：
关于JSX语法
深入理解JSX
react中文版
react入门教程