Giter Site home page Giter Site logo

cnode's Introduction

项目简介

一个WebApp版的cnode客户端,项目采用react技术栈构建。组件选用的是Material-UI,让界面更适合触控操作。

功能

  • 首页列表,下拉时自动加载下一页,在顶端上拉刷新
  • 主题详情,登陆后能够收藏,评论和点赞
  • 消息提醒,能查看消息详情和清空所有未读消息
  • 个人主页,包括最近参与,回复,以及收藏的主题
  • 发表主题,成功后能跳转到相应主题页面
  • 页面后退,能还原数据和滚动位置

运用的技术主要有:

  • 采用react技术栈,通过Redux来管理页面状态,通过Router来设置页面路由
  • 组件选用的是Material-UI,不再自己造轮子,既美观又能方便触控操作
  • 使用react-route v4 和 react原生的react-transition-group v2 来实现路由切换动画
  • 使用react-flip-move插件来实现list的加载动画
  • 应用isomorphic-fetch库代替XMLHttpRequest实现网络请求
  • 使用PostCSS对CSS进行预处理
  • 通过CSSModules处理模块内部的类名

预览

DEMO

运行项目

  git clone https://github.com/lumia2046/cnode.git
  cd cnode
  npm install
  npm start
  打开浏览器访问:http://localhost:5678

生产项目

  windows下
  npm run build-win
  linux、mac下
  npm run build-win

cnode's People

Contributors

lumia2046 avatar

Stargazers

 avatar

Watchers

 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.