在上面的几篇博客中我们创建了webpack项目，现在我们需要将webpack项目转换为react项目，如何进行转换
1.将项目中的node_modules 文件夹删除
2. 安装dom 和react-dom
cnpm i react react-dom -S
安装好了之后我们发现在项目中重新生成了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 项目的具体的步骤
希望对你有所帮助
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
