React 你好世界组件
示例
可以将React组件定义为扩展基React.Component类的ES6类。组件必须以其最小形式定义一个render方法，该方法指定该组件如何呈现给DOM。该render方法返回React节点，可以使用JSX语法将其定义为类似HTML的标签。以下示例显示了如何定义最小组件：
import React from 'react'
class HelloWorld extendsReact.Component{
render() {
return <h1>Hello, World!</h1>
}
}
export default HelloWorld组件也可以接收props。这些是其父级传递的属性，用于指定组件本身无法知道的一些值。属性还可以包含一个函数，该组件可以在某些事件发生后由组件调用-例如，按钮可以接收其onClick属性的函数，并在单击该按钮时调用它。编写组件时，props可以通过propsComponent本身上的对象来访问它：
import React from 'react'
class Hello extendsReact.Component{
render() {
return <h1>Hello, {this.props.name}!</h1>
}
}
export default Hello上面的示例显示了组件如何呈现name其父级传递到prop中的任意字符串。请注意，组件无法修改其收到的道具。
组件可以在任何其他组件中呈现，或者如果是最顶层的组件，则可以直接呈现到DOM中，使用ReactDOM.render并向其提供要呈现React树的组件和DOM节点：
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'
ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))现在，您已经知道如何制作基本组件并接受props。让我们更进一步并介绍state。
为了演示起见，让我们制作HelloWorld应用程序，如果给出了全名，则仅显示名字。
import React from 'react'
class Hello extendsReact.Component{
constructor(props){
//由于我们要扩展默认构造函数，
//首先处理默认活动。
super(props);
//从道具中提取名字
let firstName = this.props.name.split(" ")[0];
//在构造函数中，随时修改
//当前上下文的state属性。
this.state= {
name: firstName
}
} //看起来不错，在基于JSX的类def中不需要逗号！
render() {
return <h1>Hello, {this.state.name}!</h1>
}
}
export default Hello注意：每个组件都可以具有自己的状态，也可以接受其父级的状态作为道具。
Codepen链接到示例。