webpack 项目使用--转换为React项目（4）

秒速五厘米 2022-09-03 10:17 160阅读 0赞

在上面的几篇博客中我们创建了webpack项目，现在我们需要将webpack项目转换为react项目，如何进行转换

1.将项目中的node\_modules 文件夹删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

2. 安装dom 和react-dom

cnpm i react react-dom -S

![20210806180011787.png][]

安装好了之后我们发现在项目中重新生成了node\_modules

3.在项目中使用react，如何使用，首先在index.html 创建一个容器

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>hello</title>
        </head>
        <body>
           
           <div id="app"></h1>
        </body>
    </html>

然后编辑index.js 文件，导入react 和react-dom

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

创建一个虚拟的dom 元素

// 创建虚拟DOM 元素
    // 参数1：创建元素的类型，字符串 表示元素的名称
    // 参数2：是一个对象或者null 表示这个元素的属性
    // 参数3：子节点 （包括其它 虚拟的DOM 获取文本节点）
    // 参数n：其它的子节点
    const myh1=React.createElement('h1',{id:'myh1',title:'this is title'},'这是一个大大的H1')

将虚拟的dom元素渲染到页面上的容器中

//参数1 要选线的react元素
    //参数2 页面上的容器 
    ReactDOM.render(myh1,document.getElementById("app"));

然后，启动项目：

npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

在上面操作中我们将webpack 项目转换成为一个react 项目的具体的步骤

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/87a504938953441f9bc653e582dd9491.png
[20210806180011787.png]: /images/20220829/304e3d3e3f72439e8424266e359ab4cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/77b7c52c7e6b4997ab3de08ca4714180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/e77a5e7580b748a09a0fe5851e2f5ae5.png