项目结构与技术栈
我们这次的实践不准备使用任何脚手架,所以我们需要自己创建每一个文件,引入每一个技术和三方库,最终形成完整的应用,包括我们选择的完整技术栈。
第一步,当然是创建目录,我们在上一篇已经弄好,如果你还没有代码,可以从Github获取:
git clone https://github.com/codingplayboy/react-blog.git cd react-blog
生成项目结构如下图:
-
src为应用源代码目录;
-
webpack为webpack配置目录;
-
webpack.config.js为webpack配置入口文件;
-
package.json为项目依赖管理文件;
-
yarn.lock为项目依赖版本锁文件;
-
.babelrc文件,babel的配置文件,使用babel编译React和JavaScript代码;
-
eslintrc和eslintignore分别为eslint语法检测配置及需要忽略检查的内容或文件;
-
postcss.config.js为CSS后编译器postcss的配置文件;
-
API.md为API文档入口;
-
docs为文档目录;
-
README.md为项目说明文档;
接下来的工作主要就是丰富src目录,包括搭建项目架构,开发应用功能,还有自动化,单元测试等,本篇主要关注项目架构的搭建,然后使用技术栈实践开发几个模块。
技术栈
项目架构搭建很大部分依赖于项目的技术栈,所以先对整个技术栈进行分析,总结:
-
react和react-dom库是项目前提;
-
react路由;
-
应用状态管理容器;
-
是否需要Immutable数据;
-
应用状态的持久化;
-
异步任务管理;
-
测试及辅助工具或函数;
-
开发调试工具;
阅读(814) | 评论(0) | 转发(0) |