React学习 ==> 02创建

创建基本的webpack4.x项目

1. 运行npm init -y 快速初始化项目
2. 在项目根目录创建src源代码目录和dist产品目录
3. 在 src 目录下创建 index.html
4. 使用 cnpm 安装 webpack ，运行cnpm i webpack webpack-cli -D
   • 如何安装 cnpm: 全局运行 npm i cnpm -g
5. 注意：webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积；

   • 默认约定了：

   • 打包的入口是src -> index.js

   • 打包的输出文件是dist -> main.js

   • 4.x 中 新增了 mode 选项(为必选项)，可选的值为：development 和 production;

     module.exports={
         mode:'development',//product development
         plugins:[
             htmlplugin
         ],
         module:{
             rules:[
                 { test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/ }
             ]
         }
     }
     

     ​

在项目中使用 react

1. 运行 cnpm i react react-dom -S 安装包

   • react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
   • react-dom： 专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

2. 在index.html页面中，创建容器：

   <!-- 容器，将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->
   <div id="app"></div>
   

3. 导入 包：

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

4. 创建虚拟DOM元素：

   // 这是 创建虚拟DOM元素的 API    <h1 title="啊，五环" id="myh1">你比四环多一环</h1>
   //  第一个参数： 字符串类型的参数，表示要创建的标签的名称
   //  第二个参数：对象类型的参数， 表示 创建的元素的属性节点
   //  第三个参数： 子节点
   const myh1 = React.createElement('h1', { title: '啊，五环', id: 'myh1' }, '你比四环多一环')
   

5. 渲染：

   // 3. 渲染虚拟DOM元素
   // 参数1： 表示要渲染的虚拟DOM对象
   // 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
   ReactDOM.render(myh1, document.getElementById('app'))