1、create-react-app中配置webpack

// 方法一:将项目的配置文件抽取到项目中,即运行:
npm run eject // 方法二:使用react-app-rewired

2、create-react-app中src文件夹的别名,当使用了ts时可以在tsconfig.json中配置

"compilerOptions": {
"baseUrl":"src",
"paths":{
"src/*":["./*"],
"components/*":["./components/*"],
"pages/*":["./pages/*"],
"api/*":["./api/*"],
"routes/*":["./routes/*"],
"reducers/*":["./reducers/*"],
"store/*":["./store/*"]
},
},

3、将字符串dom生成为react元素

React.createElement(
'span',
{
dangerouslySetInnerHTML: {__html: '这是一个<b>加粗</b>文本'}
},
)

4、eslint用 npx eslint --init来生成配置,使用pre-commit来实现每次提交前检查,如果如果检测失败则禁止提交

5、要用stylelint 需安装依赖 stylelint  stylelint-config-standard  stylelint-scss  stylelint-config-recess-order

6、请求代理http-proxy-middleware不是直接导出的方法,而是一个对象

7、可以通过路由的reader函数来传递route组件的props

8、用=号给class实例属性赋值,报错Parsing error: Unexpected token =,需要在eslint中添加配置

// 指定eslint解析器
parser: "babel-eslint",

9、使用es时 覆盖webpack配置

// 设置别名
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
'@axios': path.resolve(__dirname, 'src/api/axios.js'),
}), // 加载scss全局变量
adjustStyleLoaders(rule => {
if (rule.test.toString().includes('scss')) {
rule.use.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: './src/assets/sass/mixin.scss', // 公共scss变量的路径
}
})
}
})

10、fetch默认不带cookie,如果要带cookie需要显式设置属性{credentials: "include"}

11、在Chrome 85中,有个很重要的变化:将Referrer-Policy默认值从no-referrer-when-downgrade改为strict-origin-when-cross-origin,导致浏览器智能发送同源请求而不能发送异源请求,如果要改变默认行为可以用meta标签 <meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">

12、在postman中可以正常请求,在开发环境中请求却报500

app.use(
'/path',
proxy.createProxyMiddleware({
target: 'http://xx.xx.com', // 代理地址
changeOrigin: true, // 服务端限制的话,需要将请求的源地址改为目标地址,不然报500
})
)

13、antd日期组件中月和星期显示问英文,其他显示为中文,解决方法如下

import 'moment/locale/zh-cn'
 

react踩坑笔记的更多相关文章

  1. React踩坑笔记 —— React

    Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Impor ...

  2. EntityFramework CodeFirst SQLServer转Oracle踩坑笔记

    接着在Oracle中使用Entity Framework 6 CodeFirst这篇博文,正在将项目从SQLServer 2012转至Oracle 11g,目前为止遇到的问题在此记录下. SQL Se ...

  3. CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记

    CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记 cas服务器的搭建 导出证书(1和2步骤是找了课程,随便写了一下存记录,不过对于自己测试不投入使用应该不影响) C:\Users\D ...

  4. ES踩坑笔记

    现在开始在业务上使用ES,记录一些踩坑经历,做点笔记. 2018-11-13 source不返回问题 使用了角色校验,客户端插入成功之后获取数据没有source,和查询参数无关. 检查mapping, ...

  5. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  6. 微信小程序使用pako.js的踩坑笔记

    问题 今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串).第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之 ...

  7. Vue3.x+element-plus+ts踩坑笔记

    闲聊 前段时间小颖在B站找了个学习vue3+TS的视频,自己尝试着搭建了一些基础代码,在实现功能的过程中遇到了一些问题,为了防止自己遗忘,写个随笔记录一下嘻嘻 项目代码 git地址:vue3.x-ts ...

  8. 开始更新webpack踩坑笔记

    今天开始学习webpack,记录下踩过的坑-zxf

  9. TypeScript|Angular踩坑笔记

    今天按照Angular官网玩了下demo程序,踩了个小坑,记录下. TypeScript可以将变量申明为自定义类型,同时也不对该类型进行检查(不像C#,如果没有这个类型会报错) 比如下面这样: 如果我 ...

随机推荐

  1. 密码学系列之:blowfish对称密钥分组算法

    目录 简介 blowfish详解 密钥数组和S-box 密钥数组 S-box 生成最终的K数组 blowfish blowfish的应用 blowfish的缺点 简介 Blowfish是由Bruce ...

  2. 『无为则无心』Python基础 — 9、Python字符串的编码与转义

    目录 1.查看变量类型 2.转义字符 (1)转义字符说明 (2)示例 (3)常用转义字符对照表 3.字符编码 (1)字符编码介绍 (2)Python中的字符编码 (3)编码格式应用于不同场景 提示:上 ...

  3. VsCode中代码折叠快捷键

    ctrl+K  ctrl+[  折叠本级 ctrl+K  ctrl+]  取消折叠本级 ctrl+K  ctrl+0  折叠全部 ctrl+K  ctrl+J  取消折叠全部

  4. Netty 框架学习 —— 预置的 ChannelHandler 和编解码器

    Netty 为许多提供了许多预置的编解码器和处理器,几乎可以开箱即用,减少了在烦琐事务上话费的时间和精力 空闲的连接和超时 检测空闲连接以及超时对于释放资源来说至关重要,Netty 特地为它提供了几个 ...

  5. css中的毛玻璃(不是透明度) 简单文档

    其实毛玻璃很简单 只需要在css中加入 backdrop-filter:blur(8px); 8px是模糊力度 注意:使用该方法前需要设置背景不能是透明(如果是显示这个元素下面的图像记得半透明,例子就 ...

  6. 20、checkconfig

    chkconfig控制的原理(/etc/init.d/里面设置脚本,在/etc/rc.d/rc..d中设置软连接,通过chkconfig进行管理,同时也加入到了service服务,chkconfig设 ...

  7. 9、ssh服务详解及优化

    ssh是"secure shell protocol"的简写,在进行数据传输之前,ssh先对练级数据包通过加密技术进行加密处理, 加密后再进行数据的传输,从而确保了数据的安全: s ...

  8. Web自动化之iframe切换

    一.如何判断元素是否在iframe中 选中要操作的元素,通过下方的父节点查看是否存在iframe,存在则元素在iframe,需要切换至iframe中进行元素的操作 二.iframe切换方式一 1.方式 ...

  9. LeSS 的诞生(一):大规模团队该何去何从

    <敏捷宣言>发布后,"敏捷"被越来越多的小型开发团队认可.与此同时,另一个问题也逐渐暴露了出来:以 Scrum 为首的敏捷方法论对那些大规模的开发团队并不友好. 基于此 ...

  10. gRPC 拦截器能做些什么?

    什么是拦截器? 拦截器是一种横切维度的功能延展. 具象说明一下,高速收费站就是一种拦截器.它可以做什么?收费,查证,交通控制等等,面向所有穿行过往的车辆. gRPC 拦截器主要分为两种:客户端拦截器( ...