初始化

cra版本：4.0.3

# 安装 cra，如已安装，则忽略这步
yarn global add create-react-app

创建项目并初始化

首先需进入安装项目的目录

# 使用 cra 初始化项目，并启用 typescript 编写
create-react-app 'project name' --template typescript

# 也可以通过这两条命令创建
yarn create react-app 'project name' --template typescript
npm init react-app 'project name' --template typescript

# 进入目录
cd 'project name'

# 创建 .env 文件并添加禁止开发环境自启动浏览器命令
touch .env && echo >> BROWSER=none

# 初始化项目预览
yarn start

关于更多 .env 的配置见 advanced-configuration

配置.gitignore

忽略/.idea 或 /.vscode 目录。

StrictMode（严格模式）

打开 src/index.tsx 会看到 <App /> 组件被 <React.StrictMode />组件包裹了。被这个组件包裹的所有组件都会被开启严格模式检查，这个模式仅在开发模式下运行，不会影响生产构建。官方文档

安装sass

默认情况下，cli只支持使用node-sass 来完成scss 文件的编译。但是由于node-sass在国内下载速度慢，还需要进行本地编译，而在本地又会因为各种情况而导致编译失败！所以最好是使用dart-sass代替node-sass:使用npm alias安装sass。

绝对路径配置

React原生支持以src为根目录的路径匹配。

1. css引入：如果有如下目录结构：src/aa/、src/bb 那么在bb内的文件可以直接用aa/xxx.css 来引入文件;
2. ts引入： compilerOptions -> "baseUrl": "src";

使用styled-components(可选)

安装：

# 安装依赖
yarn add styled-components

# 安装类型提示
yarn add @types/styled-components -D 

示例：

import styled from 'styled-component'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);