Develop the html5 blog website with React/Webpack/Babel.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
public
src
webpack
.babelrc
.eslintignore
.eslintrc
.gitattributes
.gitignore
API.md
README.md
package.json
postcss.config.js
webpack.config.js
yarn.lock

README.md

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).

React Blog Example

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

react-blog-design.png

Mobile UI

React Blog Mobile UI

Mobile Side Nav UI

Mobile Side Nav UI

Development Log

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