create-react-app安装出错问题解决
在用create-react-app的时候报错错误如下图：在SF上查到说是或许是因为国内npm拉去资源，拉去不到的问题，可以试着从解决创建create-react-app慢的方法着手：解决方法：//换源npm config set registry https://registry.npm.taobao.org//配置后通过以下方法验证是否成功npm config get registry设置成功后，再次执行create-rea...
2024-01-10
用create-react-app搭建react项目
1、先安装node,js2、node -v3、npm -v4、npm install -g create-react-app 然后查看create-react-app版本5、create-react-app mynews 给react应用命名，你可以取另外一个名字，然后出现success就是成功了！6、然后cd mynews 并且npm start 可以在http://localhost:3000/看到效果npm start 是启动应用npm test 是运行所有测试npm run buil...
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
使用react脚手架create-react-app遇到的问题
1.使用 npm install -g create-react-app 时，页面报错：如下：此时查看错误日志：大概意思猜测是npm的问题 就把命令改成cnpm install -g create-react-app，此时第一步可以顺利执行2. 输入create-react-app my-app，创建名为my-app的项目，如下图：又报之前的错了，原因是因为这个命令执行的时候，会安装一些包，但...
2024-01-10
ReactJs基于create-react-app打包根路径问题
build后终端显示结果The project was built assuming it is hosted at ./.You can control this with the homepage field in your package.json.根据终端显示可以知道我们可以通过package.json的homepage节点来控制访问路径即：在项目的package.json文件中增加一个节点“homepage”:"."，或者是"./"，当然，此功能是在react-scripts 0.9.0或者更高版...
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
官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍。1. React 快速上手脚手架 create-react-app为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。当然，如果你需要 React Native 的脚手架项目，可以查看这里：create-react-native-app...
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中props和state
props是子组件用来接收父组件的数据 父组件如果传十个参数 但是子组件用了9个 就会导致子组件中满屏都是this.props 就很难去区分各个参数的作用 所以我们将需要用的数据 放入constructor中进行提前说明 代码如下我们还需要跟子组件自身的数据有所区分才行(函数中参数和自己定义的内容) 可...
2024-01-10
webstorm+react+webpack-demo
准备：安装好webstorm和nodejs一、开始：1、新建一个demo04文件夹为项目根目录，下面2个子文件夹分别是src和publica:public目录下一个index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webstorm+react+webpack</title></head><body> <div id="app"></div> <script src="bundle...
2024-01-10
react数据之dispatch,reducer
1.之前写了一篇fetch的简单用法，实际项目中数据比那个要复杂，下面看一下通过dispatch和reducer来控制数据的更新；2.还是以上一个添加分组的组件为例：首先我们写一个MoveGroupReducer.js文件，里面我们模拟一个数据，并且写一个方法点击选中的方法；2.最上面引用的defination文件如下：3.在fetchData文件...
2024-01-10
react-native-echarts打包的时候报错问题解决
react-native-echarts是通过 WebView 在移动端使用 Echarts 前端数据可视化库，很强大，https://github.com/somonus/react-native-echarts一个月以前做的时候，发现这个库作者不维护了，，于是用的别的库，react-native-secharts,victory-native,react-native-chart-kit 等，但这些库有些问题，react-native-secharts 打包出现资源重复问题，不...
2024-01-10
react-1 react需要的环境配置
一、nodeJs简介和安装 1、 官网 https://nodejs.org/en/ NPM https://www.npmjs.com/ 2、检查安装成功的命令 node -v npm -v二、使用npm配置react开发环境http://reactjs.cn/react/docs/package-management.html1、新建一个文件夹 如：newfiles2、cd newfiles3、npm init4、npm install --save rea...
2024-01-10
单页面应用的 打包部署（vue-cli、creat-react-app ）
Vue的打包部署1、一般打包 ：直接 npm run build。（webpack的文件，根据不同的命令，执行不同的代码的） 注：这种打包的静态文件，只能放在web服务器中的根目录下才能运行。2、在服务器中 非根目录下 运行的 打包：需要配置 参考：https://segmentfault.com/a/11900000145616443、在本地文件系统中打开，不...
2024-01-10
【巷子】---react-redux---【react】
一、Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件，connect的意思就是将两种组件连起来 参考文章：https://github.com/reduxjs/react-redux 二、react-redux的基本用法(1)、引入import {Provider} from "react-redux"; 在根...
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中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
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
React使用高德地图的实现示例(react-amap)
pc版React重构，使用到了高德地图。搜了资料，发现有一个针对React进行封装的地图插件react-amap。官方网址：https://elemefe.github.io/react-amap/components/map，有兴趣的可以看下里面的API。react-amap 安装1、使用npm进行安装，目前是1.2.8版本：cnpm i react-amap2、直接使用sdn方式引入<script src="https://unpkg.com/react-a...
2024-01-10
