React 项目--引入bebal 解析JSX（5）

通过webpack创建react，我们可以观看前面的博文：

     ​

我们知道是React项目实质是将相关的组件渲染到页面的容器中，那么组件的编写有两种办法

第一种：通过React.createElement的方式创建组件

// 导入react
import React from 'react'  //创建组件，虚拟DOM 元素，生命周期
import ReactDOM from 'react-dom'   //把创建好的组件和虚拟DOM 放到页面上展示

// 创建虚拟DOM 元素
// 参数1：创建元素的类型，字符串 表示元素的名称
// 参数2：是一个对象或者null 表示这个元素的属性
// 参数3：子节点 （包括其它 虚拟的DOM 获取文本节点）
// 参数n：其它的子节点

const myh2=React.createElement('h1',{id:'myh1',title:'this is title'},'这是一个大大的H1')
const myDiv=React.createElement('div',{id:'mydiv1',title:'this is div'},'这是一个大大的div2',myh2)
//参数1 要选线的react元素
//参数2 页面上的容器 
ReactDOM.render(myDiv,document.getElementById("app"));

但是这样的一种方式我们可以看到的是很麻烦，我们向页面添加一个元素都需要createElement一下，我们页面上的元素可能有很多，那这样需要create很多的元素，确实很麻烦。当然我们希望能和之前的写html代码一样，react为了解决这样的问题，也就是出现了babel，babel我们知道balbel的作用是解析.js文件中的html代码，引入babel，我们就可以在js文件中写html代码

我们先看这样的代码：

在index.js 文件中：

import React from 'react'
import ReactDOM from 'react-dom'
const myh1=<h1>你好，我是H1</h1>
ReactDOM.render(myh1,document.getElementById("app"));

这个里面我们的myh1 这个变量是HTML代码，我们想把这个代码直接的渲染到页面上

但是页面上无法解析

因为这个时候 .js 中的html 代码浏览器是没有办法解析，但是浏览器却人React.createElement这个语法所以我们不得不将.js 中的标签转换为createElement的形式，如何转换，所以babel就登场了，babel就是这样的作用，他能将.js 中的html代码转换为React.createElement的形式

1. 安装babel

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

 2. webpack.config.js 中添加module

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); //导入，在内存中自动生成 index 页面
const htmlPlugin=new HtmlWebpackPlugin({
     template:path.join(__dirname,'./src/index.html'),
     filename:'index.html'
});
module.exports={
    mode:'development',
    plugins:[
        htmlPlugin
    ],
    module:{
       rules:[
          {test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}
       ]
    } 
}

3.在根目录新建.babelrc文件

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

然后运行项目：

npm run dev

但是运行的时候报错，原因是babel 和babel-loader的版本不兼容

我们需要执行：

        cnpm i babel-loader@7 -D

之后重新运行：

npm run dev

 上面我们的项目中就引入的babel ，接下来在js代码中编写html代码，然后看浏览器是否还有报错

import React from 'react'
import ReactDOM from 'react-dom'
const myh1=<div>
         我是div 标签
         <h1>你好，我是H1</h1>
      </div>
ReactDOM.render(myh1,document.getElementById("app"));

对应的页面上也没有出现报错，这一点说明的是我们babel 将我们js代码中的html代码转换成为了

浏览器能够解析的React.createElement的形式，也就是babel的作用

希望对你有所帮助