create-react-app使用的问题
// 设置npm config set registry https://registry.npm.taobao.org// 验证是否成功npm config get registry或npm info express...
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创建，ie11不兼容
问题描述按照官方文档使用yarn create react-app centre-app 创建工程使用yarn start, chrome浏览器可正常访问以下为packge.json配置文件但在ie11下报如下图错误经过百度、必应、google一通后，发现并没有[email protected]版本的解决方案，最后在github官方issues中找到解决方案，记录分享下。1. yarn add react-app-poly...
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
1-1、create-react-app 配置 mobx
1、用npx create-react-app my-app安装项目2、cd my-app3、执行 npm run eject 让配置文件可见4、npm install --saveDev babel-plugin-transform-decorators-legacy 安装es6装饰器函数解析器插件，因为项目自身不带5、打开 package.json "babel": { "plugins": [ "transform-decorators-legacy" ], "presets":...
2024-01-10
cerate-react-app脚手架使用css模块化功能
cerate-react-app脚手架使用css模块化功能css模块化引发问题如何解决css模块化一开始使用creat-reat-app projectName 创建的项目没有使用css模块化功能,便第一时间去找百度按照文中修改设置,确实是可以使用css-module功能了,但是随后发现这样是有问题的.引发问题这么做实现了css模块化,但同时也无法再使用...
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项目
你所知道的一些事情，你可能不知道的一些事情Create React App是搭建React项目的快速方法。这样我们可以重点放在代码上，而不是构建工具上。事实1：可以使用单个命令创建完整项目这个神奇的命令可以通过以下三种方式之一调用：npx create-react-app my-appnpm init react-app my-appyarn create react-app my-a...
2024-01-10
React-关于react的思考
声明式开发 减少dom操作，减少代码量可以与其他框架并存组件化开发单向数据流视图层框架 大型项目需要与其他数据层框架一起使用函数式编程 方便自动化测试...
2024-01-10
react-native-image-picker环境配置及使用
安装插件。npm install [email protected] --savelinkreact-native link react-native-image-pickerandroid环境配置在Android Studio打开对应项目，进行如下操作1.添加权限在/android/app/src/main/AndroidManifest.xml文件中添加<uses-permission android:name="android.permission.CAMERA" /><uses-permission...
2024-01-10
通过cross-env改变create-react-app默认启动端口号
装包：yarn add cross-env 配置："start": "cross-env PORT=3030 node scripts/start.js",...
2024-01-10
React中props和state
props是子组件用来接收父组件的数据 父组件如果传十个参数 但是子组件用了9个 就会导致子组件中满屏都是this.props 就很难去区分各个参数的作用 所以我们将需要用的数据 放入constructor中进行提前说明 代码如下我们还需要跟子组件自身的数据有所区分才行(函数中参数和自己定义的内容) 可...
2024-01-10
react反向代理使用http-proxy-middleware
一简介http-proxy-middleware用于后台将请求转发给其它服务器。二 安装1 $ npm install --save-dev http-proxy-middleware三 使用在src同级目录创建setupProxy.js如图所示const { createProxyMiddleware } = require('http-proxy-middleware'); //注意写法，这是1.0以后的版本，最好按抄module.exports = function (app) { app.u...
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
使用Facebook的create-react-app快速构建React开发环境
笔者最近打算基于半年来的实践与React社区的发展重制下笔者的React系列教程，前端实战文章——React系列。本文从属于Web 前端入门与最佳实践。create-react-app:来自Facebook官方的零配置命令行工具create-react-app是来自于Facebook出品的零配置命令行工具，能够帮你自动创建基于Webpack+ES6的最简易的React项目模...
2024-01-10
使用react-app-rewired和customize-cra自定义项目配置
creat-react-app 初始化项目后，我们对项目的启动是通过 react-scripts 实现的，项目开发过程中，如果需要引入对less 支持，和高阶组件对装饰器的使用，我们需要在webpack 中添加对此功能的支持，我们需要custom-cra 这个包，https://www.npmjs.com/package/customize-cra#documentation 看官方介绍，意思就是这个包扩展了c...
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】react&&redux调试工具
1、安装 react-developer-tools，在chrome应用商店进行下载，因为网络限制原因，我们可以使用火狐浏览器进行安装下载 a、打开火狐浏览器的附加组件 b、搜索react-developer-tools进行安装React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检...
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学习一】首先先create-react-app 配置less、sass
1.安装初始化npm create-react-app react-demo2.安装初始化npm run eject3.配置sass / lesscnpm i sass-loader node-sass -d代码片段1： exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /.scss$/], 代码片段2： { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-...
2024-01-10
reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiperdemo地址：http://reactjs-ui.github.io/reactjs-swiper/simple.html1. 下载安装npm install reactjs-swiper 2.使用import React, {Component} from 'react';import {render} from 'react-dom';import ReactSwiper from 'reactjs-swiper';import './sass/example.scs...
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
react篇章-React 组件-向组件传递参数
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>菜鸟教程 React 实例</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></...
2024-01-10
