开发者学堂课程【React 入门与实战：快速学习将组件抽离为单独的 .jsx 文件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8090
将组件抽离为单独的 .jsx 文件
目录
一、将组件抽离为单独的 jsx 文件的示例操作
二、将组件抽离为单独的 jsx 文件的定义和注意事项
一、将组件抽离为单独的 jsx 文件的示例操作
1、这里特意把组件 Hell 首字母改成大写，这样就醒目一点，会知道他是一个函数。如果写的是小写，那下面用的时候，可能就会报错，所以组件的名称首字母必须要用大写。
2、组件一般都要单独的放在一个文件当中去，所以所有的源代码都要放在 src 里面，先在src里面建立一个 components 文件夹，然后在这个文件夹里建立 Hello.jsx 组件（组件一般放在 jsx 当中，想要这个组件被正常的解析，就需要确保webpack.config.js 里面是否加了 jsx ，这一步是一定要加上的）。
Hello.jsx
Import React from ’react‘
//第一种创建组件的方式，下面这这步叫创建并导入组件
Export default Function Hell(props){
//如果 在一个组件种 return 一个 null 。则表示此组件式空的，什么都不会渲染
//return null
//在组件种，必须返回一个合法的 JSX 虚拟 DOM 元素
//props.name =‘zs’
//第一种创建组件的方式
//组件必须单独的存放到一个文件中
//组件存放到 jsx 文件夹内
function Hello(props){
//使用名称必须与后面统一，组件的首字母必须是大写，否则会被系统认定成普通的标签来进行渲染，然后报错。
console.log(props)
//所有的源代码都必须存放到 src 目录下
//结论:不论是 vue 还是 React，组件中的 props 永远都是只读的;不能被重新赋值;
return
这是Eello组件--- {props.name}--- {props.age)--- {props.gender}
}
二、将组件抽离为单独的 jsx 文件的定义和注意事项
1.父组向子组件传递数据
2.使用（…ob）属性扩散传递数据
3.将组件封装到单独的文件中
4.注意：组件的名称首字母必须大写
为了对项目中创建的组件更好地管理，在src目录下新建components目录，用于存放将来要创建的组件。
以 Hello 组件为例，演示组件导出与导入：
components目录下的Hello.jsx：
import React from "react"
function Hello(props){
return
Hello,{props.name}
;
}
//把组件暴露出去
export default Hello;
index.js：
//导入包
import React from "react"
import ReactDOM from "react-dom.jsx"
//导入 Hello 组件
//默认，如果不做单独的配置的话，不能省略后缀名 .jsx
import Hello from "./components/Hello.jsx"
注意：如果后面省略后缀名 .jsx 就会报错
ReactDOM.render(
,
document.getElementById("app")
);
在组件中需要导入React，创建完组件之后通过export default将组件暴露出去；在需要用到该组件的文件中通过import引入该组件。
注意：在引入的时候不能省略 .jsx 后缀名。
