最近公司在做一个自己内部的图片上传系统，目的是帮助设计人员方便上传图片，用的是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. duilib教程之duilib入门简明教程4.响应按钮事件

    上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI;    也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍下,CC ...

  2. hession RMI 远程调用

    /** * * @author administror * 在java中,需要去extends 继承java.rmi.Remote 接口,才能称为在于服务器流的远程对象. * 各客服端调用 * */p ...

  3. 转-Pycharm中运行Python代码的几种方式

    转自:Pycharm中运行Python代码的几种方式 在pycharm中的Python代码运行会出现各种奇葩的问题,比如,密码输入时不显示或没有提示,给我们带来一些麻烦,下面介绍几种代码运行的几种方式 ...

  4. python 排序算法总结及实例详解

    python 排序算法总结及实例详解 这篇文章主要介绍了python排序算法总结及实例详解的相关资料,需要的朋友可以参考下 总结了一下常见集中排序的算法 排序算法总结及实例详解"> 归 ...

  5. [编织消息框架][netty源码分析]5 EventLoopGroup 实现类NioEventLoopGroup职责与实现

    分析NioEventLoopGroup最主有两个疑问 1.next work如何分配NioEventLoop 2.boss group 与child group 是如何协作运行的 从EventLoop ...

  6. Ajax 导出Excel 方式

    1.使用iframe 加载 使用get方式 <iframe id="comdownshow" height="0" width="0" ...

  7. leyou_01_自定义异常处理器

    1.自定义异常处理器,当程序发生异常时可以我们可以自己定义返回的,状态码和状态信息 2.当异常发生时调用我们的自定义异常 @RestController @RequestMapping("i ...

  8. Maven实战05_背景案例学Maven模块化

    1:简单的账户注册服务 注册互联网账户是日常生活中再熟悉不过的一件事,作为一个用户,注册账户的时候需要进行以下操作,提供以下信息. 提供一个未被使用的帐号ID 提供一个未被使用的email地址. 提供 ...

  9. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

  10. hadoop2.2 window下报错的问题（winutils.exe）

    在windows下开发hadoop一直正常,但把hadoop集群升级到2.0版本以上,在eclipse下执行程序会报打不到winutils.exe的错误,这是因为hadoop2.2没有发布winuti ...