create-react-app与sass
create-react-app中依赖的react-scripts中webpack没有对sass和less做配置，所以使用时要我们自己来配置。1、执行 yarn eject --弹出配置文件（注意：这个操作是不可逆的）2、执行 yarn add node-sass sass-loader --安装sass依赖3、在config文件中找到webpack-config-dev.js和webpack-config-prod.js文件4、两个文件中同样都加...
2024-01-10
create-react-app 版本3.2
create-react-app vw-layoutyarn eject 为了打开webpack.config.jsyarn start假如报错了 yarn add @babel/plugin-syntax-jsx -D第一步完成辣yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano -D引入依赖const pos...
2024-01-10
create-react-app慢的解决方法
解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app指令默认调用npm，于是直接把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别了。npm config set registry https://registry.npm.taobao.org -- 配置...
2024-01-10
create-react-app搭建react项目
1.全局安装create-react-appnpm install -g create-react-app2.创建项目create-react-app 项目文件夹名3.进入项目3.1 cd 项目文件夹名创建之后的项目目录3.2运行项目npm start 打开http://localhost:3000/查看运行成功后的项目...
2024-01-10
create-react-app中添加less支持
前言使用 create-react-app 脚手架创建项目后，默认是不支持 less 的。所以我们需要手动添加。第一步 暴露webpack配置文件使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可：npm run eject运行之后，我们发现多了一个config文件夹这样...
2024-01-10
create-react-app 区分环境 环境变量
config.jsconst baseURL = { // 使用反向代理解决跨域时，dev应为空字符串 dev: '', test: 'http://abc.cn', // 使用yarn build打包，所有接口使用这个url，需要服务器解决跨域 prod: 'http://abc.cn'}[process.env.REACT_APP_MODE]const imageBaseUrl = { dev: 'http://abc.cn/', test: 'http://abc.work/', pr...
2024-01-10
在create-react-app上运行构建后的空白页
尝试在netlify上部署create-react-app，但是我的构建是空白页。我正在使用.env文件加载firebase api密钥，这是构建问题吗？即使当我尝试在计算机的本地空白页上打开它时，它也会在控制台中输出错误：“源“ file：///event-app/static/js/main.108757a0.js的源加载失败””package.json：https://gist.github.com/Verthon/f82371ad2b...
2024-01-10
create-react-app竟然用cnpm才安装成功
今天用create-react-app初始化一个react的项目，竟然提示说没有模板，可能因为create-react-app版本太老了，于是重装create-react-app,没想到竟然直接是npm安装竟然提示说没权限，用cnpm竟然一下子就安装好了，不知道是怎么回事？...
2024-01-10
create-react-app与babel-polyfill
create-react-app 与babel-polyfill2019-5-17由于目前某些框架或者组件使用了比较新的特性，这些特性目前是不支持的，所以这个时候我们需要给这个特性去转成目前浏览器能够理解的，需要使用到各种polyfill ，目前使用的比较多的就是babel-polyfill，但是我们可以发现在create-react-app 中，我们如同vue一般，在入...
2024-01-10如何指定运行基于create-react-app的项目的端口？
我的项目基于create-react-app。npm start或yarn start默认情况下，将在 上运行该应用程序，并且在package.json中没有指定端口的选项。在这种情况下，如何指定自己选择的端口？我想同时运行此项目的两个（用于测试），一个在端口3005，另一个在3006回答：如果您不想设置环境变量，则另一个选择是从以下位...
2024-01-10
create-react-app 工程，如何修改react端口号？
概要：3000端口是webpack配置里面写的，可以通过传递一个PORT全局变量，来修改这个端口。当然，您还可以在node_modules/react-scripts/目录下面，批量搜索替换3000字样，这个操作比较暴力。最优方案：先安装cross-env插件，然后通过修改package.json中的命令行，传递进来新的PORT环境变量。本方案最完美，其余...
2024-01-10详解create-react-app 2.0版本如何启用装饰器语法
create-react-app(简称cra)已经更新之2.0.3版本, babel也更新至7.x版本, JavaScript装饰器语法虽然还不是标准, 但是借助于babel, 也能在项目里愉快的玩耍.cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, 达到修改的目的.yarn add react-app-rewired修改package.json"scripts": { "star...
2024-01-10
antd中按需加载使用react-app-rewired报错
按照antd官网步骤 https://ant.design/docs/react/use-with-create-react-app-cn最后yarn start会报错【解决方法】原因是react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired解决方法，对react-scripts进行降级处理yarn add react-app-rewired@2.0.2-next.0参考：https://blog.csdn.net/weixin_39836173/article/det...
2024-01-10
解决create-react-app在ie中打开页面空白的兼容性问题
最近使用react官方脚手架create-react-app建立项目的时候发现在ie浏览器打开时显示空白，在主流的chrome、fireFox等浏览器显示是正常的。打开控制台显示如下既然提示了语法错误，那么猜想应该是兼容性的问题，看了下浏览器的版本号是ie11。首先我翻了下create-react-app的文档，从中看到了正好有对ie9、ie10...
2024-01-10npx create-react-app xxx创建项目报错的解决办法
手头有一台大学时代的Windows电脑，它此前没有装过create-react-app，只装了node环境。版本信息：node -> 10.16.3，npm -> 6.9.0。前几日闲的无事想给它装个React，结果失败了，报了错，所以有了下面这出。安装过程根据React官方文档（上图）可以发现，此时并不需要安装create-react-app工具，只要你的node >= 8.10 && ...
2024-01-10
使用 create-react-app 快速构建 React 开发环境
在终端执行以下命令创建项目：1、指定创建的项目位置（这里以桌面为例）cd Desktop 2、创建 React 项目npx create-react-app my-app 3、进入项目并启动cd my-appnpm start可以直接将项目文件拖入终端，输入 npm start 按回车启动...
2024-01-10
使用create-react-app创建项目（二）——引入less方法
详情参考https://blog.csdn.net/jackie_bobo/article/details/88352568...
2024-01-10
react-native-wechat微信组件的使用
对我来说link没有成功过，所以参考了其他人的文章，原文：https://www.jianshu.com/p/6a792118fae4 共需要3个步骤：1.在微信开放平台创建一个移动应用2.安装微信插件3.分别配置安卓和ios环境 第一步：要去:https://open.weixin.qq.com （微信开发平台）注册账号并且创建一个移动应用。若已创建可省略第...
2024-01-10
【React】create-react-app 打包后怎么在服务器上部署？
使用create-react-app写了个应用，现在想测试怎么发布到服务器上，但是却没有头绪。打包出来的目录是这样的是直接让nginx指向这个目录吗？回答对...指到build目录即可，上周刚部署过。你试试不就知道了。这种问题应该是报错了才来问。请问楼主问题解决了吗，今天我也遇到这个问题，求指教如果是纯...
2024-01-10
React：实现create-react-app + antd 按需加载配置
因为在网上找了很久都没有解决，最后却发现在官网就有！实在是太坑了，记录一下，免费浪费大家的时间这样就好了啊！！！！当前百度搜到的配置方法都是基于create-react-app 1.x 和 2.x的但是现在create-react-app 已经更新到3.x了 网上那些方法既麻烦又无效按照antd官网解决就完事了...
2024-01-10是否可以通过public文件夹中的create-react-app服务静态文件？
基本上，我为客户制作了一个（相对）简单的应用程序。该应用程序正常工作，但他们一直在要求更改数据。鉴于该应用程序最初的预期简单性以及它保存静态数据的事实，我没有将其链接到任何后端。该数据将保存在本地静态文件中，而该对象具有保存数据的对象。问题在于，fle被捆绑到了buld中，...
2024-01-10
create-react-app+typescript alias 无效问题记录
create-react-app 项目下 alias 无效问题解决人狠话不多, 不想看废话点击到达解决方法问题背景背景: 使用了脚手架 create-react-app 创建项目, 使用的是 typescript 结果使用 src/*** 的时候提示找不到开始查找问题从 webpack 配置开始查问题开始从 config/webpack.conf.js 文件的 resolve.alias 找, 发现引用了 modules.we...
2024-01-10
react-native app架构以及react-navigation学习笔记
以下内容仅仅是个人学习react-navigation的一些笔记，仅用于个人参考。 首先，明确一下这里讨论的app的基本架构，基本的架构跟QQ的架构差不多，底部是一个tabBarNavigation，每个tabBar分支都嵌套在一个stackNavition上面，还有一个侧滑栏（就是常说的抽屉），侧滑栏是一个drawerNavigation，每个drawer分...
2024-01-10
React-Native学习之路（三）props和state
React-Native props和state2018年7月20日10:23props：即属性，它是用来描述一个组件的特征的，由父组件传递给子组件，而且一经指定，在被指定的组件的生命周期中则不再改变第一个this.props.name就会使用PropsTest的组件，在PropsTest中设置后就能在子组件进行显示默认属性：可以在这个子组件中设置默认的属...
2024-01-10
