0
点赞
收藏
分享

微信扫一扫

webpack 项目使用--转换为React项目(4)


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

1.将项目中的node_modules 文件夹删除

webpack 项目使用--转换为React项目(4)_生命周期

 

2. 安装dom 和react-dom

             cnpm i react react-dom -S

webpack 项目使用--转换为React项目(4)_react_02

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<!-- 创建一个容器,将来渲染的虚拟的DOM,会放在容器内 -->
<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

webpack 项目使用--转换为React项目(4)_react_03

 效果如下:

webpack 项目使用--转换为React项目(4)_html_04

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

希望对你有所帮助

举报

相关推荐

0 条评论