最近公司在做一个自己内部的图片上传系统，目的是帮助设计人员方便上传图片，用的是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. centos7的变化（转）

    centos7的变化 找了一个下午都不知道为什么找不到一些命令,终于在一个地方看到了. 地址:http://www.sa-log.com/276.html 王, 帅 2015年09月24日 于 运维日 ...

  2. mysql联表查询，使用phpStudy自带的

    一.内联结.外联结.左联结.右联结的含义及区别在SQL标准中规划的(Join)联结大致分为下面四种:1.内联结:将两个表中存在联结关系的字段符合联结关系的那些记录形成记录集的联结.2.外联结:分为外左 ...

  3. VS2010-MFC（对话框：为对话框添加控件）

    转自:http://www.jizhuomi.com/software/151.html 上一讲创建了一个名为“Addition”的工程,目的是生成一个实现加法运算的应用程序.实现加法计算有几个必要的 ...

  4. VS2010-MFC（对话框：创建对话框模板和修改对话框属性）

    转自:http://www.jizhuomi.com/software/149.html 对话框,大家应该很熟悉了,在我们常用的软件中大多都有对话框界面,例如,360安全卫士的主界面其实就是个对话框, ...

  5. javaweb的几种开发模式

    1.MVC模式基础 1.1.MVC模式简介 MVC是一种架构型模式,它本身并不引入新的功能,只是用来指导我们改善应用程序的架构,使得应用的模型和视图相分离,从而达到更好的开发和维护效率.在MVC模式中 ...

  6. eclipse快捷大全

    Eclipse常用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速修正:Ctrl+1单词补全:Alt+/打开外部Java文档:Shift+F2 显示搜索 ...

  7. python生成word中文字体

    python生成word中文字体 我们今天用python生成word文件,主要是用到了PyRTF包生成rtf文件,由于PyRTF的包中文教程比较少,所以特此记录几篇文章,也希望给大家有一些帮助. 开始 ...

  8. windows环境下运行Elasticsearch

    1.Elasticsearch下载地址:https://github.com/medcl/elasticsearch-rtf 直接下载ZIP包: 2.配置JAVA环境 jdk64位地址:jdk-win ...

  9. 用DataTable填充实体类List

    /// <summary> /// 用DataTable填充实体类List /// </summary> public static List<T> FillLis ...

  10. [转]【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox

    反反复复考虑后,准备把这一章的切入点瞄准ListBox.并用了一个看起来有点别扭的标题“认识ListBox",许多人看到这里就不爱看了,即使是大学里用winform的学生也会说ListBox ...