React应用架构设计指南

前言

现在已经有很多脚手架工具，如create-react-app，支持一键创建一个React应用项目结构，很方便，但是享受方便的同时，也失去了对项目架构及技术栈完整学习的机会，而且通常脚手架创建的应用技术架构并不能完全满足我们的业务需求，需要我们自己修改，完善，所以如果希望对项目架构有更深掌控，最好还是从0到1理解一个项目。

项目结构与技术栈

我们这次的实践不准备使用任何脚手架，所以我们需要自己创建每一个文件，引入每一个技术和三方库，最终形成完整的应用，包括我们选择的完整技术栈。

第一步，当然是创建目录，我们在上一篇已经弄好，如果你还没有代码，可以从Github获取：

git clone https://github.com/codingplayboy/react-blog.git
cd react-blog

生成项目结构如下图：

1. src为应用源代码目录；
2. webpack为webpack配置目录；
3. webpack.config.js为webpack配置入口文件；
4. package.json为项目依赖管理文件；
5. yarn.lock为项目依赖版本锁文件；
6. .babelrc文件，babel的配置文件，使用babel编译React和JavaScript代码；
7. eslintrc和eslintignore分别为eslint语法检测配置及需要忽略检查的内容或文件；
8. postcss.config.js为CSS后编译器postcss的配置文件；
9. API.md为API文档入口；
10. docs为文档目录；

1. README.md为项目说明文档；

原文链接