创建组件的方式

第1种 -创建组件的方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在 构造函数的参数列表中使用props来接收；

必须要向外return一个合法的JSX创建的虚拟DOM；

• 创建组件：

      function Hello () { 
        // return null 
        return <div>Hello 组件</div>
      }

• 为组件传递数据：

      // 使用组件并 为组件传递 props 数据
      <Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

      // 在构造函数中，使用 props 形参，接收外界 传递过来的数据
      function Hello(props) {
        // props.name = 'zs'
        console.log(props)
        // 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；

        return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
      }

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

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

6 在导入组件的时候，配置和使用@路径符号

第2种 - 创建组件的方式

使用 class 关键字来创建组件

ES6 中 class 关键字，是实现面向对象编程的新形式