公司内做了一次react分享,PPT下载地址:http://yuerblog.cc/wp-content/uploads/2016/12/react-share-win.pptx,供大家参考。
标签归档:react
基于react实现无限分级菜单
在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起。
本文纯粹为了练习一下react,因此我会在react环境下实现这么一个小组件:它假设了菜单数据来自于网络请求,并且仅实现无限分级菜单的核心功能(父子关系,展开与收起),至于样式则不是关注的重点。 继续阅读
webpack之babel插件困惑解疑
此前,我在react项目中使用了es6语法,例如:class关键字。然而nodejs本身是不支持es6语法的,更重要的是落后的浏览器也不支持es6语法,为了能够让它们理解es6语法,我们使用了babel插件来将es6转义为es5语法。 继续阅读
webpack react 文件压缩优化
这两天,将之前练习的项目整理的同时,把之前遗留了一些组件未实现的逻辑实现了。例如:loading失败点击重试的逻辑。
在打包生产环境代码的时候,发现2个问题还比较重要,在这里记录一下。 继续阅读
梳理react项目结构
为了方便后续开发,我将之前学习的代码重新整理的了目录结构,分为action,reducer,component,common,test。 继续阅读
react+redux,实现 广告自动轮播效果
广告轮播效果是一个很常见的APP特效,多个图片广告自动翻滚展示,同时也支持用户的手势滑动。
我实现这个特效,一方面是想锻炼react/redux程序的设计思路,更重要的是会接触到css动画,这个前端技术我从未接触。 继续阅读
[React-章节11 终结篇] 做一个留言板项目 之 重构至redux
思考
最近我也一直在研究redux到底是干什么的,经过零零散散的学习之后,我有这么几个不算成熟的认识分享给大家: 继续阅读
[React-章节10 实践篇] 做一个留言板项目 之 实现后退不刷新效果
接上篇《[React-章节9 实践篇] 做一个留言板项目 之 实现Loading特效》。
背景
react在切换组件时,前一个组件会经历完整的组件销毁过程,后一个组件会经历完整的组件加载过程,具体可以回顾react的生命周期。
因为这个原因,当我从详情页返回到列表页的时候会发现列表页重新渲染回到了初始的状态,并不是一个合理的用户体验。这个问题只有单页应用会面临,因为对于多标签页的应用来说,每个标签页的内容互不影响。 继续阅读
[React-章节9 实践篇] 做一个留言板项目 之 实现Loading特效
接上篇《[React-章节8 实践篇] 做一个留言板项目 之 留言列表页》。
一般h5应用在页面加载完成之前都会有一个loading加载的动画效果,一旦完成加载一次性展现完整的内容给用户,这样更贴合native应用的体验,我相信没有用户喜欢看着一个残缺的页面等待网络数据下载完成。 继续阅读
[React-章节8 实践篇] 做一个留言板项目 之 留言列表页
继上一篇《[React-章节7 实践篇] 做一个留言板项目 之 留言详情页》之后,经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能。 继续阅读
[React-章节7 实践篇] 做一个留言板项目 之 留言详情页
本篇接《[React-章节6 实践篇] 做一个留言板项目 之 规划》。
我从最简单的留言详情页开始编写,页面包含一个工具栏,一个标题,一个正文。 继续阅读
[React-章节6 实践篇] 做一个留言板项目 之 规划
前提
做这个项目之前,至少需要掌握1-5章节的内容,否则跨度太大。本篇将编写单页应用,实现:查看留言列表,留言详情,发表留言 一共3个功能,大概会涉及到5-6个组件。 继续阅读
[React-章节5]学习react-router,实现单页应用demo
接上篇《webpack的代码分割与公共代码提取》,本篇终于要学习如何编写单页面应用了。在多页面应用中,超链接<a>会跳转到另外一个html中,而单页面应用中,超链接<a>不会发生html页面跳转,而是触发在当前页面中渲染不同的组件,这是最直观的差别。
基于webpack+react实现单页应用,需要用到react-router插件,下面就开始学习吧! 继续阅读
[React-章节4]webpack的代码分割与公共代码提取
接着上篇《如何为react导入css和img?》 来说,对于一个多页面应用来说,webpack会把每个entry独立编译成chunk,也就是生成一对js和css文件。如果2个chunk代码都引用了同样的库(例如jquery),那么jquery代码会被分别打包进入2个chunk中,导致js文件尺寸增加,是一个不必要的冗余。 继续阅读
[React-章节3]如何为react导入css和img?
接着上一篇 《[备忘录] 记录一下学习react中遇到的知识点》,这次我要将css和img引入到我的站点,下面看看具体怎么做吧。 继续阅读
[React-章节2]记录一下学习react中遇到的知识点
接着上一篇《如何一脸懵逼的学习webpack,react?》,我继续学习了github中的react部分的所有例子。
因为不太懂nodejs和es6之类的,所以零零散散记了一下我觉得还算陌生的知识点,以备后续可以回来速查一下。 继续阅读
[React-章节1]如何一脸懵逼的学习webpack,react?
前言
当看到前端同事熟练使用webpack,react,es6….一堆概念的时候,我是完全懵圈的! 继续阅读