React组件，主要包括三部分：状态（state）、属性（props）和渲染（render）。

render是创建组件时唯一必须的方法，状态和属性都是可选的。通过setState方法更新state，组件会重新渲染组件的UI以及以此数据为属性的任何子组件。属性props是父组件传递给子组件的数据，更新属性就会自动更新接收该属性的任何组件。

React创建组件的两种方法：

函数组件，或叫函数式组件

import React from 'react';

const Cat = () => {
  return (
    <span> Hello, I am your cat! </span>
  );
}

export default Cat;

Class 组件

import React, { Component } from 'react';

class Cat extends Component {
  render() {
    return (
      <button>Hello, I am your cat!</button>
    );
  }
}

export default Cat;

• Class 组件必须有一个render()函数，它的返回值会被渲染为一个 React 元素
• 还需要从 React 中引入Component

以小写字母开头的元素代表一个 HTML 内置组件，比如 <div> 或者 <span> 会生成相应的字符串 'div' 或者 'span' 传递给 React.createElement（作为参数）。大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件，如 <Foo /> 会编译为 React.createElement(Foo)。

我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件，则在 JSX 中使用它之前，必须将它赋值给一个大写字母开头的变量。

将函数组件转换成 class 组件

1. 创建一个同名的 ES6 class，并且继承于 React.Component。
2. 添加一个空的 render() 方法。
3. 将函数体移动到 render() 方法之中。
4. 在 render() 方法中使用 this.props 替换 props。
5. 删除剩余的空函数声明。
   
   

参考链接：https://www.reactnative.cn/docs/intro-react

参考链接：https://zh-hans.reactjs.org/docs/jsx-in-depth.html#gatsby-focus-wrapper