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. 《吃透微服务》 - 服务容错之Sentinel

    大家好,我是小菜. 一个希望能够成为 吹着牛X谈架构 的男人!如果你也想成为我想成为的人,不然点个关注做个伴,让小菜不再孤单! 本文主要介绍 SpringCloud中Sentinel 如有需要,可以参 ...

  2. Windows平台安装RabbitMQ(亲测)

    一.下载安装包 https://www.rabbitmq.com/download.html 选择Windows下载 3.下载RabbitMQ安装包和运行环境Erlang安装包 (1)比对下载对应的版 ...

  3. Java Collecion的常用方法

    import java.util.*; /** * 数组存储数据的特点: * ①一旦初始化,大小确定 * ②一旦定义,存储的类型确定且相同. * 数组存储的弊端: * ①大小无法改变. * ②方法较少 ...

  4. DL基础补全计划(二)---Softmax回归及示例(Pytorch,交叉熵损失)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  5. Tars | Win10下Docker部署TarsJava(SpringBoot)全过程及踩坑记录

    @ 目录 前言 1. 相关环境版本: 坑点一:VMware与Win10 Docker冲突 坑点二:20.版本TarsJava(SpringBoot)依赖文件缺失 2. Docker安装: 坑点三:Do ...

  6. SpringMVC(1)流程框架总体介绍

    SpringMVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能MVC 模块,其功能和Strtus2 ...

  7. Python字符串格式方式 %s format()

    p.p1 { margin: 0; font: 12px ".PingFang SC" } p.p2 { margin: 0; font: 12px "Helvetica ...

  8. php错误处理,自动加载,以及栈堆内存和运行模式堆浅解 (转)

    Php错误处理 Php错误级别: E_ERROR 致命错误,会终止脚本运行.值为1 E_WARNING 警告错误,给出提示,不会终止运行值为2 E_PARSE 编译时的语法解析错误,解析错误仅仅由分析 ...

  9. 腾讯云短信详细教程(C#,WinForm)

    1.申请一个微信公众号(申请公众号是准备工作的第一步,必须先完成)(那为什么要用公众号呢?是因为这个条件对于学生党来说比较简单实现,不需要本人有上市的APP或是网站等) 2.百度搜索"腾讯云 ...

  10. 「CF1380G」 Circular Dungeon

    CF1380G Circular Dungeon 看懂样例就能做. 虽然我瞪了 20 分钟 菜是原罪 首先可以将从每一个点出发所能获得的价值相加,再除以 \(n\) 就可以得到价值的期望. 所以问题转 ...