Webpack使用React基础用法（二）

最新推荐文章于 2024-05-06 19:08:09 发布
最新推荐文章于 2024-05-06 19:08:09 发布
阅读量178 收藏
点赞数
文章标签： webpack reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43259355/article/details/107157980
版权

承接上一篇webpack用法（一）

现已有目录结构如下：
在这里插入图片描述
首先cnpm install react react-dom -D下载react
（1）打开src/index.html文件 添加一个id=app 的空容器
在这里插入图片描述
（2）在src/index.js文件下引入react / react-dom 进行操作 如下
在这里插入图片描述
React.createElement() //创建虚拟dom元素
参数1：创建元素类型，字符串，表示元素名称
参数2：是一个对象 或 null 表示当前DOM元素属性
参数3： 子节点（包括 其他 虚拟dom 获取文本子节点）
参数n: 其他节点

ReatDOM.render（mydiv, document.getElementById(‘app’)
使用ReactDOM把虚拟DOM渲染到页面容器内
参数1： 要渲染的虚拟DOM元素
参数2： 指定页面上的容器
（3）ctrl+s保存后运行 npm run dev 页面就会重新渲染

@玖
关注
从零开始，用Webpack构建React基础教程
2401_84091289的博客
04-14 979
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽，着实压力不小。
使用Webpack搭建React脚手架（上篇）
UI_linlan的博客
12-24 529
通过使用Create React App来搭建React脚手架，我们可以快速创建一个新的React项目，并且集成了一些常用的开发工具和库。通过构建生产版本，我们可以生成一个优化后的、可部署的应用。搭建React脚手架是开发React应用的重要一步，它可以帮助我们快速初始化项目结构，并且集成一些常用的开发工具和库，提高开发效率。这将启动一个本地开发服务器，并自动在浏览器中打开一个新的标签页，显示你的React应用。CRA提供了一些默认的配置，但你也可以根据需要对项目进行定制。文件来定制你的应用。
基于webpack4搭建的react项目框架
weixin_34384915的博客
06-29 182
介绍 框架介绍，使用webpac构建的react单页面应用，集成antd。使用webpack-dev-server启动本地服务，加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载 手动搭建，不使用cli，大量注释适合初学者对webpack的理解学习，对react项目的深入了解 启动 git clone http...
通用、封装、简化 webpack 配置
weixin_33860722的博客
12-04 190
通用、封装、简化 webpack 配置 现在，基本上前端的项目打包都会用上 webpack，因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候，总是免不了要配置 webpack，很是麻烦。 简化 webpack 配置的一种方式是使用社区封装好的库，比如 roadhog。roadhog 封装了 webpack 的一...
webpack及react的搭配使用(一)
SYYling的专栏
07-24 6931
准备工作目前webpack作为目前国内最火的打包及加载工具之一，经常在react工程中使用，接下来我们来详细了解下webpack的使用姿势 在接下来的操作步骤之前，需要先配置修改react工程下的package.json,增加devDependencies如下: "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^
webpack项目环境的搭建和react的简单封装
weixin_46383743的博客
08-04 429
在安装node-sass的时候很容易安装不上 当你第二次安装的时候安装上了 运行的时候可能会报错，这时候你只要把node_modules的依赖包删除重新 安装这样就可以解决的。JS编译器，把ES6(下一代ECMAScript)转化成浏览器能够兼容的ES5代码。：新建一个文件夹 为 react-stack。： 在文件夹里面打开命令行 输入一下的指令。2，引入webpack模块 添加插件。1 设置入口文件:entry选项。1.在devServer中添加。2 设置出口:output选项。...
webpack打包react和过程遇到的问题
小蚁的博客
01-16 2673
1.首先我们需要在项目下载中间件：babel-preset-es2015，babel-preset-react，react，react-router，webpack-dev-servernpm install babel-preset-es2015 babel-preset-react react react-router react-router --save-devwebpack-dev-ser
使用webpack搭建react开发环境的方法
08-27
本篇文章主要介绍了使用webpack搭建react开发环境的方法，在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。一起跟随小编过来看看吧
2024年前端最全从零开始，用Webpack构建React基础教程，web开发项目
最新发布
2401_84435555的博客
05-06 1074
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】| devtool选项 | 配置结果 || — | — |
手把手教你使用Webpack打包React项目
热门推荐
杜小白的博客
05-10 2万+
什么是Webpack？   webpack是一个前端资源加载/打包工具，前端的常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码打包整合起来。先来认识一下webpack的基本配置现在开发搭建开发环境第一步：在react-music-player文件目录下，执行npm init创建package.json文件。这时，代码当中的配置文件就已生成啦：第二步：现在配置文件中...
使用webpack打包react项目中遇到的问题（二）
Lynn_z的博客
10-16 4034
问题三：外部扩展库中React is not defined 原因：不小心把react写在了配置文件的extenal中 module.exports = { entry: __dirname + '/src/ManageSystem.js', output: { path: __dirname + '/build', filename:
webpack打包之框架代码与业务代码拆分
小熊的博客
07-14 3030
why框架代码与业务代码要拆分 单独打包类库文件原因：框架代码稳定性比较高，而业务代码更新迭代快，希望浏览器尽可能长的时间对框架代码进行缓存来减少服务器流量，让用户加载速度更快。 方法 在entry中设置框架代码放置的文件 config.entry = { app: path.join(__dirname, 'src/index.js'), ...
webpack搭建项目并引入React
weixin_43431702的博客
12-20 690
1、npm init -y 快速初始化项目（生成package.json文件） 2、在项目目录下创建dist和src文件 3、在src下创建 index.html Document haha48 和main.js console.log(‘main47775.js’) 4、cnpm install webpack -D...
webpack + node.js + react 项目实例
nhhehedan的博客
07-15 2308
一、创建基本目录结构1.新建项目工程：PockerUI 2.配置jsx 3.安装 webpack在此之前你应该已经安装了 node.js.npm install webpack -g1参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpac...
react+webpack 打包，开发环境和生产环境集成一体拿来就能用
KungLun的博客
08-11 2565
直接上代码： webpack.config.js   import webpack from "webpack"; import path from "path"; var path = path.resolve(__dirname,"/main.j") var ExtractTextPlugin = require("extract-text-webpack-plugin");//c...
如何扩展 Create React App 的 Webpack 配置
weixin_34355881的博客
01-16 486
Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。 但是对于一些熟悉 webpack 的开发者来说，他们可能想对 webpack 配置做一些修改，这个时候应该怎么办呢？ 其实我们可以通过以下几种方式来修改 we...
create-react-app 脚手架封装了Webpack的配置 但是还有些方法需要添加 所以需要二次配置
weixin_44403301的博客
03-09 691
前言 日常的React项目开发过程中，基本都会去使用create-react-app（简称cra）这个脚手架。cra中封装了不少关于Webpack的配置，但是有时候这并不能满足我们的需求，例如需要配置别名的时候，这个时候就需要对cra进行二次配置了。 二次配置一般有两种方法 1. eject 2. customize-cra 推荐你使用第二种，因为第一种是不可逆的，比如你在飞机上，你跳下去还回得来...
webpack编译react需要注意的细节
赵乘风_i
03-29 2710
原文地址：https://www.onmpw.com/tm/xwzj/web_150.html使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。react安装当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。# npm...
webpack配置React开发详解版
weixin_41105030的博客
03-23 711
文档 React官方文档的学习 webpack的配置 webpack的babel-loader的配置 文件夹的解释 dist用来放入打包后的文件（生产时） src这是我们开发时的文件（css和less主要是这里用来测试的） index.html（我们的页面，放一个容器来让其他元素渲染进去） <div id="app"></div> webpack.config.j...
Webpack与React开发实战指南
《SurviveJS - Webpack and React》是一本深入探讨Webpack和React结合使用的实战指南，通过阅读此书，读者不仅可以了解到这两个技术的基本用法，还能学习到如何在实际项目中有效利用它们，从而提升开发效率和项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值