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
Mac上安装create-react-app
Mac上安装create-react-app,经常出现安装不上，这里说一下办法：方法一：sudo npm install -g create-react-appcreate-react-app my-reactcd my_codenpm start方法二：yarn global add create-react-appcreate-react-app my-appcd my_codeyarn start安装reduxyarn add i redux -S 数据状态管理yarn add i react-red...
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的开发服务器不会自动刷新
我正在关注使用create-react-app的React 教程。该应用程序是由create-react-app v1.3.0创建的create-react-app my-app开发服务器由运行npm start多次更改代码后，不会实时更新浏览器的实时/热重载。刷新浏览器无济于事。仅停止开发服务器并重新启动它，才能捕获对代码的新更改。回答：您是否看到了《用户指南...
2024-01-10
create-react-app 打包开启 gzip 压缩
查看有哪些版本：npm view compression-webpack-plugin versions安装旧版本：yarn add compression-webpack-plugin@5修改webpack.config.js文件：const CompressionPlugin = require('compression-webpack-plugin')const isGzip = process.env.GENERATE_GZIP_FILE === 'true'plugins: [ // ... ...
2024-01-10
新版 create-react-app 添加less环境配置
1. 安装less npm install less-loader less --save-dev2. 查找 node_modules 下面的react-scripts/config/webpack.config.js 默认已经帮你配置了sass环境 (只要安装sass环境 npm install sass-loader node-sass --save-dev) 我们只要新增 const lessRegex = /\.less$/;const...
2024-01-10
使用create-react-app 搭建一个项目，并引入antd
使用create-react-app 搭建一个项目，并引入antd1、我已经安装了node和npm，查看版本用node -v和npm -v2、安装脚手架npm install -g create-react-app3、打开自己想放项目的路径，比如我想放进一个app里面，在路径上面输入cmd，回车4、使用脚手架快速构建一个项目，在命令行输入create-react-app myproject,里面的myprojec...
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项目
你所知道的一些事情，你可能不知道的一些事情Create React App是搭建React项目的快速方法。这样我们可以重点放在代码上，而不是构建工具上。事实1：可以使用单个命令创建完整项目这个神奇的命令可以通过以下三种方式之一调用：npx create-react-app my-appnpm init react-app my-appyarn create react-app my-a...
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中props和state
props是子组件用来接收父组件的数据 父组件如果传十个参数 但是子组件用了9个 就会导致子组件中满屏都是this.props 就很难去区分各个参数的作用 所以我们将需要用的数据 放入constructor中进行提前说明 代码如下我们还需要跟子组件自身的数据有所区分才行(函数中参数和自己定义的内容) 可...
2024-01-10为什么create-react-app同时创建App.js和index.js？
我开始学习React，现在我想了解的目的是什么，index.js以及App.js通过运行create-react-app创建的目的。例如，为什么我们不能只使用。App.js？我已经读到App.js通常用作应用程序的主要入口点，但是自动生成的index.js似乎是主要入口点的一部分：import React from 'react';import ReactDOM from 'react-dom';import './index.css';...
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
使用Facebook的create-react-app快速构建React开发环境
笔者最近打算基于半年来的实践与React社区的发展重制下笔者的React系列教程，前端实战文章——React系列。本文从属于Web 前端入门与最佳实践。create-react-app:来自Facebook官方的零配置命令行工具create-react-app是来自于Facebook出品的零配置命令行工具，能够帮你自动创建基于Webpack+ES6的最简易的React项目模...
2024-01-10
开源代码分析-react-native-eyepetizer
目录结构：app----imgs --- pages ------ home ------ explore ------ follow ------ profile ------ selected --- utils启动流程： ---> index.js ----> /home/InitApp.js (InitApp ) ---...
2024-01-10JavaScript继承：Object.create与New
在JavaScript中，这两个示例有什么区别：先决条件：function SomeBaseClass(){}SomeBaseClass.prototype = { doThis : function(){ }, doThat : function(){ }}使用Object.create的继承示例A：function MyClass(){}MyClass.prototype = Object.create(SomeBaseClass.prototype);使用new关键字的继承示例...
2024-01-10
react中state和props 遇到的问题
在React中希望使用一个组件获得props的属性，并遍历在li中错误代码：报错信息： data为undefine改正后的代码: 直接在render里获取props数据class InputList extends React.Component { constructor(props, context) { super(props, context); } render() { const data = this.props.todos; return ( <div> <ul > { data.map(f...
2024-01-10
React ie11不兼容 React Ant create-react-app创建
用create-react-app创建的项目不支持ie1、首先npm install react-app-polyfill --save2、入口文件 index.js 顶部添加，一定是顶部 import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';import React from 'react';import ReactDOM from 'react-dom';import App from './App';import '....
2024-01-10
