项目开始前,有必要跟大家说一下仓库的分支规划。不同的小册章节内容对应不同仓库分支,方便大家针对性的学习:
chapter1 和 chapter2 已经在第 4 节和第 5 节声明。
6-9 节 -> chapter3
10-12 节 -> chapter4
13-14 节 -> chapter5
15-19 节 -> chapter6
20-22 节 -> chapter7
23-28 节 -> chapter8
28-31 节 -> chapter9
32-34 节 -> chapter10
@前端进阶之旅: 代码已经复制到剪贴板
温馨提示: 本小节代码大家可以去参考 GitHub 仓库 chapter1 分支。
# create-react-app 脚手架初始化
首先通过 create-react-app 这个脚手架工具生成项目的初始化化结构。
注意: 请保证你的 create-react-app 是最新版本,不然目录结构不会生成。
在命令行中输入以下命令:
create-react-app cloud-music
@前端进阶之旅: 代码已经复制到剪贴板
完成后,根据提示:
cd cloud-music
@前端进阶之旅: 代码已经复制到剪贴板
启动项目:
npm start
@前端进阶之旅: 代码已经复制到剪贴板
# 项目目录说明
开始这个项目之前,我们需要对目录进行一下改造。如下 (主要针对 src 目录):
├─api // 网路请求代码、工具类函数和相关配置
├─application // 项目核心功能
├─assets // 字体配置及全局样式
├─baseUI // 基础 UI 轮子
├─components // 可复用的 UI 组件
├─routes // 路由配置文件
└─store //redux 相关文件
App.js // 根组件
index.js // 入口文件
serviceWorker.js // PWA 离线应用配置
style.js // 默认样式
@前端进阶之旅: 代码已经复制到剪贴板
脚手架生成的无用文件已经删除,大家注意也把相关的引入语句也删除。目前应该是整个应用的最终工程目录,以后的开发都会基于这个目录结构进行。
