一、项目介绍next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目。实现了消息/表情发送、图片/视频预览、拖拽/粘贴图片发送、红包/朋友圈等功能。二、技术实现技术框架：next.js+react.js+redux+react-reduxUI组件库：Antd (蚂蚁金服pc端react组件库)字体图标：阿里iconfont图标库弹窗组件：RLayer（基于react.js封装自定义弹窗）虚拟滚动：RScroll（基于react.js自定义美化滚动条）...
春节临近，办公室里半片空位，半片浮嚣。想到将放假，屏幕上的代码也都变成了雀跃的小虫。无法专心了。终于还是强迫自己读了半篇文档，写了几坨程序。这次记录的是关于React，最浅显的内容。 ———— 我是望眼欲穿的分割线 ———— Step 1：npm init按照向导填写各个字段，最后生成package.json文件。容易出错的是：name的值不要和包包同名。比如我们后续需要使用npm安装几个包包：browserify react reactify ...则name值如果写作...
react项目快速搭建 1.安装node环境: 下载地址：https://nodejs.org/zh-cn/download/ 2.打开终端 3.安装yarn或者cnpm, 这里以cnpm 为例，输入命令行: npm install cnpm -g --registry=http://registry.npm.taobao.org 4.安装create-react-app，输入命令行： cnpm install -g create-react-app 说明：这里安装在全局中，安装一次就可以了。 5.创建react项目，输入命令行： create...
转帖: http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/?hmsr=toutiao.io&bsh_bid=928783684在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。什么是虚拟DOM？虚拟DOM VS 直接操作原生DOM？虚拟DOM VS MVVM？对React虚拟DOM的误解？一、什么是虚拟DOM？ 在React中，render执...
将脚手架(create-react-app)创建的todolist项目精简为hello world示例即，删除自动生成的样式文件、logo.svt、App.test.js、serviceWorker.js等文件，并精简App.js和index.js里的代码，结果如下：npm run start 后，浏览器界面仅显示纯文本 Hello world ! 一，虚拟DOM首先，看一段html片段<div id="container"><p>这里是p标签里的文本节点</p><ul><li class="item">这里是li标签里的文本节点</li><li class="item">这里是li标签里的...
GitHub：https://github.com/react-native-training/react-native-elementsAPI：https://react-native-training.github.io/react-native-elements/API/card/中文参考网站：http://www.jianshu.com/p/6a4be11be170 分享组件：react-native-share原文：http://www.cnblogs.com/nbhhcty66/p/7923003.html
今天看来情书写的文章，研究了一下大佬写的文章，自己做一点总结。其实，今天我想把我近期遇到的坑都总结一下：1.goBack的跨页面跳转，又两种方法，一可以像兔哥那样修改navigation源码，二可以用navigationActions 2.父子组件的传值，一可以用callBack 二可以用pubsub发布订阅模式 三可以用manager事件监听（a页面要显示的内容 有两种形式，一是从manager主动接收，也就是说不需要点击什么的获取数据，而是时时监听manager里...
1.环境搭建部分 官方文档0.44mac下搭建，使用homebrew安装东西，可先制定国内的镜像源http://ban.ninja/,具体操作步骤是终端输入vi ~/.bash_profile，若没有的话先创建该文件,在.bash_profile文件里粘贴export HOMEBREW_BOTTLE_DOMAIN=http://7xkcej.dl1.z0.glb.clouddn.com，然后保存退出（vi操作: 粘贴后control+c，然后输入:qw后回车），最后终端里输入source .bash_profile使其生效。可以brew install watchman看看是否OK。 ...
React使用Echarts报错Component series.line not exists. Load it first.（刚开始正常，后来页面刷不出来，一片空白） 解决import echarts from ‘echarts/lib/echarts‘;改为import echarts from ‘echarts‘; 原文：https://www.cnblogs.com/lin9966/p/13027188.html
最新整理的react模板2.0react模板2.0 地址戳这里整合了最新的webpack4，alloy-eslint约束, ant design v4.0.0react 16.12.0react-routerredux，redux-thunkhooks，typescriptantd v4，sass, less, dayjslodash，moment，uuid，js-cookiesuspense,lazy懒加载axios antd主题切换运行和打包$ npm i $ npm start $ npm run build-dev // 测试打包 $ npm run build-prod // 正式打包 $ npm run analyze // 分析打包 $ npm run lint // e...
问题在单页面应用中，我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果，为这么一个小功能引入第三方框架，实在有点小纠结。不如自己封装。思路原理以进入时opacity: 0 --> opacity: 1 ，退出时opacity: 0 --> opacity: 1为例元素挂载时挂载元素dom设置动画opacity: 0 --> opacity: 1元素卸载时设置动画opacity: 0 --> opacity: 1动画结束后卸载dom组件设计为了使得组件简单易用、低耦合，我们期望如下方式来调用组件：属...
class Toggle extends Component {static propTypes = {defaultOn: PropTypes.bool,on: PropTypes.bool,onToggle: PropTypes.func,children: PropTypes.oneOfType([PropTypes.func,PropTypes.array]).isRequired,}static defaultProps = {defaultOn: false,onToggle: () => {},} } 原文：http://www.cnblogs.com/Answer1215/p/7629853.html
componentWillMount, componentWillReceiveProps, componentWillUpdate 不安全： 在未来的React版本中有BUG，特别是允许异步渲染之后 16.3版本给三个周期添加UNSAFE_*标志。UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate16.9版本添加或者不添加前缀UNSAFE_*，都可以使用。但是如果使用不添加前缀UNSAFE_*的话，浏览器会发出警告17.0版本移除不添加UNSAFE_*前缀的生命周期，只能使用添...
生命周期是react中的重要部分，理解它有助于我们更合理的书写逻辑。组件的生命周期可分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOM生命周期的方法有：componentWillMount ：在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构。可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操...
参考：https://tylermcginnis.com/react-router-protected-routes-authentication/ 解决路由私有方法创建PrivateRoute.js文件import React from ‘react‘ import { Route, Redirect } from ‘react-router-dom‘ import { connect } from ‘react-redux‘ import PropTypes from ‘prop-types‘const PrivateRoute = ({ component: Component, auth, ...rest }) => (<Route{...rest}render={props => auth.isAuthenticated === tr...