什么是React

React用于构建用户界面，它是一种声明式的，高效灵活的JavaScript库。

React有拥有众多组件，现在我们要从React.Component子类开始：

code

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

很快我们就会用到些有趣的、看起来很像XML的标签。你的组件会告诉React你想渲染什么。然后，当你组件中的数据变化时，React将立刻更新数据，并将其渲染出来。

这里，ShoppingList是一个React组件类，React component class 或者 React component type。组件接受参数，调用props，并通过render方法返回视图层，将内容展示出来。 (fixme: React component class/React component type ?)

render会返回React 元素：它是轻量化的描述，描述了你想渲染的那个东西。 React拿到这个描述，并把它渲染到屏幕上。大多数React开发者使用一种特殊的语法：JSX，它让我们可以更容易地写这样的结构。在构建的时候，<div />语法会被转换为React.creatElement('div')。所以上面这个例子等同于：

code

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

查看全部展开的版本

如果你对creatElement()感兴趣，请在API引用中进一步查看详情。在本教程中，我们不会直接用到它，而是会继续使用JSX。

在JSX中，不论任何JavaScript表达式，你都可以把它放进花括号中。每个React元素都是真实的JavaScript对象，你可以用来存储变量，或者传入你的程序。

虽然ShoppingList组件只会渲染內建的DOM组件，但你其实可以很容易地构建自定制的React组件：只需要写<ShoppingList />就可以。每个组件都被包裹着，所以它们能独立运行。这个机制让你得以用简单的组件来构建复杂的UI。