Hello World Component

React 组件可以定义为扩展基础 React.Component 类的 ES6 类。在其最小形式中，组件必须定义 render 方法，该方法指定组件如何呈现给 DOM。render 方法返回 React 节点，可以使用 JSX 语法将其定义为类似 HTML 的标记。以下示例显示如何定义最小组件：

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

组件也可以接收 props。这些是由其父级传递的属性，以指定组件本身无法知道的某些值; 属性还可以包含在某些事件发生后可以由组件调用的函数 - 例如，按钮可以接收其 onClick 属性的函数，并在单击它时调用它。编写组件时，可以通过组件本身的 props 对象访问其 props：

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

上面的示例显示了组件如何呈现由其父级传递到 name prop 的任意字符串。请注意，组件无法修改它接收的道具。

组件可以在任何其他组件中呈现，或者如果它是最顶层组件则直接呈现在 DOM 中，使用 ReactDOM.render 并为其提供组件和 DOM 节点，你希望在其中呈现 React 树：

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

到现在为止，你知道如何制作一个基本组件并接受 props。让我们更进一步，介绍 state。

为了演示，让我们制作我们的 Hello World 应用程序，如果给出了全名，则只显示第一个名称。

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

注意： 每个组件都可以拥有自己的状态，或者接受父组件作为道具的状态。

Codepen 链接到示例。