初次使用create-react-app
最近玩了一下React，感觉还挺好玩的，说实话对后端的来说比vue好多了，记得刚学vue的时候是一头雾水； 基础知识暂时后面慢慢说，其实感觉还是挺容易的吧，今天就简单使用一下react脚手架，后续的用这个脚手架写点东西1.准备node版本 使用create-react-app这个官方脚手架，对node版本有要求...
2024-01-10
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中分环境打包
npm run build不同环境打包区分，:dev,:test,:prod区分。推荐工具：npm install dotenv-cli --save-dev在根目录src下添加文件：//.env.devREACT_APP_FAVICON=./development_favicon.pngREACT_APP_TITLE=[Dev]项目的titleREACT_APP_DEVELOPMENT_BASE_URL='https://test.jaagro.com:9030'//.env.testREACT_APP_...
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 编译进度条配置
安装：yarn add webpackbar修改webpack.config.js文件：const WebpackBar = require('webpackbar')plugins: [ // ... new webpack.ProgressPlugin(), new WebpackBar()]webpack.ProgressPlugin() 是webpack内置插件，webpack.ProgressPlugin，WebpackBar用来显示编译时长...
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开始，构建项目架构
1.生成项目命令行执行：create-react-app myapp，生成如下结构： 2.安装sass依赖，让你在项目中可以使用scss模块化，index.module.scss：npm i node-sass sass-loader -D之后就能用了，rules配置脚手架已经处理了,使用：/*index.module.scss*/.test{ background-color: pink; min-height: 100vh;}// index.jsx中import React from...
2024-01-10
create-react-app脚手架的安装和目录结构介绍
1.对脚手架的初步了解编程领域中的“脚手架”指的是能够快速搭建项目“骨架”的一类工具，例如大多数的React项目都有src，public，webpack配置文件等等，而src目录中又包含components目录等等。每次在新建项目时，手动创建这些固定的文件目录。脚手架的作用就是帮助你完成这些重复性的工作，包括一...
2024-01-10
Ubuntu create-react-app失败，权限被拒绝
我收到一个奇怪的错误：Unhandled rejection Error: EACCES: permission denied, mkdir '/home/ubuntu/.npm/_cacache/index-v5/14/36'atus我只是在AWS实例上安装了npm（6.4.1）和节点（11.2.0），没有任何问题。我在全球范围内安装了create-react-app。错误说Thisis an error with npm itself.我有点茫然。我创建了目录/home/ubuntu/.npm/_cac...
2024-01-10无法将“ create-react-app”识别为内部或外部命令
我正在尝试在Windows PC上使用create-react-app命令设置reactapp。我已经在Mac计算机上使用过它，并且效果很好。但是我遇到了一个问题。这是我在命令行上的步骤。我想念什么吗？C:\Windows\system32>cd C:\Users\ugur\Desktop\denemeC:\Users\ugur\Desktop\deneme>npm initThis utility will walk you through creating a package.json file.It ...
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
create-react-app创建react项目 css模块化处理
用的css预处理器用sass，其他大同小异。用create-react-app创建项目，执行npm run eject弹出配置文件（此操作不可逆）；配置sass，用的最新的CRA，webpack4；webpack.config.dev.js （webpack.config.prod.js需相同配置一份）:module下的rules 中 oneOf 修改&增加 { // Exclude `js` files to keep "css" loader working as it injec...
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如何在create-react-app中将`src`文件夹更改为其他内容
我想知道是否可以使用react-script重命名src为app文件夹之类的其他名称回答：您可以使用react-app-rewired覆盖反应路径配置。就我而言，我可以更改 文件中的路径const path = require('path');module.exports = { paths: function (paths, env) { paths.appIndexJs = path.resolve(__dirname, 'mysrc/client.js'); ...
2024-01-10
在create-react-app官方脚手架中引入redux数据管理工具
前言：从安装脚手架到引入redux管理数据直接开始1.使用npm安装脚手架工具1）打开命令行，全局安装create-react-app脚手架工具npm install create-react-app -g2)选择好项目需要安装的位置进行安装，这里安装在d盘，这个过程事件稍微长一些，因为有很多依赖包需要去安装执行create-react-app mydemo，这里已经安装...
2024-01-10
【React】antd中按需加载使用react-app-rewired报错
运行yarn start 报错injectBabelPlugin is not a function代码和antd官网一样报错信息回答错误原因：react-app-rewired删除所有方法的新版本injectBabelPlugin，这些方法被移动到一个名为'customize-cra'的新包中修改方法：1.确保已经下载customize-cra，less-loader2.修改config-overrides文件为const { override, fixBabelImports, // ...
2024-01-10
react-native学习---react-native布局
学而时习之,不亦乐乎react-native中布局采用的是FlexBox(弹性框)进行布局在react-native 布局中需要注意的是：1.在react-native中的尺寸是没有单位的（android设备中尺寸单位解释为sp,ios中解释为pt,代表设备独立像素）2.在react-native中css 与web端css基本相同，但有少许不同之处#flexDirectionflecDirection ：定义父视图...
2024-01-10
React-Native开发总结-react层面上的问题
最近更新时间：2017年10月30日11:43:49《我的博客地图》 在实际开发中，如果采用框架进行项目构建，组件的生命周期是重头戏，也是难点和重点。学习了理论知识点需要深度实践才能领悟其中的意思。1、react的生命周期如下图所示：生命周期方法执行步骤：constructor-componentWillMount-render-componentDidM...
2024-01-10
【JS】一篇文章搞定 create react app 核心思路
主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green贡献主题：https://github.com/xitu/jueji...theme: juejinhighlight:create re...
2024-01-10
初识react（4）——在react-app中如何实现md5加密
当我们用react-app做项目时，会有对用户密码加密的操作，下面给大家分享：在react-app中如何实现md5加密。 如果你不知道如何用react-app搭建脚手架项目，可去看我的博客 初识react（1）——使用脚手架创建项目 下面步入正题，1. 首先npm下载md5：npm install --save js-md5 如下图所示： 2. ...
2024-01-10
