8.抽离为独立JS文件

• 思考: 项目中的组件多了之后, 该如何组织这些组件呢?
• 选择一: 将所有组件放在同一个JS文件中
• 选择二: 将每个组件放到单独的JS文件中
• 组件作为一个独立的个体, 一般都会放到一个单独的JS文件中

详细步骤:

1.创建 Hello.js

2.在Hello.js中导入 React

3.创建组件 (函数或类)

4.在Hello.js中导出该组件

5.在index.js中导入 Hello 组件

6.渲染组件

// Hello.js
import React from 'react'
class Hello extends React.Component {
  render() {
    return (
      <div>抽离为独立的JS文件</div>
    )
  }
}

// 导出 Hello组件
export default Hello

// index.js
import Hello from './Hello'
// 渲染导入的 Hello 组件
ReactDOM.render(<Hello />, root)