1. 项目搭建 - LoveVin/billkeeping-react GitHub Wiki

1. create-react-app 的使用

在本次的项目实践中，使用的是 create-react-app 工具搭建React环境。该工具创建出的项目已经配置好了大部分的React环境。安装命令：

yarn global add create-react-app

yarn global add [email protected] //安装特定的版本

create-react-app --version

2. React 配合 TypeScript

本项目使用的TypeScript语言，因此在使用 create-react-app 的时候创建的命令不一样，可在官方文档的 “Building your App -> Adding TypeScript” 目录下找到。为：

create-react-app . --template typescript //在当前目录创建

create-react-app my-app --template typescript //指定文件夹

3. yarn start 启动项目自动打开浏览器的禁用

在 React 项目创建好后，使用 yarn start 命令可以运行该项目，运行后会自动打开浏览器，如果 ctrl+c 终止项目重新开启，又会自动打开一个浏览器窗口，因此可能会打开很多浏览器窗口，因为终止再重启打开的url地址是一样的，只需要刷新之前的就行，为了避免这种多窗口现象，进行如下操作禁止 yarn start 启动项目时自动打开浏览器。

  1. 在项目目录下新建 .env 文件
  2. 在 .env 文件中加入 BROWSER=none
  3. 再 yarn start 启动时就不会自动打开浏览器了，手动点击链接打开

4. 引入 normalize.css

在 create-react-app 的官网上，引入 normalize.css 文件，该文件的作用是保证页面在不同浏览器上的默认样式相同，在官网的

Styles and Assets -> Adding CSS Reset 目录下，在 index.css 中加入

@import-normalize

5. 第一次提交至 gti 前的操作

WebStorm会自动创建一个 .idea 目录，该目录是WebStorm的缓存相关的，不必提交到git，在 .gitignore 手动加入 /.idea 忽略。

6. React 中使用 Sass

在 create-react-app 的官方文档的 “Styles And Assets -> Adding Sass Stylesheet” 目录下找到安装方法。 在官方文档的安装中使用的是 node-sass 。但是这个 node-sass 非常难安装好，因为它是不是从 npm 上下载，需要去 github 上下载，既慢又很可能被墙，下载的包又很大。在下载好了 node-sass 后在本地运行还需要编译，编译很消耗 cpu。

总结下来，node-sass 不好用的原因是：

  1. 网络下载比较慢，甚至下载不下来
  2. 本地编译比较慢，甚至编译失败

因此，在本次的项目实践中，使用 dart-sass 代替 node-sass。但是直接安装 dart-sass 不行，会导致 create-react-app 的本地编译失败。可以采用如下偷梁换柱的方法绕过cra的本地编译，如下：

yarn add node-sass@npm:dart-sass （npm 6.9 的新功能，package alias）

可在 node_modules -> node-sass 目录下看到里面的内容是 dart-sass，即偷梁换柱成功！记得按照好 Sass 后将所有 .css 文件后缀改为 .scss ，才能使用 Sass。然后使用 Scss语法 看是否成功。

7. css文件 的 @import 路径

无论是 Vue 还是 react 项目，源文件和最终打包生成的项目文件的目录结构是有差别的，因此，在 src 目录下的文件之间的相互引用的路径可以使用相对路径，但可能需要去计算上级，上上级还是上上上级，比较麻烦。所以我们在实际项目开发过程中，无轮是 vue 还是 react ，都提供了根目录的表示法，然后在根目录下找路径。像 vue 的引用根目录是 @~/，react 的相对比较方便，不用标明根目录，直接把 src 当作根目录引用路径即可。

src/xxx/test.scss的引用方法为：@import "xxx/test;"

并且使用 scss 时，一般会新建一个 helper.scss 文件来存放变量和函数

8. js文件 的 import 路径

js 也是可以像引入 css 文件一样的直接使用 src 目录下的路径就行，但是需要在配置文件中配置下，详细看官方文档的 Building your App -> Importing a Component 路径下的配置，在 tsconfig.json 里加一句：

"baseUrl": "src",

9. 使用 CSS-in-JS 方案

在本项目中，不使用单独的 css 样式文件，而是采取一种 css-in-js 的方案开发。简单来说就是，我们使用分离的 css 文件添加样式的时候需要给 html 中的标签元素添加各种类名等比较麻烦。而 css-in-js方案 的意思就是在 js 文件中写 css。这样可以节省很多类名，不用担心类名重复的问题。该方案应用在 react 项目中需要引入 styled components 这个工具。该工具的设计思路就是让用户重新自定义一个带自定义样式的标签组件。

该工具是基于 ES6 中 模板字符串 而设计的。

  1. 安装 styled-components： yarn add styled-components

  2. 安装对应的 typescript 的提示工具：yarn add --dev @types/styled-components

  3. 在 webstorm 中安装 css 语句提示工具： settings -> plugins -> styled components & styled JSX -> install

碰到的问题

  1. 创建的 react 项目名不能有大写字母，会报错。

  2. 如果使用 git status 查看到有修改 .idea 文件夹，可能是不小心碰到了该文件夹，可以使用命令移除 git 里的修改记录缓存

    git rm -r --cached .idea

  3. 在 webstorm 中，css 文件的引入语句标红 是 IDE 的问题，在 src 目录上 > 右键 -> Mark Directory As -> Resource Root，将 src 手动标记为根目录即可。

  4. webstorm 中让 css 的颜色属性的颜色提示显示在文字上，而不是旁边的小色块。

settings -> Editor -> Color Scheme -> 选择 Mateiral Monokai 配色

settings -> Editor -> General -> Appearance -> 勾选最下面的 Show CSS color preview as background

在小色块旁边右键 -> Configure Gutter Icons -> 取消勾选 Color preview