React中创建组件

第一种、使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收，必须要向外return一个合法的jsx创建的虚拟DOM

创建组件：

function Hello() {
    // 如果在一个组建中，return一个null，则表示此组件是空的，什么都不会渲染
    // return null
    // 在组建中，必须返回一个合法的jsx虚拟DOM元素
    return <div>这是Hello组件</div>
}

为组建传递数据

// 在构造函数中，使用props形参，接收外界传递过来的数据
function Hello(props) {
    console.log(props)
    return <div>这是Hello组件 --- {props.name}</div>
}

const dog = {
    age: "12",
    name: "大黄",
    color: "yellow"
}

ReactDom.render(<div className="a">
   {/* 直接把组件名称，以标签形式丢到页面上即可 */}
   {/* 使用组件为组件传递props数据 */}
   <Hello name={dog.name} age={dog.age} color={dog.color}></Hello>
</div>, document.getElementById('app'))

1、父组件向子组件传递参数
2、使用{...obj}属性扩散传递参数
3、将组件封装到单独的文件中
4、注意：组件名称首字母必须是大写
5、如何省略.jsx后缀名

//打开webpack.config.js, 并在导出的配置对象中新增如下节点
resolve: {
        extensions: ['.js', '.jsx','.json'] //表示，这几个文件的后缀名，可以省略不写
}

6、再倒入组件的时候，配合和使用@路径符

//打开webpack.config.js, 并在导出的配置对象中新增如下节点
resolve: {
        alias: {
            '@': path.join(__dirname, './src') // 这样，@就表示项目中的src的这一层路径
        }
}

第二种

使用class关键字来创建组件