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

落日映苍穹つ 2022-09-03 10:24 190阅读 0赞

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

[https://blog.csdn.net/datouniao1/article/details/119460618][https_blog.csdn.net_datouniao1_article_details_119460618]

我们知道是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代码，我们想把这个代码直接的渲染到页面上

但是页面上无法解析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

因为这个时候 .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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

2. webpack.config.js 中添加module

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

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

然后运行项目：

npm run dev

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

我们需要执行：

cnpm i babel-loader@7 -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

之后重新运行：

npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

上面我们的项目中就引入的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"));

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

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

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

希望对你有所帮助

[https_blog.csdn.net_datouniao1_article_details_119460618]: https://blog.csdn.net/datouniao1/article/details/119460618
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/d5c356e1a888410a9777eff3a4765b51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/96fc92a7ea964485910cbe171f4b8d47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/6f9b2d2019334cfcadfe0a944921f341.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/e0f4c65fa81c43e2a616130c97ea52fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/7b80c791f2de42e89d756d3ee809058c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: /images/20220829/5ae3f88bdf1c430e9d9c75ee5cbd90a3.png