最近公司在做一个自己内部的图片上传系统，目的是帮助设计人员方便上传图片，用的是vue技术，但是说到vue，可能要提到更早出来的react，react是facebook搞的一套语法糖，也是革命性的用组件开发前端页面，采用jsx语法，组件化开发，然后库会进行解析转化成浏览器识别的语言，因为很热，用的人很多，于是我自己也做了个仿豆瓣的单页应用。

　　es6语法+webpack构建，webpack最大的好处就是可以将前端资源模块化打包处理，还能支持本地服务器热加载等实用功能，也有很多插件，特别方便。

　　我这个demo中，webpack用了两个文件，一个用于开发阶段，一个用于生产阶段，区别主要是生产阶段会对js，css压缩，加上了版权声明等插件，还有其他很多插件，如果实际用得上的话可以自己找到玩玩。

　　es6考虑到兼容性问题，可以用babel解析转换成es5，单页应用主要用了react的路由模块，可以百度搜react路由，推荐阮一峰的文章，照着整个敲一遍就差不多了。

　　代码我打包了，想看效果的话直接下载下来安装好依赖包后直接npm run watch 启动webpack服务器查看效果

　　因为不能上传附件，附上github吧： GitHub Source

　　先看看效果图吧：

react仿豆瓣的更多相关文章

  1. 微信小程序实例--仿豆瓣电影

    最近不想写论文,就想捣鼓点新东西吧,就边看官方文档,花了3天时间写了一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程吧. 源码&效果图 源码点击这里,欢迎star 运行方法: 下载微信we ...

  2. 仿豆瓣首页弹性滑动控件｜Axlchen's blog

    逛豆瓣的时候看到了这样的控件,觉得挺有趣,遂模仿之 先看看原版的效果 再看看模仿的效果 分析 控件结构分析 由于*ScrollView只能有一个child view,所以整个child view的结构 ...

  3. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  4. 边做边学入门微信小程序之仿豆瓣评分

    微信小程序由于适用性强.逻辑简要.开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用场景的较佳承载方式,诸如电影购票.外卖点餐.移动商城.生活服务等场景服务提供商迅速切入 ...

  5. 仿豆瓣网（电脑版网页）HTML+CSS实现

    步骤一:将豆瓣电脑版网页以图片形式保存下来: 利用了chrome里面的插件: 步骤二:将图片放置到PS中,研究布局: 我将其分为header部分,banner部分,section部分,footer部分 ...

  6. 微信小程序开发日记——高仿知乎日报（下）

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  7. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  8. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  9. React Native开源项目案例

    (六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...

随机推荐

  1. BCB如何编写,调用动态链接库DLL

    一 编写动态链接库DLL DLL简称动态链接库,是Windows中程序的重要组成部分.想象一下,一个程序需要多人共同完成开发,怎么个共同法?这时我们就要考虑把程序分为好几个模块,团队每一个成员开发一个 ...

  2. vuex基础知识总结

    项目中要求添加vuex,根据学习我这个小白总结了一点自己的心得,供大家参考 在学习之前,要知道两件事 为什么要用vuex?vuex要什么场景下应用? 简单点解释一下 1.项目中应用了vue脚手架之后, ...

  3. JS里面function和Function的区别

    js里Function 与 function的不一样的,不仅仅是大小写的问题. 简单点说:大写的Function是一个类 ,而小写的function是一个对象. Function是一个构造器,func ...

  4. OpenCASCADE点向直线投影

    OpenCASCADE点向直线投影 eryar@163.com 在GeomLib_Tool类中提供了计算指定点在曲线.曲面上的参数,这个算法具有通用性,即对任意曲线.曲面来反求点的参数. 本文主要结合 ...

  5. 模板——tarjan求割点

    在一个无向图中,如果有一个顶点集合,删除这个顶点集合以及这个集合中所有顶点相关联的边以后,图的连通分量增多,就称这个点集为割点集合. 注意求割点中的low定义: 割点中low[u]记录节点u或u的子树 ...

  6. sip会话流程以及sip介绍（2）

    下面我们通过一个简单的场景例子来简单介绍一下 SIP 会话流程. Tom 和 Jerry 是非常好的伙伴,Tom 在他的 PC 上使用一个 SIP 的应用程序呼叫 Internet 上另一个 SIP ...

  7. 03jQuery对象初识（二）筛选器2

    1.下面的筛选都是非常常用的 <ul> <li id="l0">l0</li> <li>l1</li> <li&g ...

  8. <每日一题>题目29：五个数字能组成多少互不重复的四位数

    #有五个数字:1.2.3.4.5,能组成多少个互不相同且无重复数字的四位数?各是多少? e =[] for a in range(1,6): for b in range(1,6): for c in ...

  9. 周期串Uva455 P37 3-4

    A character string is said to have period k if it can be formed by concatenating one or more repetit ...

  10. 模板：ST表

    ST表:解决RMQ类问题,预处理$O(nlog_{2}n)$,查询$O(1)$ 较线段树来说每次查询为1,线段树为log,但ST表不方便更改 ST表还用了倍增思想. 模板: struct ST_MAP ...