创建react项目

6. 创建基本的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;

7. 在项目中使用 react

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

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

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

3. 导入 包：

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

4. 创建虚拟DOM元素：

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

5. 渲染：

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

   ​

8. JSX语法

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）

1. 如何启用 jsx 语法？

   • 安装 babel 插件

     • 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
     • 运行cnpm i babel-preset-env babel-preset-stage-0 -D

   • 安装能够识别转换jsx语法的包 babel-preset-react

     • 运行cnpm i babel-preset-react -D

   • 添加 .babelrc 配置文件

     {
       "presets": ["env", "stage-0", "react"],
       "plugins": ["transform-runtime"]
     }
     

   • 添加babel-loader配置项：

     module: { //要打包的第三方模块
         rules: [
           { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
         ]
     }
     

     ​

2. jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；

3. 在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中

   • 渲染数字
   • 渲染字符串
   • 渲染布尔值
   • 为属性绑定值
   • 渲染jsx元素
   • 渲染jsx元素数组
   • 将普通字符串数组，转为jsx数组并渲染到页面上【两种方案】

4. 在 jsx 中 写注释：推荐使用{ /* 这是注释 */ }

5. 为 jsx 中的元素添加class类名：需要使用className 来替代 class；htmlFor替换label的for属性

6. 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；

7. 在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！

当 编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译；