环境搭建

进入create-react-app的官网,根据步骤运行:

1. yarn global add create-react-app@3.4.1
2. yarn create react-app money-react –template typescript
3. cd money-react
4. yarn start

注意: 运行yarn start会自动打开浏览器，如果不想自动打开，运行echo ‘BROWSER=none’>.env,然后再yarn start。

CSS normalize

CSS normalize的作用是保证页面在不同浏览器上的默认样式近似，而CSS reset是让所有样式重置。
create-react-app文档有写:在index.css文件里直接写@import-normalize就能保证页面在不同浏览器上的默认样式近似。

支持SCSS

根据create-react-app的文档推荐的写法:

$ npm install node-sass --save
$ # or
$ yarn add node-sass
复制代码

但是，我比较倾向于使用dart-sass，原因如下:

使用dart-sass代替node-sass（后者经常被墙，下载速度慢，本地编译慢）
React不支持dart-sass，但npm6.9有一个package alias的功能
yarn add --dev node-sass@npm：dart-sass@1.25.0
这个命令可以用dart-sass代替node-sass
然后将所有.css改成.scss
复制代码

如何让CSS@import引用更方便

在Vue项目里，使用@代表src目录，而在React里可以直接使用@import ‘xxx/yyy’引入src/xxx/yyy.scss
js也不需要@，在tsconfig.json添加一行“baseUrl”:”src”,直接import ‘xxx/yyy.tsx’来引用‘src/xxx/yyy.tsx’

关于helper.scss

1.创建src/helper.scss

• helper放置变量，函数等公用的东西
• 比如写一句$red:#f00

2.使用 helper.scss

• 在index.scss或者App.scss写@import “helper”,即可引用它
• 然后你就可以写color:$red

styled-components

此项目中没有使用scss,而是使用了CSS in js的方式：styled-components,安装步骤如下:

yarn add styled-components
yarn add --dev @types/styled-components //添加typescript支持
复制代码

使用方法如下:

const Button = styled.button` //写一个button
    color: red; 
`
<Button />
复制代码

React Router实现导航

根据React Router的文档，安装以下工具:

yarn add react-router-dom;
yarn add --dev @types/react-router-dom;//支持Typescript
复制代码

再根据文档，使用CRM(copy,run,modify)学习法修改相应的内容，得到我们想要的结果。
注意: Router有两种模式，有后台服务器才能使用history模式，这里我们使用hash模式。 页面划分为记账页，标签页和统计页，最后还有一个404页面。

svg Symbols

项目中用svg的Symbols作为图标，我没有直接通过import的方式导入svg,而是使用了自定义的webpack config,安装步骤和使用方法如下:

安装svg-sprite-loader和svgo-loader，把svg转化为一个symbol
yarn eject拿到webpack配置  
根据svg-sprite-loader的文档进行CRM(copy,run,modify)  
复制代码

在oneof加入:

     {
       test: /\.svg$/,
       use: [
             {loader: 'svg-sprite-loader', options: {}},
               {
                 loader: 'svgo-loader', options: {
                   plugins: [
                      {removeAttrs: {attrs: 'fill'}}
                    ]
                  }
                }
              ]
            },
复制代码

使用如下:

  <svg>
    <use xlinkHref={'#' + props.name}/>
  </svg>
复制代码

其他

事不过三的原则: 多次使用的地方能抽离尽量抽离，拒绝重复。
treeshaking:在引入svg作为图片时，如果没使用svg，该import会被删除，可以使用require避免。