使用create-react-app(官网)搭建React项目：
一、创建项目步骤：
- 创建目录： money-memory-react(名称不能有大写，要不cra的时候报错)；用WebStorm进入目录，打开终端
- 安装create-react-app：
yarn global add create-react-app - 使用TS创建项目：
create-react-app . --template typescript - 阻止yarn start自动打开浏览器： 项目根目录添加
.env文件，输入BROWSER=none， .gitignore添加/.idea，因为WebStorm会默认创建.idea文件- git初始化本地仓库：
git init - 运行项目：
yarn start
二、项目目录说明：
React对比Vue的目录： React更简洁，生成了src和public目录；内置功能更少，没有自带Router、Redux、SCSS
三、配置
1. CSS相关配置
1.1 css normalize
- 给
index.css添加@import-normalize - 作用：保证页面在不同浏览器上默认样式相近
- Webstorm会报错：鼠标上去，点击小灯泡，点击，edit inspections，去掉打勾
- css normalize和css reset的区别：normalize让不同浏览器默认样式相近，reset是把默认样式去掉
1.2 scss支持
- 安装dart-sass：
yarn add node-sass@npm:dart-sass
1.3 @import 样式引用配置
- 给
.env文件添加SASS_PATH=./node_modules;./src，然后通过@import 'xxx/aaa'来引入'src/xxx/aaa.scss'
1.4 import JS/TS引用配置
- 在
jsconfig.json/tsconfig.json添加"baseURL": "src";
2. 使用styled-components
- 这是一种CSS in JS的方案，写CSS更加方便
- 官网：styled-components.com/
- 安装：
yarn add styled-components，yarn add --dev @types/styled-components - webstorm插件：使用styled components插件配合，settings-Editor-General-Appearance-show css color勾选；左侧右键confit gutter icon 去掉color preview
- vscode插件：vscode-styled-components
四、删除不必要的文件
创建项目后，只留以下文件
