Code Monkey home page Code Monkey logo

react_ele's Introduction

react_ele

没事逛技术社区的时候,经常看到许多仿照饿了么官网的项目,不过可能是因为饿了么本身就是使用 vue构建,所以大部分仿照项目也都是使用 vue架构,因为我本身倾向于 react,奔着打磨技术的目的去,所以就准备着使用 react仿写饿了么。

本来是想着把饿了么整个网站,包括前后端全部仿写一遍的,想法是这个想法,然而实际等自己真做起来的时候才知道什么叫想得太美,仿写一个网站和只写一个页面之间的差别不要太大

前端日新月异,几天就能出来一个新框架、概念、**,本人只算是个前端小菜鸟,要学习的东西太多,往往就是几天下来就感觉自己几天前的架构、代码等太烂,总想着要回头改一遍,再加上工作逐渐忙碌,工作之外的时间越来越少,而此项目纯粹就是下班之外的时间捣鼓一下,项目前前后后弄了两三个月,大体功能差不多都实现了,还有很多需要完善的地方,不过实在是没时间了,之前说好的后端也没时间做了。

限于入行时间太短,没做过多少项目,自己捣鼓一个项目没什么经验,随着自己水平的提升,做到最后自己很容易就能发现之前有的地方不太理想,前后代码的风格可能也会不一致,但也没时间改了,而且项目只是用来学习用的,在某些地方我可能想要尝试某种以前没有接触过的东西,所以可能还会故意弄得复杂,自然是比不上社区中众多大佬们贡献出来的代码,不过整个项目做下来,自己确实学到了很多,现在如果再让我重头写一个类似的项目,我肯定会做得更好,由此可见,亲自上手尝试确实是水平进步的最佳方法之一。

整个项目总体看起来不咋地,不过其中也有小部分**、代码等本人觉得尚可,说不定将来还要从这里 copy 自己的一些代码呢。


运行

因为我刚开始是想把前端做完再做个后端的,所以接口都定义好了,并且暂时用了一个简单的后端服务模拟(基于koa2),但是现在后端是没办法做了,想要运行项目的话,需要开三个命令行窗口,首先进入根目录,然后在一个命令行窗口中输入 npm run mock,开启 koa2简单服务,然后进入/app/static/img目录再开启一个 9000端口的服务,如果你全局安装了 http-server这个模块,那么在此目录中输入 hs -p 9000,即开启图片服务,最后在根目录中再开一个命令行窗口,输入 npm start,即启动项目

确实有点丧心病狂,因为这只是一个半成品,好多东西没时间完善了...


大概效果

showpictureshowpictureshowpicture

showpictureshowpictureshowpicture

showpicture

使用到的一些技术

  • redux、react-router、koa2、es6

  • 调用 html5地理位置接口 geolocation,以及根据 ip信息获取位置信息,并调用第三方接口,将经纬度信息转换成可读的位置数据

  • 调用 localstorage存储数据信息

  • 组件动态加载,列表无限加载,react动画,高阶函数(HOC)

  • react-addons以及 svg的应用

  • and so on

react_ele's People

Contributors

accforgit avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.