Chinaunix首页 | 论坛 | 博客
  • 博客访问: 387233
  • 博文数量: 273
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1430
  • 用 户 组: 普通用户
  • 注册时间: 2018-02-02 15:57
文章分类

全部博文(273)

文章存档

2018年(273)

我的朋友

分类: Html/Css

2018-07-12 15:52:55

项目结构与技术栈

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

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

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

生成项目结构如下图:

5b403ad9c8cde15fb9f6b6e68e8ee5795259b996

  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为文档目录;
  11. README.md为项目说明文档;

接下来的工作主要就是丰富src目录,包括搭建项目架构,开发应用功能,还有自动化,单元测试等,本篇主要关注项目架构的搭建,然后使用技术栈实践开发几个模块。

技术栈

项目架构搭建很大部分依赖于项目的技术栈,所以先对整个技术栈进行分析,总结:

  1. react和react-dom库是项目前提;
  2. react路由;
  3. 应用状态管理容器;
  4. 是否需要Immutable数据;
  5. 应用状态的持久化;
  6. 异步任务管理;
  7. 测试及辅助工具或函数;
  8. 开发调试工具;

阅读(809) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~