Develop a blog with React/Webpack/material-ui

Develop a blog with React, Webpack, Babel, Eslint, documentation.js and material-ui.

And I will record all resources and process through the entire development of the project.

Run

1. git clone https://github.com/codingplayboy/react-blog.git
2. cd react-blog
3. npm install yarn -g
4. yarn install
5. yarn start for develop
6. yarn build for production
7. yarn doc for create API doc

API

1. API

Publish

I will update the site continuously, now, please see React Blog (have your Try).

Development Process

1. Webpack自动化构建实践指南
2. 刷新页面react-router路由访问失败问题解决方案
3. React应用架构设计
4. 响应式Web设计与实现思路

Structure introduction

1. webpack: 为webpack配置目录；
2. webpack.config.js: 为webpack配置入口文件；
3. package.json: 为项目依赖管理文件；
4. yarn.lock: 为项目依赖版本锁文件；
5. .babelrc: babel的配置文件，使用babel编译React和JavaScript代码；
6. eslintrc, eslintignore: 分别为eslint语法检测配置及需要忽略检查的内容或文件；
7. postcss.config.js: CSS后编译器postcss的配置文件；
8. API.md: API文档入口；
9. docs: 文档目录；
10. README.md: 项目说明文档；
11. src: 开发代码目录
12. ├──api 请求API
13. ├──styles 样式
14. ├──components 展示型组件
15. ├──config 全局配置
16. ├──constants 常量
17. ├──containers 容器组件
18. ├──helper 辅助／工具函数
19. ├──store redux store相关
20. ├──middlewares 中间件
21. ├──routes 应用路由模块
22. ├──services 应用服务模块
23. ├──index.html 应用入口html
24. ├──app.js 项目根组件文件

Product Prototype

自己画的UI原型图，比较简陋，权且看看，欢迎吐槽，嘿嘿👀。

PC UI

Mobile UI

Mobile Side Nav UI

Development Log

1. 项目基础布局（使用material-ui
2. 搭建首页基本结构
3. 响应式展示
4. 首页文章列表：
5. 初始加载及翻页
6. 列表自适应排布展示
7. 侧滑导航栏切换
8. 底部版权及联系方式声明组件