最近公司在做一个自己内部的图片上传系统，目的是帮助设计人员方便上传图片，用的是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. angular管道操作符的使用

    一.Angular的常用内置管道函数 比如说很多时候我们需要把数字显示成金额.大小写转换.日期小数转换等等. Angular管道对于象这样小型的转换来说是个很方便的选择. 管道是一个简单的函数,它接受 ...

  2. UTF小记（一）

    前言 十六进制(简写为hex或下标16)在数学中是一种逢16进1的进位制.一般用数字0到9和字母A到F(或a~f)表示,其中:A~F表示10~15,这些称作十六进制数字. 不同电脑系统.编程语言对于1 ...

  3. HTML 项目符号

    无序符号 <ul> <li> </li> <li> </li> <li> </li> </ul> 属性 ...

  4. PAT甲级——A1003Emergency

    As an emergency rescue team leader of a city, you are given a special map of your country. The map s ...

  5. diskpart

    比如格式化成fat32 format fs=fat32 quick 比鼠标方便 如何使用: 打开cmd输入diskpart进入命令 首先 list disk 然后 然后 clean 然后 create ...

  6. 在ALV点击Key值调用TCode，跳过初始屏幕

    在开发ALV报表时,通常业务部门会要求在ALV中点击单据号,屏幕跳转到具体业务凭证中查看业务明细,效果如下图: 点击销售销售订单号或者交货单号可传入单据号直接打开销售订单或交货单,实现方式如下: 一. ...

  7. Liunx常用命令行（Ubuntu）

    关闭防火墙的命令行: 1. 永久性生效 开启:chkconfig iptables on 关闭:chkconfig iptables off 2. 即时生效,重启后失效 开启:service ipta ...

  8. 使用ResponseEntity进行返回json数据

    在最近的项目中,与上位机进行数据传输时,上位机需要服务器的响应得知服务器是否正常运行,数据是否正常发送 在最近的调试中我使用ResponseEntity<Map<String,Object ...

  9. COCI2014/2015 Contest#1 D MAFIJA【基环树最大独立点集】

    T1725 天黑请闭眼 Online Judge:COCI2014/2015 Contest#1 D MAFIJA(原题) Label:基环树,断环+树形Dp,贪心+拓扑 题目描述 最近天黑请闭眼在 ...

  10. Leetcode951. Flip Equivalent Binary Trees翻转等价二叉树

    我们可以为二叉树 T 定义一个翻转操作,如下所示:选择任意节点,然后交换它的左子树和右子树. 只要经过一定次数的翻转操作后,能使 X 等于 Y,我们就称二叉树 X 翻转等价于二叉树 Y. 编写一个判断 ...