react
学习react,记录点点滴滴!
江湖行骗老中医
相信自己!
展开
-
react脚手架配置代理总结
方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明: 优点:配置简单,前端请求资源时可以不加任何前缀。 缺点:不能配置多个代理。 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源) 方法二 第一步:创建代理配置文件 在src下创建配置文件:src/setupProxy.js 编写setupProxy.js配置原创 2021-11-08 17:44:48 · 70 阅读 · 0 评论 -
React学习笔记
JSX语法规则1.定义虚拟DOM时,不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class,要用className。4.内联样式,要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母 (1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。 (2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。【js语句(代码...原创 2021-11-05 19:05:02 · 144 阅读 · 0 评论 -
react 组件的构造函数
constructor 函数时组件最先执行的函数class childen extends react.Component{ constructor(props){ super(props); this.state={ attr1:"", } }}一般在constructor函数中都会存在 上述方法,个人对其的理解constructor():子类继承父类时的构造方法,主要时用以定义this.属性 在react中一些..原创 2020-08-31 10:32:56 · 1537 阅读 · 0 评论 -
react-webpack配置
'use strict';const autoprefixer = require('autoprefixer');const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack.原创 2020-08-31 10:04:49 · 717 阅读 · 0 评论 -
React 构造函数的主要目的是什么?
构造函数主要用于两个目的, 通过将对象分配给this.state来初始化本地状态 将事件处理程序方法绑定到实例上例如,以下代码涵盖了以上两种情况constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}constructor()是ES6写法.转载 2020-08-30 23:42:46 · 823 阅读 · 0 评论 -
React代码开发规范
前言一般在团队开发中每个人的代码习惯都不太一样,这样就会导致代码风格不一致,以致于维护和修改bug的时候看别人的代码成为一种痛苦...这种情况尤其在前端开发中尤为明显。因为关于前端的开发规范貌似也没有行业权威标准。这几天在网上看了下,基本上在开发中通过eslint进行约束,airbnb的标准貌似颇为推崇,今天稍微整理下,准备在日后开发中形成习惯。基本规则每个文件只包含一个React组件。eslint: react/no-multi-comp;(官方表示在无状态,或者Pure组件允许一个文件包含原创 2020-08-30 17:40:16 · 466 阅读 · 0 评论 -
npm和yarn的对比
原创 2020-08-30 16:23:04 · 158 阅读 · 0 评论 -
react开发vscode插件推荐
由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发。1. 代码提示类插件1.1Reactjs code snippets1.2React Redux ES6 Snippets1.3React-Native/React/Redux snippets for es6/es71.4JavaScript (ES6) code snippet...转载 2020-08-29 18:47:06 · 3842 阅读 · 0 评论 -
React生命周期流程图及简述
1.概览React 16:页面初始化:constructor–>componentWillMount–>render–>componentDidMount 父级数据更新:componentWillReceiveProps–>shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate 组件数据更新:shouldComponentUpdate–>componentWi原创 2020-08-29 17:45:25 · 320 阅读 · 0 评论 -
mock使用方法
安装 Mock.js为了模拟后台接口提供页面需要的数据,我们引入 Mock.js 为我们提供模拟数据,而不用依赖于后台接口的完成。安装依赖执行如下命令,安装依赖包。yarn add mockjs --dev安装完成之后,我们写个例子测试一下。在 src 目录下新建一个 mock 目录,创建 mock.js,在里面我们模拟了两个接口,分别拦截用户和菜单的请求,并返回相应的数据。如下图所示:修改 Home.vue,在页面放置两个按钮,分别触发用户和菜单的处理请求,成功后弹出原创 2020-08-29 16:08:30 · 532 阅读 · 0 评论 -
搭建react开发环境的步骤
一:安装node可,以在官网或者中文网里面下载,根据自己的电脑选择是32还是64网址:http://nodejs.cn二:下载并安装好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号,这样就已经是安装成功了,由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具:npm install -g cnpm --registry=ht..原创 2020-08-29 11:38:13 · 245 阅读 · 0 评论