React&webpack
React与webpack的使用
whuhewei
拥抱变化
展开
-
实现AntDesign组件的按需导入
昨天我们演示了如何为React项目启用AntDesign组件,现在回顾一下,引入方法为:import {DatePicker} from "antd";import "antd/dist/antd.css"虽然我们只用到了DatePicker组件的样式表,但是该方法却全局引入了所有AntDesign组件的样式表。这样做的结果就是将来会打包大量没用的代码。因此我们需要真正地实现按需导入Ant...原创 2020-05-04 08:05:45 · 6165 阅读 · 2 评论 -
为React项目启用AntDesign组件
AntDesign是蚂蚁金服开发的一个UI框架,为开发人员提供了丰富易用的各种组件。下面我们演示在React中使用AntDesign渲染一个时间选择器组件:首先装包:npm i antd -S按需导入组件:import {DatePicker} from "antd";全局导入css:import "antd/dist/antd.css"使用:像使用一般组件那样使用<DatePick...原创 2020-05-03 06:23:01 · 297 阅读 · 0 评论 -
React中匹配路由参数的方式
模糊匹配默认情况下,路由中的规则是模糊匹配的,如果路由可以部分匹配成功,就会展示这个路由对应的组件。看下面的例子:<Link to="/movie/top250/10">电影</Link><Route path="/movie" component={Movie}></Route>虽然Link标签的to属性与Route标签的path不完全相...原创 2020-05-02 11:26:55 · 2087 阅读 · 0 评论 -
react-router-dom路由的基本使用
在react中启用路由模块,首先要装包:npm i react-router-dom -S,装完之后在根组件中导入:import {HashRouter, Route, Link} from "react-router-dom"。HashRouter:表示一个路由的根容器,将来,所有路由相关的东西,都要包裹在HashRouter里面,而且,一个网站中,只需要使用一次HashRouter就好了。...原创 2020-05-01 09:37:36 · 567 阅读 · 0 评论 -
在项目中为scss或less文件启用模块化
在项目当中我们会用到很多第三方样式表,比如bootstrap,可以发现大多数第三方样式表都是.css文件。而之前我们为.css文件启用了模块化,这就导致我们在使用第三方样式表的时候非常不方便。我们希望不为第三方样式表启用模块化,只对自己写的样式表启用模块化。解决思路是:自己写的样式表都要以.scss结尾,只为.scss结尾的样式表启用模块化。安装bootstrap运行npm i bootstr...原创 2020-04-26 14:25:54 · 839 阅读 · 0 评论 -
通过local和global设置类名是否被模块化
使用:local()和:global():local()包裹的类名,是被模块化的类名,只能通过className={cssobj.类名}来使用;同时,:local()默认可以不写,在样式表中定义的类名,都是被模块化的类名。:global()包裹的类名,是全局生效的,不会被css-modules控制,使用定义的类名className="类名"举个例子::global(.title){ ...原创 2020-04-25 10:35:43 · 596 阅读 · 0 评论 -
使用localIdentName来自定义模块化的类名
从本质上理解CSS模块化怎么来理解CSS模块化?是为CSS添加了作用域吗?不是的!你可以这么理解CSS模块化:CSS模块化其实就是将类名变成键,通过随机生成的值作为真正的类名,从而避免CSS作用域冲突的问题。如果你将系统随机生成的类名赋给引入该CSS文件以外的部分依然是可以生效的。下面来验证这一点:我们首先在控制台打印一下导入的cssobj:{title: "_1_SjtDCiFqhB0kv...原创 2020-04-24 10:26:20 · 2408 阅读 · 0 评论 -
为普通样式表通过modules参数启用模块化
CSS样式表作用域冲突问题由于CSS没有作用域的概念,因此昨天那种在组件中引入样式表的方法会使得该样式表在整个项目中都生效。如果我们想只让导入的样式表在当前作用域内有效,需要为其启用模块化。CSS启用模块化在webpack.config.js中的css-loader后面追加参数:{ test: /\.css$/, use: ["style-loader", "css-loa...原创 2020-04-23 10:01:31 · 189 阅读 · 0 评论 -
使用css样式表美化组件
在React中,虽然能够将样式写成js的形式,但这种方法不太方便,写样式最好的方法还是使用css样式表。安装配置css-loader安装cnpm i style-loader css-loader -D配置在webpack.config.js中的module节点下新增rule:{ test: /\.css$/, use: ["style-loader", "css-lo...原创 2020-04-22 17:51:15 · 216 阅读 · 0 评论 -
配置webpack设置根目录
在项目当中,我们可能正在大量使用相对路径,但是相对路径存在一个明显的问题:当文件目录发生变化时,需要频频修改相对路径。一个比较常见的情形是:在React开发中,我们经常需要导入组件,而组件一般都是放在components目录下。组件的位置一般不会改变,但是需要导入组件的文件的位置可能经常变化。这个时候如果我们使用相对路径,则需要对导入路径进行修改;而如果使用绝对路径,不管当前文件放到哪里都可以正确...原创 2020-04-21 18:35:31 · 2567 阅读 · 0 评论 -
配置webpack从而在导入组件的时候省略.jsx后缀名
昨天介绍过在index.js中导入组件Hello的方式:import Hello from "./components/Hello.jsx"。如果我们想在导入组件的时候省略.jsx后缀名,可以通过配置webpack实现:在webpack.config.js中增加resolve节点:resolve: { extensions: [".js", ".jsx", ".json"]}...原创 2020-04-20 10:59:36 · 1356 阅读 · 0 评论 -
将组件抽离为单独的jsx文件
为了对项目中创建的组件更好地管理,我们在src目录下新建components目录,用于存放将来要创建的组件。下面以一个简单的Hello组件为例,演示组件的导出与导入:components目录下的Hello.jsx:import React from "react"function Hello(props){ return <div>Hello,{props.name}&...原创 2020-04-19 20:42:03 · 331 阅读 · 0 评论 -
React Developer Tools安装使用
当项目中使用到了React时,在Chrome浏览器运行时控制台会打印:Download the React DevTools for a better development experience: https://fb.me/react-devtools。如下图所示:安装React DevTools点击Chrome浏览器的扩展程序(菜单→更多工具→扩展程序),打开Chrome网上应用店。...原创 2020-04-18 16:36:14 · 7003 阅读 · 0 评论 -
DevTools failed to parse SourceMap 警告解决方法
最近在用webpack-dev-server进行开发的过程中,控制台一直报一个警告:DevTools failed to parse SourceMap: webpack:///node_modules/_sockjs-client@1.4.0@sockjs-client/dist/sockjs.js.map。下面给出消去这个警告的方法:SourceMap技术在处理该警告之前,有必要了解下什么...原创 2020-04-16 20:22:52 · 25488 阅读 · 2 评论 -
安装配置babel
要想在React项目中启用JSX语法,需要配置babel。babel是一个JavaScript编译器。安装配置babel装包cnpm i babel-core babel-loader babel-plugin-transform-runtime -Dcnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D这里...原创 2020-04-15 16:51:26 · 660 阅读 · 0 评论 -
在node与webpack环境下使用react
前面基本的基于node的webpack项目已经搭建完毕了,接下来我们在该环境中引入react:在项目中使用react装包在终端输入:cnpm i react react-dom -S安装react和react-dom两个包,注意-S代表该包不仅在开发过程中要用到,产品发布上线后也需要用到;-D代表装的包只在开发过程中用到,比如webpack。导入包在index.js中导入安装的两个...原创 2020-04-14 17:50:57 · 150 阅读 · 0 评论 -
webpack-dev-server与html-webpack-plugin的基本使用
在项目开发过程中,如果每次改动代码之后都要刷新浏览器才能获得最新的表现,体验不是很好。这个时候我们就需要用到实时打包编译的功能,webpack-dev-server可以帮助我们:安装webpack-dev-server调出终端输入命令cnpm i webpack-dev-server -D,安装过程如下:为了在node开发环境下快速启动webpack-dev-server,我们在packa...原创 2020-04-13 17:28:50 · 1215 阅读 · 0 评论 -
创建基本的webpack4.x项目
webpack是一个现代JavaScript应用程序的静态模块打包器,下面演示如何创建一个最基本的webpack4.x的项目:新建一个webpack-base文件夹作为项目的根目录。右键用Pycharm(当然你也可以用VSCode)打开,调出终端,输入命令:npm init -y该命令用于初始化项目,执行完该命令之后会在根目录下生成package.json文件。3. 在项目根目录下...原创 2020-04-12 21:02:20 · 216 阅读 · 0 评论 -
安装配置nodejs
直接在html页面中通过script标签引入react的方式只能供学习使用,更广泛的使用react的方式是在node环境下。下面我们就来安装配置nodejs:安装node下载地址:https://nodejs.org/en/download/选择对应系统的资源下载即可,下面在windows操作系统下演示:下载完成之后双击安装包按照提示一直next就行,推荐将其安装到C盘以外的目录,这里我...原创 2020-04-11 19:00:34 · 223 阅读 · 0 评论 -
React学习——Day10
这篇文章讲解了React中的各个生命周期函数。通过生命周期函数图可以快速理解组件生命周期的概念。原创 2020-04-10 17:17:20 · 144 阅读 · 0 评论 -
React学习——Day9
这篇文章介绍了以下内容:1.在React中如何绑定事件2.this.setState()用法3.手动实现文本框与state的双向绑定原创 2020-04-09 10:47:01 · 181 阅读 · 0 评论 -
React学习——Day8
案例:评论列表组件下面演示使用React创建一个简单的静态评论列表组件,在这个案例中,你将看到父组件如何向子组件传递数据以及如何在组件中书写样式。React08.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Rea...原创 2020-04-08 20:20:16 · 120 阅读 · 0 评论 -
React学习——Day7
这篇文章介绍了React中基于class关键字创建组件的方式;对比了通过function构造函数创建的组件与使用class关键字创建的组件的区别;对比了组件中props与state之间的区别原创 2020-04-07 10:47:32 · 124 阅读 · 0 评论 -
React学习——Day6
这篇文章详细讲解了ES6中class关键字的用法。包括如何使用class创建类以及类的静态/实例属性和静态/实例方法;使用extends实现类之间的继承;使用super函数在子类中调用父类中的构造器。原创 2020-04-06 11:47:53 · 119 阅读 · 0 评论 -
React学习——Day5
React中使用构造函数来创建组件:1.使用ES6展开运算符传递参数2.将组件抽离为一个单独的jsx文件原创 2020-04-05 09:43:01 · 149 阅读 · 0 评论 -
React学习——Day4
React将普通字符串数组转为JSX数组并渲染到页面上的两种方案:1.使用foreach2.使用map(推荐)请为map直接控制的元素提供key原创 2020-04-04 09:37:01 · 163 阅读 · 0 评论 -
React学习——Day3
在React中启用JSX语法1. 淘汰React.createElement()写法2. 引入babel3. JSX语法注意事项4. 使用JSX语法原创 2020-04-03 10:13:28 · 261 阅读 · 0 评论 -
React学习——Day2
使用React渲染虚拟DOM到页面上1.导入react和react-dom包2.使用React.createElement()创建虚拟DOM元素3.创建容器4.使用ReactDOM.render()把虚拟DOM渲染到页面上原创 2020-04-02 09:01:32 · 157 阅读 · 0 评论 -
React学习——Day1
1.React简介2.前端三大主流框架3.React与Vue的对比4.为什么要学习React5.React中几个核心的概念原创 2020-04-01 17:45:16 · 211 阅读 · 0 评论