Giter Club home page Giter Club logo

react_redux_cnode's Introduction

react-redux-cnode

这是一个基于react全家桶的cnode社区webapp,主要包括react、redux、react-redux、react-router、webpack、flex。

个人博客:我爱吃包子的博客

项目github地址:react-redux-cnode

如果对你有帮助的话,希望得到你的star。

demo

下载

	git clone https://github.com/wangcheng007/react_redux_cnode.git
	cd react_redux_cnode/
	npm install(安装依赖模块)

运行

	npm run start (开发版本访问:http://localhost:3000/)
	npm run build (打包发布)

功能

1.登录退出
2.分类查看
3.首页滚动到底部加载更多
4.帖子详情页
5.评论帖子
6.发布帖子
7.查看个人信息、查看其他用户主页
8.我的消息

目录结构

|-- config								  	//路由、 redux store文件夹 
|		|--routerConfig.js				  	//路由
|		|--storeConfig.js				  	//redux store  
|--src									  	//源码目录
|		|--action						  	//action 文件夹
|		|		|--chooseHeader.js		  	//选择分类
|		|		|--getListDataAction.js		//获取首页列表数据
|		|		|--getTopicDetailAction.js	//获取帖子详情数据
|		|		|--login.js					//登录
|		|		|--signout.js				//退出
|		|--component						//木偶组件文件夹
|		|		|--App						
|		|		|--Article					//帖子详情页 帖子
|		|		|--ChooseContentList		//首页列表
|		|		|--FooterNav				//尾部
|		|		|--Header					//详情页等头部
|		|		|--HeaderNav				//选择分类展示头部
|		|		|--Loading					//正在加载
|		|		|--Loadmore					//加载更多
|		|		|--TabIcon					//图标字体
|		|--container						//智能组件
|		|		|--ChooseContentList		//首页列表
|		|		|--HeaderList				//分类展示头部
|		|		|--Message					//消息列表
|		|		|--Published				//发布帖子
|		|		|--Signout					//退出登录
|		|		|--TopicDetail				//帖子详情
|		|		|--UseInfo					//未登录状态
|		|		|--UserView					//个人信息
|		|--data								//获取数据
|		|		|--createTopic				//新建帖子
|		|		|--dianzan					//点赞评论
|		|		|--list						//首页列表
|		|		|--login					//登录
|		|		|--message					//消息数据
|		|		|--reply					//评论数据
|		|		|--topicdetail				//帖子详情
|		|		|--userview					//个人中心
|		|		|--get.js					//get请求
|		|		|--post.js					//post请求
|		|--iconfont							//图标字体
|		|--reducer							//reducers
|		|		|--index.js					//整合
|		|		|--listData.js				//首页列表
|		|		|--login.js					//登录
|		|		|--showContentOfHeader.js	//选择分类
|		|		|--topicDetail.js			//详情页
|		|--index.html						
|		|--index.js							//入口文件
|		|--Tool.js 							//共用方法

总结

  • ui是借鉴的狼族小狈的cnode社区ui,非常感谢。
  • 自己做开发前没有认真想过目录结构,导致结构混乱,然后推到重来了一遍。
  • 异步请求数据问题,原来是按照官方文档,通过两种action来请求。后发现这种是在是太烦,在网上搜索发现现在的方法。
  • 项目部署问题,可以参考我的博客,博客地址

2017-07-05 更新

  • 完善打包方法,添加postcss-loader 加载器,通过npm 直接安装的版本为2.0+版本,按照官方文档配置然后一直报错,最后通过卸载2.0+的版本,重新安装了1.0+版本,成功!

项目截图

首页

首页

详情页

详情页

评论列表

评论列表

未登录

未登录

登录

登录

消息列表

消息列表

发布

发布

个人信息

个人信息

react_redux_cnode's People

Contributors

wangcheng007 avatar

Stargazers

 avatar runningsnail 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.