All Projects → lzxb → React Cnode

lzxb / React Cnode

基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社区

Programming Languages

javascript
184084 projects - #8 most used programming language
es6
455 projects

Projects that are alternatives of or similar to React Cnode

Surmon.me.native
📱 My blog app, powered by react-native
Stars: ✭ 579 (-15.84%)
Mutual labels:  react-redux, react-app
Manta
🎉 Flexible invoicing desktop app with beautiful & customizable templates.
Stars: ✭ 5,160 (+650%)
Mutual labels:  react-redux, react-app
Imooc React
慕课网 React 视频课程源代码
Stars: ✭ 203 (-70.49%)
Mutual labels:  react-redux, react-app
React Demo Gather
react demo合集,有自己写的,也有在学习过程中觉得很好的demo收集的,持续更新中
Stars: ✭ 97 (-85.9%)
Mutual labels:  react-redux, react-app
Xiaoduyu.com
🐟小度鱼 - 年轻人的交流社区 https://www.xiaoduyu.com
Stars: ✭ 549 (-20.2%)
Mutual labels:  react-redux
Redux Model
A redux framework for TS project.
Stars: ✭ 424 (-38.37%)
Mutual labels:  react-redux
React Social Network
Simple React Social Network
Stars: ✭ 409 (-40.55%)
Mutual labels:  react-redux
Manager
The Linode Cloud Manager
Stars: ✭ 543 (-21.08%)
Mutual labels:  react-redux
Recipes App React Native
Recipes App in React Native
Stars: ✭ 386 (-43.9%)
Mutual labels:  react-redux
Hugo Paper
🥛 A simple, clean, flexible Hugo theme
Stars: ✭ 538 (-21.8%)
Mutual labels:  flex
Redux Firestore
Redux bindings for Firestore
Stars: ✭ 530 (-22.97%)
Mutual labels:  react-redux
Horseshoe
🍧代号马蹄铁。以专题为单位的学习。目前已发布 { Async专题 } { Grid专题 } { Flex专题 } { Git专题 } { Regex专题 } { Redux专题 } { React专题 }
Stars: ✭ 521 (-24.27%)
Mutual labels:  flex
Reactive React Redux
React Redux binding with React Hooks and Proxy
Stars: ✭ 480 (-30.23%)
Mutual labels:  react-redux
Redux Connect
Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React
Stars: ✭ 551 (-19.91%)
Mutual labels:  react-redux
Youtube React
A Youtube clone built in React, Redux, Redux-saga
Stars: ✭ 421 (-38.81%)
Mutual labels:  react-redux
Graphqldesigner.com
A developer web-app tool to rapidly prototype a full stack implementation of GraphQL with React.
Stars: ✭ 587 (-14.68%)
Mutual labels:  react-redux
Starcabinet
🎉 开源的跨平台Github Stars管理分析工具
Stars: ✭ 399 (-42.01%)
Mutual labels:  react-redux
Antd Umi Sys
企业BI系统,数据可视化平台,主要技术:react、antd、umi、dva、es6、less等,与君共勉,互相学习,如果喜欢请start ⭐。
Stars: ✭ 503 (-26.89%)
Mutual labels:  react-redux
Egg React Webpack Boilerplate
Egg React Server Side Render(SSR) / Client Sider Render(CSR)
Stars: ✭ 634 (-7.85%)
Mutual labels:  react-redux
Soundcloud Redux
SoundCloud API client with React • Redux • Redux-Saga
Stars: ✭ 681 (-1.02%)
Mutual labels:  react-redux

此项目除了正常的bug修复,不再进行功能更新

如果对状态管理感兴趣,可以看下 Tms,文档更齐全

react-cnode

基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社区

demo

demo

下载

  git clone https://github.com/lzxb/react-cnode.git
  cd react-cnode
  npm install (安装依赖模块)
  npm install webpack -g (没有安装webpack的需要安装)

运行(nodejs 6.0+)

  npm run dev (开发版本访问:http://localhost:3000/)
  npm run dist (发布生产版本)

功能

  1.登录退出
  2.列表分页,查看帖子
  3.发帖,回复帖子
  4.我的消息
  5.个人中心
  6.查看别人的资料

总结

  1.UI是自己设计的,虽然我并不会PS这些工具。
  2.使用了flex.css模块布局,最大的感觉就是在写css不需要考虑在css中如何写布局,大大的提高了我的效率。
  3.在移动端中,列表数据达到上百条之后,性能仍然是不容乐乎,有待于进一步的优化。
  4.ES6中的箭头函数和变量解构赋值,最大的感受在开发效率上。提高很多。
  5.使用高阶组件封装获取数据的流程,让页面组件专注于页面渲染,避免了每个页面都需要写一次获取数据的流程,提高开发效率
  6.redux听起来很美好,在实际操作的过程中,大大的复杂了创建一个页面的难度,最后只能将其封装起来,简化这个过程(其实我对redux不怎么理解)
  7.为了还原页面状态,比如后退时的滚动条位置,还是花费了不少功夫
  8.开发移动到应用,还是使用字体图标爽。
  9.借助webpack可以生成离线缓存清单,px转rem,ES6编译成ES5,模块化开发,代码压缩混淆......
  10.前端自动化,工程化,给前端的发展起到了很大的推动作用

状态树

Alt text

小广告

  深圳html5开发者社群:170761660
  NodeJS前端分享群:133240225

截图

截图

截图

截图

截图

截图

截图

截图

截图

截图

截图

截图

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].