开发者学堂课程【React 入门与实战：创建组件的第一种方式并为组件传递 props 数据】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8088
创建组件的第一种方式并为组件传递 props 数据
目录：
一、创建组建的方式
二、注意事项
一、创建组件的方式
基于组件化开发
示例：
03.jsx 语法中的注意事项
// 1．导入包
import React from 'react '
import ReactDoMfrom 'react-dom'
// 3．调用 render 函数渲染 jsx XML 比 HTML 严格
//什么情况下需要使用（〉呢?
//当需要在 JSX 控制的区域内，写JS表达式了，则需要把 JS 代码写到{}中
ReactDOM.render(
123
, document.getElementById ( ' app '))
运行页面：
//第一种创建组件的方式，一个普通的构造函数就是一个组件
Function Hello(){ }
//如何使用:直接在 render 中调用
ReactDOM.render(
123
直接把组建的名称，以标签的形式，丢到页面上即可
*/>, document.getElementById ( ' app '))
运行报错：
原因：组件未返回任何东西，错误原因组件中未返回一个状态
代码修改：
//如果在一个组件中 return null，则表示此组件什么都不渲染
Function Hello(){
Return null
}
运行结果：
添加代码：
retunrn
Hello组件
在 function 组件内部必须返回一个合法的的 JSX 虚拟 DOM 元素
例如此时环境为 VUE 环境
//创建狗对象，拥有三个属性，交给 hello 渲染
Const dog={
Name:”大黄”,
Age:3,
Gender:”雄”
}
运行结果：
在React组件中可以清楚看到传入的 name
在组件内部输入需要在方法中接受
Function Hello(props){
Console.log(props)
Return
这是Hello组件
}
Const dog={
Name:”大黄”,
Age:3,
Gender:”雄”
}
运行结果：
Props 是一个对象
Function Hello(props){
Console.log(props)
Return
这是 Hello 组件 ---{props.name}
}
运行结果：
可以将 age gender 传入
保存打开 React 工具，选择 Hello 组件
运行结果：
渲染 age 和 gender
Function Hello(props){
Console.log(props)
Return
这是Hello组件 ---{props.name}
---{props.age} ---{props.gender}
}
运行结果：
在组件中接收外界传来的数据，在形参中接收，形参的命名都可以，但最好通过语义写
//为 props 对象重新赋值
Props.name=’zs’
运行结果：
报错：name 是只读的，不可修改
Vue 中有 props，也是只读的
结论：
不论是 vue 还是 React，组件中的 props 永远都是只读的，不能够被重新赋值
二、注意事项
创建组件：
Function Hello(){
//Return null
Return
Hello组件
}
为组件传递数据：
//使用组件并为组件传递 props 数据,使用 props 形参
//在构造函数中接收外界传递过来的数据
Function Hello(props){
Console.log(props)
Return
这是Hello组件 ---{props.name}
---{props.age} ---{props.gender}
}
1.父组件向子组件传递数据
2.使用{...obj}属性扩散传递数据
3.将数据封装到单独的文件中
4.组件名称必须是大写
