React项目搭建

使用create-react-app(官网)搭建React项目：

一、创建项目步骤：

1. 创建目录： money-memory-react(名称不能有大写，要不cra的时候报错)；用WebStorm进入目录，打开终端
2. 安装create-react-app： yarn global add create-react-app
3. 使用TS创建项目： create-react-app . --template typescript
4. 阻止yarn start自动打开浏览器： 项目根目录添加 .env 文件，输入 BROWSER=none，
5. .gitignore添加 /.idea，因为WebStorm会默认创建.idea文件
6. git初始化本地仓库： git init
7. 运行项目： 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

四、删除不必要的文件

创建项目后，只留以下文件