React框架项目搭建

项目搭建

全局安装create-react-app:

yarn global add create-react-app
//需要指定create-react-app的版本，则运行 yarn global add create-react-app@xxx 。xxx是版本号。

将需要建立项目的文件夹拖入VScode或者webstorm，运行create-react-app . --template typescript，表示要在当前文件夹创建项目，并引入Typescript；不加--template typescript则不会引入。

此时会自动安装依赖等。项目搭建结束之后，会生成很多文件。其中：
node_modules是node依赖；
public是静态文件；
src是源代码文件；其中的index.tsx是入口文件。App.jsx是主组件，可以引用其他组件。
react-app-env.d.ts文件是声明文件。

React项目初始化的目录比Vue更简单，内置功能更少。可以看出，Vue指导性更强，React自由度更高。

操作参考文档。

TypeScript的优点

为什么建议使用TypeScript？因为TypeScript可以做类型批注，可以做类型推断。它能在编译时检查变量的类型。以供编译时纠错，提高代码编写效率。

TypeScript的使用

变量类型以及变量声明

在TS中，声明变量需要表明变量的类型。示例如下：

type Category = "-" | "+" 
const defaultFormData = { tagIds: [] as number[], note: "", category: '-' as Category, amount: 0 }

声明类型有若干种方法，其中用的比较多的是使用type(类型别名)以及interface(接口)来定义。
两者的区别简而言之就是type(类型别名)是TS的一种高级类型，它可以包括对各种类型的交叉，如<num & array>联合，如上面代码中的type Category = "-" | "+" ；它也可以用于定义原始的数据类型。而interface(接口)是描述一个对象的属性和方法，它用于定义对象类型。

类型推断 tagIds: [] as number[] 就是类型推断。这句代码的意思就是将tagIds的类型定义为数字的数组。

TS函数

const onChange = (obj: Partial<typeof selected>) => {
    setSelected({ ...selected, ...obj }) 
}

在TS函数中，需要声明参数的类型。还可以用扩展操作符...rest来声明剩余参数的类型。

TS泛型

const [category, setCategory] = useState<'-' | '+'>("-")

如上代码，<>中定义的便是泛型。一般其用于声明函数、接口和类的类型。
等价于：

type Category = "-" | "+" 
const [category, setCategory] = useState<Category>("-")

React函数 有如下代码：

type Props = { value: number[]; 
onChange: (selected: number[]) => void; } 

const TagsSection: React.FC<Props> = (props) => { ... }

在React函数组件中，定义函数组件的类型为React.FC，定义其泛型为Props。则其参数props也具有Props类型的各种属性。

tips

基于React的设计理念，它不会对代码约定或文件组织实施严格的规则。使用React创建项目时需要根据自身需求选择适合自身的约定。比如要想使用css预编译语言scss时，或者要使用router时就必须自己在webpack中配置。