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