React Select组件
摘要：官网： 1）http://jedwatson.github.io/react-select/ 2）https://github.com/JedWatson/react-select 3）https://www.npmjs.com/package/react-select demo结构： packag
阅读全文
posted @ 2020-01-22 11:32
随笔分类 - React
作图组件react-plotly.js和数据统计组件simple-statistics
摘要：simple-statistics官网：https://simplestatistics.org/docs/#median demo结构： package.json { "name": "react-blank", "version": "0.1.0", "private": true, "depe
阅读全文
posted @ 2020-01-21 18:03
响应式布局，利用@media screen实现网页布局的自适应
摘要：#root { font-family: 'Microsoft YaHei'; } .app-container { background-color: #e7ebf0; height: 850px; } .app-head-bg { background-color: #5682a3; heigh
阅读全文
posted @ 2020-01-06 17:40
Echarts的自定义markPoint的标记类型
摘要：1、参考官网 自定义markPoint的标记类型：使用图示的矢量图来定义markPoint的标记类型 2、Iconfont-阿里巴巴矢量图标库 网址：https://www.iconfont.cn/search/index， 例如搜索up找到需要的图下载 下载的结果： <svg t="1577967
阅读全文
posted @ 2020-01-02 20:25
react-redux
摘要：目录： 1、一个demo，纯react实现 2、引入redux的实现 3、引入redux + react-redux 1、一个demo，纯react实现 <--返回目录 效果： 项目结构： index.js import React from 'react' import ReactDOM from
阅读全文
posted @ 2019-12-16 01:08
React-router的使用：标签跳转和编程式跳转
摘要：目录： 1、demo：NavLink 标签跳转 2、标签渲染路由组件时，获取url参数 3、编程式跳转 参考文档 1）https://reacttraining.com/react-router/web/guides/quick-start 2）http://react-guide.github.i
阅读全文
posted @ 2019-12-14 11:30
React组件间通信-sub/pub机制
摘要：React生命周期第二个demo演示了兄弟组件的通信，需要通过父组件，比较麻烦；下面介绍sub/pub机制来事项组件间通信。 项目结构： 1、导包 npm i pubsub-js 2、UserSearch.jsx import React from 'react' import PubSub fro
阅读全文
posted @ 2019-12-13 15:15
React生命周期, 兄弟组件之间通信
摘要：1、一个demo（https://www.reactjscn.com/docs/state-and-lifecycle.html） class Clock extends React.Component { constructor(props) { super(props); this.state
阅读全文
posted @ 2019-12-13 12:13
React组件式编程Demo-用户的增删改查
摘要：1、项目结构 项目是基于webpack4, 参考 创建基本的webpack4.x项目 2、页面效果 初始化效果 添加功能 通过id删除 更新功能 3、代码 package.json { "name": "react-helloworld", "version": "1.0.0", "descript
阅读全文
posted @ 2019-12-13 11:21
React之this.refs, 实现数据双向绑定
摘要：1、实现数据双向绑定 将input组件与this.state属性绑定，要么是readonly, 要么使用onChange事件； 获取input元素的value值，有两种方式： 1） e.target.value 2) this.refs.引用名称 import React from 'react'
阅读全文
posted @ 2019-12-11 14:50
React事件，修改this.state的值
摘要：1、React中绑定事件 React中绑定事件格式： onClick = { function } React中绑定事件的标准用法： import React from 'react' export default class Hello5 extends React.Component { con
阅读全文
posted @ 2019-12-11 00:20
React组件(组件属性this.state和this.props,css样式修饰组件)
摘要：目录： 1、创建组件的第一种方式 function2、将组件抽离为单独的jsx文件3、省略.jsx后缀， 配置webpack设置根目录4、创建组件的第二种方式--使用class关键字创建组件5、组件私有数据this.state(一般使用ajax获取的数据)6、有状态组件和无状态组件7、在组件中使用s
阅读全文
posted @ 2019-12-08 22:44
React使用JSX语法
摘要：目录： 1、在React项目中启用JSX语法 2、在JSX中写js代码 3、使用JSX注意事项 1、在React项目中启用JSX语法 <--返回目录 JSX语法：符合xml规范的js语法 JSX语法的本质：在运行时，转换成React.createElement形式来执行 第一步：安装babel插件:
阅读全文
posted @ 2019-12-05 23:56
react-helloword
摘要：1、在webpack项目中使用react 创建webpack项目步骤见： 创建基本的webpack4.x项目 webpack-dev-server 和 html-webpack-plugin的使用 1）运行cnpm i react react-dom -S安装包 react: 创建组件和虚拟DOM，
阅读全文
posted @ 2019-12-05 01:04
webpack-dev-server 和 html-webpack-plugin的使用
摘要：webpack-dev-server的作用：自动编译 1、webpack-dev-server的使用 1）cnpm i webpack-dev-server -D 2）在package.json中配置： 3）终端中输入命令：npm run dev 4）浏览器访问http://localhost:80
阅读全文
posted @ 2019-12-04 23:01
创建基本的webpack4.x项目
摘要：1、步骤 1）运行npm init -y 快速初始化项目 2）在项目根目录创建src源代码目录和dist产品目录，目录结构 webpack4.x-base |dist |src |index.html |index.js 3）安装webpack: cnpm i webpack webpack-cli
阅读全文
posted @ 2019-12-04 22:09
