webpack --- > 在项目中使用React

说明:

分为2步:

1. 首先导入react 和 react-dom:保证了虚拟DOM的创建和使用
2. 使用babel转码器: 由于DOM结构太多,每次使用React.createElement创建虚拟DOM会给开发带来很大压力,因此采用html的写法,通过babel转码器转换成React语法,可以很大程度上提高开发效率

• 项目源代码

---

在项目中使用react

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

• react: 专门用于创建组件和虚拟DOM,同时组件的生命周期都在这个包中
• react-dom: 专门进行DOM操作的,最主要的应用场景, 就是ReactDOM.render() [ps]: 通过react包创建的dom是在内存中的.因此需要react-dom来获得内存中的DOM
• -S: 代表项目从开发到上线都要用到的包
• -D: 开发时用到的工具

2. 在index.html页面中,创建容器:

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

3. 导入包:

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

4. 创建虚拟DOM元素:

const myh1 = React.createElement('h1', { title:'啊,栗子', id: 'myh1'}, '糖炒栗子')

5. 渲染:

ReactDOM.render(myh1, document.getElementById('app'));

---

使用模板字符串

1. 对于复杂的UI结构来说,使用React.createElement创建虚拟DOM的写法会很复杂.
2. HTML是最优秀的标记语言.
3. 联想到,手写标签的形式来创建虚拟DOM.
   如果直接采用下面的形式来书写,会报错:
   [书写]: const mydiv = <div id="mydiv" title="div aaa">这是一个div元素</div>
   [报错]: You may need an appropriate loader to handle this file type
   [原因]: 在js文件中,默认不能写类似于HTML的标记,否则打包会失败.
   [解决办法]: 可以使用各种包来转换这些JS中的标签.

---

JAX语法:

• 在JS中,混合写入类似于HTML的语法,符合XML规范的JS
• JSX语法的本质,还是在运行的时候,被转码器转换成 React.createElement 形式来执行
  [面试]: JSX是直接在页面中渲染的嘛? 不,会先经过转码器转换成 React.createElement形式来执行

---

使用Babel来将JSX转化成可以在浏览器上运行的DOM

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
• 在webpack.config.js中添加匹配规则.
  • 在webpack中,默认只能打包处理.js后缀名类型的文件
  • 像 .png、.vue 无法主动处理
  • 所以要配置第三方的loader

// webpack.config.js
module:{
  rules:[
    { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
  ]
}

• 添加 .babelrc 配置文件

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