React学习之旅Part4：React组件的function创建方式及传值、抽离为单独jsx文件

创建方式：构造函数

首先导包

import React from 'react'
import ReactDOM from 'react-dom'

可以用构造函数来创建组件
一个构造函数就是一个组件
组件的首字母必须大写 否则浏览器将当作普通标签 解析失败 从而报错

在组件中必须返回一个合法的JSX虚拟DOM元素 否则会报错

function Hello(props)// 在构造函数中接收外界传来的数据
{
   
    // 若在一个组件中return null 则代表该组件为空 什么都不渲染
    // return null;

    // 组件中的props是只读的 不能重新赋值 无论是React还是Vue
    
    return <div>Hello{
   props.user.name}</div>
}

使用组件
直接将组件的名称以标签的形式放置于页面上即可

ReactDOM.render(<div>
    Test
    <Hello></Hello>
</div>,document.getElementById("app"))

组件的传值：props

首先定义一个测试用