一. 使用`create-react-app`搭建

我们已经安装好了create-react-app，可以直接搭建项目了。先在指定目录下创建一个空的文件夹，用webstorm打开，在终端：

create-react-app . --template typescript

因为打开这个空的文件夹，就已经在这个文件夹里了，所以可以用.表示当前目录，后边是为了支持typescript。因为create-react-app默认不支持typescript

`.env`

然后yarn start打开浏览器开发。这句话会自动打开浏览器，如果不想要打开，在当前目录下新建一个.env的文件，里边写一句话：BROWSER=none，再次yarn start，就不会自动打开了，而是给出一个端口。

`.idea`

如果是用webstorm打开项目，会自动创建一个.idea文件夹，这个文件夹不需要提交放到仓库里，所以我们把它手动放在.gitignore里

然后想提交代码的时候，发现webstorm认为我们修改了.idea，但是我们不想让git 关注这个文件夹，所以运行git rm -r --cached .idea ，它会把.idea从git 删掉。之后就可以提交代码了。

二. 目录结构

public是静态文件，里边的文件一般不做修改。其中的index.html是首页。robots.txt是用于屏蔽百度的。

src是源代码，其中比较重要的：index.tsx 入口文件，App.tsx主组件。在index.tsx里渲染App主组件，其他组件在App里渲染。react-app-env.d.ts 用于TS的类型声明。setupTeats.ts是测试文件。

tsconfig.json是TS的配置文件

三. CSS相关的配置

1. css normalize

在create-react-app的文档上，在index.css里添加：@ import-normalize ;

作用：保证页面在不同的浏览器上的默认样式相近

如果面试问：css normalize和css reset的区别？css normalize保证页面在不同的浏览器上的默认样式相近；css reset会重置默认样式

（但是一般没用，因为我们一般都会去掉默认样式，自己写）

2. 让react支持SCSS

还是在create-react-app的文档上，有如何添加SASS的文档。文档上说安装node-sass，但是node-sass经常安装失败。因为它的安装包在github上，网络下载慢。也有可能编译慢。

所以我们使用dart-sass，代替node-sass。

于是安装：yarn add dart-sass，但是开发时发现报错了，react并不支持dart-sass。

于是翻阅了很多文档，发现npm支持一个新的功能，叫package alias，通过：yarn add node-sass@npm:dart-sass ，实现在本地让react以为安装了node-sass，但是实际上安装的却是dart-sass。

3. 让 @import 更方便

在Vue里，引入src目录下的文件可以使用@表示src

在React里，不需要使用@。

在scss文件里引入另一个scss，可以直接：@import 'y/bbb.scss'; ，表示引入 src/y/bbb/scss

在jsx/tsx里引入另一个jsx/tsx文件，也可以直接写，只不过要配置。

在jsconfig.json/tsconfig.json里添加配置。配置完，就可以：import a from 'aaa/a.tsx' 表示引入 src/aaa/a.tsx

四. styled-components代替scss/css

本项目不使用css/scss，也不用create-react-app里的css modules。

使用styled-components ，在js里写css的方式

1. 安装

安装styled-components的JS源码

yarn add styled-components

如果我们使用ts，还要额外安装一个ts类型声明文件。一般支持文件是加--dev的

yarn add --dev @types/styled-components

2. 引入

在一个tsx文件里引入

import styled from 'styled-components';

3. 使用

import styled from 'styled-components';

const Box=styled.div`
  border:1px solid black;
  width:300px;
  height:300px;
  box-shadow:0 0 3px rgba(0,0,0,0.25);
`
function App() {
  return (
    <Box />
  );
}

export default App;

styled-components可以创建一个带有样式的组件。样式用反引号 `` 括起来。然后就可以像组件一样渲染。好处就是不用想类名了。

模块化：如果这个Box会在很多地方使用，就把他单独放在一个tsx文件里。因为是组件，所以在src下新建一个components目录。里边新建一个Box.tsx文件。

import styled from 'styled-components';

const Box=styled.div`
  border:1px solid black;
  width:300px;
  height:300px;
  box-shadow:0 0 3px rgba(0,0,0,0.25);
`
export default Box

在App.tsx里引入：

import Box from './components/Box';
function App() {
  return (
    <Box />
  );
}
export default App;

从此以后整个项目下就不需要css/scss文件了。都使用tsx

可以安装一个插件：styled-components，可以让样式的颜色出现色块。

《记账-react-搭建项目》

一. 使用create-react-app搭建

.env

.idea