组件

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

以上是 React 官方对组件的定义，有两个要素：

1. 任意入参（任意的意思是可以有，也可以没有，可以有一个，也可以有多个）；

2. 返回 React 元素（什么是 React 元素）。

React 元素

其实在上述对组件的定义中也已经给出了 React 元素的作用——用于描述页面展示内容。

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

从 React 官方对 React 元素的描述中可以知道，React 元素的本质就是普通的 JavaScript 对象。
综合上述两点，可以得出 React 元素：

1. 本质是 JavaScript 对象；

2. 用于描述页面展示内容。

那如何用 JavaScript 对象来描述页面内容呢？
众所周知，在网页开发中，HTML 表示了页面的骨架，CSS 表示了页面的样式，JavaScript 表示了页面的交互。先抛开 JavaScript，前两者其实很容易用 JavaScript 对象来描述。
比如，对于以下页面代码：

<h1 class="greeting">
    Hello, world!
</h1>

可以大概用以下 JavaScript 对象来描述：

{
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world!'
    }
};

React 中提供了一个创建以上对象的 API —— React.createElement。
以上对象可以通过以下代码来创建：

React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

但是，使用 React.createElement API 创建 React 元素是很不方便和直接的，为什么这么说呢，比如对于以下 React 元素：

<ul class='teststyle'>
    <li>one</li>
    <li>two</li>
</ul>

需要使用嵌套调用才可以生成。

React.createElement(
    'ul',
    { className: 'teststyle' },
    React.createElement('li', null, 'one'),
    React.createElement('li', null, 'two')
);

如果能像写 HTML 来书写，通过一定的规则将其转换为 API 调用，最终生成 React 元素就好了。
JSX 因运而生。

JSX

JSX, it is a syntax extension to JavaScript. JSX produces React “elements”.
JSX，是一个 JavaScript 的语法扩展。JSX 可以生成 React 元素。

从官方文档中可以知道 JSX：

1. 是 JavaScript 语法扩展；

2. 用于生成 React 元素。

因为 JSX 是 JavaScript 的语法扩展，所以 JSX 具备了 JavaScript 的灵活性。使用 JSX 可以很方便，更直观的生成 React 元素。

ReactDom.render

到这里，大概了解组件的概念，那有了组件后，怎么渲染到页面上呢？

ReactDOM.render(
  element,
  document.getElementById('root')
);

以上代码就是通过调用 ReactDOM.render API 将 React 元素 element 渲染到指定的位置（id 为 root 的标签内）。
至此，大概了解了 React 使用 JSX 语法创建 React 元素，进而由 React 元素构建组件，最后将组件渲染到页面上的过程。

其实，对于 JSX 语法规则、组件还有好多内容可以展开，后面有时间会有针对性的进行整理。

总结

JSX：1?? JavaScript 语法扩展； 2?? 用于生成 React 元素。 React 元素：1?? 本质是 JavaScript 对象； 2?? 用于描述页面展示内容。 组件：1?? 接收任意入参（props）；2?? 返回 React 元素。