项目常用eslint配置（Vue/React/TypeScript）
项目常用eslint配置（Vue/React/TypeScript）
记录一下常用的eslint配置。
Vue项目常用eslint配置
需要安装依赖（Vue这里使用standard扩展和vue插件，所以需要安装)
{
"devDependencies": {
"babel-eslint": "^10.0.2",
"eslint": "^6.1.0",
"eslint-config-imperative-es6": "^2.1.0",
...
React 路由基本配置
app.js
/*
react路由的配置：
1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
2、安装 cnpm install react-router-dom --save
3、找到项目的根组件引入react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4、复制 ...
React网络请求
/*
react获取服务器APi接口的数据：
react中没有提供专门的请求数据的模块。但是可以使用任何第三方请求数据模块实现请求数据
1、axios https://github.com/axios/axios axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域）
1、安装axios模块npm install axios ...
react-router-dom v5.1.2 版本 实现嵌套路由
找了好久都没有找到最新版的中文文档 v5.1.2。。。
入口文件 src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppRoute from './AppRoute';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<AppRoute />, document.getElementById('root' ...
React组件库AntDesign的安装与使用
对使用React框架开发的项目来说，选择一款适合自己的UI库极为重要，antd就是一个不错的选择。antd是基于Ant Design设计体系的React UI组件库，主要用于企业级中后台产品。 是一款开箱即用的高质量React组件库。支持目前几乎所有的浏览器（支持IE11及以上），而且还支持Electron桌面程序开发。
Antd官网：https://ant.design ...
React-router5.x使用总结
在 React router 中通常使用的组件有三种：
路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式）
路径匹配组件: Route 和 Switch
导航组件: Link 和 NavLink
关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<BrowserRouter>组件; 如果使用静态文件服务器，建议使用<HashRoute ...
Webpack搭建React开发环境详细步骤
1.安装node.js
Webpack实际是用Node.js写的，所以要先安装Node.js环境。而且Node.js中集成了NPM包管理，我们在后面用到的很多模块都需要使用NPM下载。
首先进入Node.js的官网：https://nodejs.org/zh-cn/download/，选择对应系统下载安装包，对于 windows 用户，直接下载安装包安装即可，如果是 Macos 用户，推荐使 ...
详解React组件通信（父传子、子传父、兄弟组件传值）
1、父组件传值子组件
React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图：
在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。
父组件向子组件传值，通过props，将父组件的state传递给了子组件。
父组件代码片段：
constructor(props){
super(pr ...
完整electron+react项目框架搭建
electron初始项目搭建案例github；可用作初始化项目
1、环境搭建
//初始化项目xxx
npx create-react-app xxx
//安装electron
npm install electron --save-dev
创建main.js
const {app,BrowserWindow} = require('electro ...
React网络请求fetch之post请求
本节介绍下React下fetch的post请求
（1）编写服务端代码
/*加载express模块*/
var express = require('express')
/*加载path路径处理核心模块*/
var path = require('path')
/*加载body-parser中间件*/
var bodyParser = require('body-parser')
/*创建app应用 => 类似于Node.js原始的http.createServer()*/
var app = exp ...
react引入ggEditor流程图
遇到的问题
1.propsAPI获取不到内容：withPropsAPI包裹的组件必须是GGEditor的子组件。
2.自定义组件如何使用：正确的办法是通过config配置，参照上面的代码（之前我在在内部RegisterCommand以后，在onAfterExecuteCommand中截获命令，通过函数控制图例操作。这中间需要下钻到内部组件调用propsAPI，我就通过setState去设置 ...
React 中使用富文本编辑器 Braft Editor ，并集成上传图片功能
Braft Editor 是基于draft-js开发的富文本编辑器，适用于 React 框架。
1. 安装
使用npm
npm install braft-editor --save
使用yarn
yarn add braft-editor
2. 基本使用
import React, { Component } from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
export default class M ...
React函数式组件使用Ref
目录：
简介
useRef
forwardRef
useImperativeHandle
回调Ref
简介
大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象，进而对子组件进行修改，是一个很方便的特性。在传统类组件中，我们通过使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素来使用。而随着hooks的越来越广泛的使用， ...
React创建组件两种写法：React.createClass和extends Component的区别
前言：
createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这 ...
React源码解析之React.Children.map()(五)
一，React.Children是什么？
是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具，是顶层的api之一
React.children的用处：https://www.cnblogs.com/sunxiaopei/p/13805645.html
二，React.Children.map的结构及举例
结构：React.C ...
React的React.createContext()源码解析(四)
一.产生context原因
从父组件直接传值到孙子组件，而不必一层一层的通过props进行传值，相比较以前的那种传值更加的方便、简介。
二.context的实现方式
新版本(React16.x后)
//创建两个组件 Provider,Consumer
//let {Provider,Consumer}=React.createContext(defaultValue); //defaultValue可以设置共享的默认数据 当Prov ...
react遍历列表
遍历列表,遍历对象,以及组件
1.遍历列表(map和forEach的区别)
return后面不能为空格，回车，否则就是报错,如果非要换行，，在return后面加一个小括号,变成了一个表达式(自执行函数)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv ...
django+react
后端：
>>> pip install Django==1.11 >>> sudo pip install django-webpack-loader Successfully installed django-webpack-loader-0.6.0 >>> python -m django --version 1.11.11 需要解决跨域问题， 前端才能访问前端： node和npm安装， 包下载： http: ...
TS + React
项目结构
因为目前项目是没有做前后分离的打算的（一个内部工具平台类的项目），所以大致结构就是基于上次Node项目的结构，在其之上添加了一些FrontEnd的目录结构：
.
├── README.md
├── copy-static-assets.ts
├── nodemon.json
├── package.json
+ ├── client-dist
+ │ ├── bun ...
在React中使用react-router-dom路由
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。
安装
首先进入项目目录，使用npm安装react-router-dom：
npm install react-router-dom --save-dev //这里可以使 ...
