react中使用截图组件Cropper组件
--最近项目用react，学习react并使用cropper组件裁剪图片。
（这里开发组件不够统一有用tsx(TypeScript + xml/html)写的组件，有用jsx(javascript+xml/html)写的组件
前言：cropper组件引入到项目中的手顺直接看官方文档；github:https://github.com/fengyuanchen/cropperjs#methods 在线演示url: https://fengy ...
React 拖动布局
安装组件react-grid-layout
yarn add react-grid-layout
引入拖动样式,不然没有拖动效果
import '../../../node_modules/react-grid-layout/css/styles.css'
import React from 'react'
import { IProps } from 'config/models'
import { Row, } from 'antd'
import _ from "lodash";
import GridLayout from " ...
聊一聊 React 中的 CSS 样式方案
和 Angular，Vue 不同，React 并没有如何在 React 中书写样式的官方方案，依靠的是社区众多的方案。社区中提供的方案有很多，例如 CSS Modules，styled-components，styles jsx 等等。
接下来会详细地说一下这几种方案，在说这几种方案之前，首先说一下 React 官方提供的构建工具 create-react-app 构建的项目中使用 css 的 ...
React 和 ReactDOM 的区别
如果你是 React 的初学者，一定会对 React 和 ReactDOM 感到迷惑。为什么要分成两个包呢？害得我还要引入两次，说好的减轻开发人员负担呢，这丫的在搞什么飞机。带着这个疑问，我们一起来康康 React 的“野心”。
ReactDOM独立的历史原因
React 在v0.14之前是没有 ReactDOM 的，所有功 ...
聊一聊React中虚拟DOM
1. 什么是虚拟 DOM
在 React 中实际上是 render 函数中return 的内容会生成 DOM，return 中的内容由两部分组成，一部分是 JSX ，另一部分就是 state 中的数据，所以简单来讲，在 React 中 JSX 结合 state 就生成了 DOM。
现在抛开虚拟 DOM 不谈，如果让我们去实现 React 中当数据发生变化时如何操作 DOM 来实现页面内容的变 ...
React TS 组件 Demo
无状态组件
例子：点击查看大图
import React, { MouseEvent, SFC } from 'react'
type Props = {
onClick(e: MouseEvent<HTMLElement>): void
src: string,
show: boolean,
}
const BigImage: SFC<rops> = ({ onClick, show, src }) => {
return show ? <div className="big-img-wrap" onClick={onClick}>
...
React hooks详解
此篇文章仅是对hooks入门的总结，老鸟略过吧~
React从16.8.X以后增加了一个新特性，react hooks 让我们看看这个新特性又带来了哪些惊喜呢~以下内容我们采取不同方式创建组件来进行对比总结
组件的创建方式：
用过react的都了解，传统react创建组件提供了两种方式，函数式与类（class）
class创建无状态组件
class App exte ...
项目常用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 用户，推荐使 ...
完整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的方式定义方法时务必谨记不要使用逗号隔开，这 ...
