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

在上面的几篇博客中我们创建了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 项目的具体的步骤

希望对你有所帮助

webpack 项目使用--转换为React项目（4）相关推荐

IntelliJ-将Java项目/模块转换为Maven项目/模块
本文翻译自:IntelliJ - Convert a Java project/module into a Maven project/module I have a project on Bitbu ...
搭建react项目搭建ts react项目使用vite搭建react项目
创建react 项目注意: 网上有一些生成react 的方法,但是也有一些是过时的. 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架这个脚手 ...
react打包后图片丢失_使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
vue项目和react项目中禁止eslint
vue项目禁止eslint: react项目禁止eslint: 找到webpack.base.conf.js文件,然后注释掉里面红色框圈住的内容即可.
一个用于学习的react项目
React-element 根据开源项目 vue-sell进行的开发,将其改造成了react的项目.在开始学习vue的时候就是用的这个项目,发现效果不错,所以在学习React也使用了此项目. 目的:将 ...
使用webpack5自己搭建react项目脚手架（手把手教，把手伸过来，好软~呸，好手）
问:目前前端最火的两大框架react和vue官方都有自己的成熟的cli脚手架,为什么还要自己搭建脚手架了? 答: 一.自己搭建脚手架可以根据自己公司的项目特征来决定使用哪些具体的插件或者编译方式,官方 ...
一、react项目描述、技术选择、路由设计
1. 项目描述项目为一个前后端分离的后台管理的SPA,包括前端PC应用和后端应用包括用户管理.角色管理(权限管理).商品分类管理.商品管理等功能模块前端:使用React全家桶+Antd+Axio ...
Vue3 vue-cli、create-react-app、vite 创建vue/react项目(笔记)
文章目录 1. vue-cli vue2/3 项目 2. create-react-app react 项目 3. 使用 vite 安装 vue3 项目 3.1 方式一,框架选择配置安装 3.2 方式 ...
react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...

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

webpack 项目使用--转换为React项目（4）相关推荐

最新文章

热门文章