项目开始前，有必要跟大家说一下仓库的分支规划。不同的小册章节内容对应不同仓库分支，方便大家针对性的学习:

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              // 默认样式

@前端进阶之旅: 代码已经复制到剪贴板

脚手架生成的无用文件已经删除，大家注意也把相关的引入语句也删除。目前应该是整个应用的最终工程目录，以后的开发都会基于这个目录结构进行。

# 默认样式及字体图标准备

本项目的样式采用 styled-components 来进行开发，也就是利用 css in js 的方式，我为什么要这么做，有兴趣的同学可以阅读一下我之前在掘金写的文章 styled-components: 前端组件拆分新思路。当然后面有人看了我的项目后给我提了这个库的一些缺点，但我依然坚持用它进行开发，因为它在工程化方面的优势依然非常明显，而且大部分缺点我们也可以有意识的去避开，这个具体在后面的章节里面再说吧。

其实 styled-components 的使用是相当简单的，不需要额外专门的学习，所以大家跟着我写一遍，熟悉一下就行了。

不知道你有没有发现一个问题，上面目录中默认样式文件是 style.js，而不是.css，没错，这就是使用了 styled-components 后的结果。

我们先安装这个库:

npm install styled-components --save

@前端进阶之旅: 代码已经复制到剪贴板

在刚刚的 style.js 中，

import { createGlobalStyle } from'styled-components';

export const GlobalStyle = createGlobalStyle`
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	html, body {
		background: #f2f3f4;;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	a {
		text-decoration: none;
		color: #fff;
	}
`

@前端进阶之旅: 代码已经复制到剪贴板

这就是 styled-components 创建全局样式并导出的代码。

这段代码导出到哪里去呢？导入到 App.js 中。

//App.js 中添加这一句
import { GlobalStyle } from  './style';

@前端进阶之旅: 代码已经复制到剪贴板

我们继续来引入字体图标文件，这里的字体图标是采用的阿里图标库地址

选择好图标之后下载至本地 (本项目下载 unicode 模式)。这个操作不属于本项目的重点，也过于简单，就不在这浪费篇幅了。

在 assets 目录下新建一个名为 iconfont 的文件夹，将.css, .eot, .svg, .ttf, .woff 为后缀的文件放到这个文件夹中。然后将这个 css 文件做一些手脚，需要改成 js 代码。

所以现在的 iconfont.css 需要改成 iconfont.js，这里做了一些省略，具体代码大家直接看 GitHub 仓库 chapter1 分支吧。

import {createGlobalStyle} from'styled-components';

export const IconStyle = createGlobalStyle`
@font-face {font-family: "iconfont";
  src: url ('iconfont.eot?t=1565320061289'); /* IE9 */
  src: url ('iconfont.eot?t=1565320061289#iefix' ... 省略 base64 巨长字符) format ('embedded-opentype'), /* IE6-IE8 */
  url ('data:application/x-font-woff2;charset=utf-8) format ('woff2'),
  url ('iconfont.woff?t=1565320061289') format ('woff'),
  url ('iconfont.ttf?t=1565320061289') format ('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url ('iconfont.svg?t=1565320061289#iconfont') format ('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
...
`

@前端进阶之旅: 代码已经复制到剪贴板

接下来，咱们把字体引入 App.js 中。

//App.js
import React from 'react';
import { IconStyle } from './assets/iconfont/iconfont';
import { GlobalStyle } from './style';

function App () {
  return (
    <div className="App">
      <GlobalStyle></GlobalStyle>
      <IconStyle></IconStyle>
      <i className="iconfont">&#xe62b;</i>
    </div>
  );
}

export default App;

@前端进阶之旅: 代码已经复制到剪贴板

接下来大家打开页面可以看到一个小小的放大镜，背景变为浅灰色，字体图标和默认样式起到了效果。

到此为止，默认样式和字体图标就算一同引入到了项目中。大家可能对字体图标的用法有了一些了解，但是中间的 unicode 编码怎么来的呢？别担心，我专门在 iconfont 文件夹中放了 demo_index.html 文件，打开便能索引不同图标的 unicode 值啦。

初始化项目|云音乐项目

初始化项目|云音乐项目