将组件抽离为单独的jsx文件

为了对项目中创建的组件更好地管理，我们在src目录下新建components目录，用于存放将来要创建的组件。下面以一个简单的Hello组件为例，演示组件的导出与导入：
components目录下的Hello.jsx：

import React from "react"

function Hello(props){
    return <div>Hello,{props.name}</div>;
}

export default Hello;

index.js：

import React from "react"
import ReactDOM from "react-dom"

import Hello from "./components/Hello.jsx"

ReactDOM.render(
    <Hello name="David" />,
    document.getElementById("app")
);

在组件中需要导入React，创建完组件之后通过export default将组件暴露出去；在需要用到该组件的文件中通过import引入该组件，注意在引入的时候不能省略.jsx后缀名。