项目开始前，有必要跟大家说一下仓库的分支规划。不同的小册章节内容对应不同仓库分支，方便大家针对性的学习:
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: 前端组件拆分新思路 (opens new window)。当然后面有人看了我的项目后给我提了这个库的一些缺点，但我依然坚持用它进行开发，因为它在工程化方面的优势依然非常明显，而且大部分缺点我们也可以有意识的去避开，这个具体在后面的章节里面再说吧。
其实 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';
我们继续来引入字体图标文件，这里的字体图标是采用的阿里图标库 地址 (opens new window)
选择好图标之后下载至本地 (本项目下载 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"></i>
</div>
);
}
export default App;
接下来大家打开页面可以看到一个小小的放大镜，背景变为浅灰色，字体图标和默认样式起到了效果。
到此为止，默认样式和字体图标就算一同引入到了项目中。大家可能对字体图标的用法有了一些了解，但是中间的 unicode 编码怎么来的呢？别担心，我专门在 iconfont 文件夹中放了 demo_index.html 文件，打开便能索引不同图标的 unicode 值啦。
