学习目标
- 学习使用 create-react-app 初始化一个 React 项目
- 搭建适合学习的工程结构
初始化工程
在这里,我们使用 create-react-app 这个脚手架来初始化我们的 React 工程。 首先,我们要在全局安装一下这个脚手架工具:
sudo npm install -g create-react-app
之后我们可以创建文件夹,并利用脚手架初始化我们的项目了:
create-react-app study
cd study
npm start
如果是先建立的文件夹,那我们只需要进入文件夹后,在创建项目的时候简单的改一下目录为当前目录就行了:
cd study
create-react-app ./
npm start
如此一来,不出意外我们的项目应该就能跑起来了。
2021-02-26 更新
官方目前已经不建议使用全局的create-react-app
来进行初始化工程。具体请见:create-react-app.dev/docs/gettin…
添加 TypeScript
首先来说明下我选用 TypeScript 的理由,其实仅仅是想通过它的类型检查来规避一些无所谓的编码 bug 。同时,用 TypeScript 来强制要求养成一个良好的编码习惯(当然,不要用成 AnyScript 了,这样意义就不是很大了)。
好了,之后,让我们来添加 TypeScript:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
之后我们将文件重命名为 TypeScript 文件,比如 src/index.js
重命名为 src/index.tsx
,App.js
重命名为 App.tsx
。
(如果遇到了编辑器报错,需要看看项目的 React 版本和 TypeScript 版本是否合适,如果不合适,搜索下更改如何项目 TypeScript 版本就行)
因为我使用的是 vscode 编辑器,所以在更改项目 TypeScript 版本时,会在目录下生成一个 .vscode 的配置文件目录。而我的这个工程是一个 git 工程,而 .vscode 这个配置文件目录被提交上去显然是不好的,所以需要在 .gitignore
文件中添加内容:
# vscode
.vscode
直接初始化使用 TypeScript 工程
当然,除了先初始化再添加 TypeScript 外,我们当然也可以直接就初始化成 TypeScript 的工程:
create-react-app study --template typescript
除此之外,剩下的内容大同小异,这里不做过多的赘述。
优化目录结构
之后我们需要做的,是清除掉我们不需要的一些文件。仅保留 public/index.html
、 src/index.tsx
、 src/react-app-env.d.ts
即可。其中 :
public/index.html
是项目模板 htmlsrc/index.tsx
是项目的入口文件src/react-app-env.d.ts
是引用一些react-scripts
提供的 TypeScript 接口
多说一句,reportWebVitals
这个文件很有意思,它是用来监控性能优化指标的一些内容,短期内我们用不到,所以,就先忍痛割爱的删掉吧。
删除掉这些内容之外,我们适当的再整理一下保留文件中的内容引用,确保工程是可以重新运行的。同时在 index.js 中插入一个简单的<div>123</div>
至页面中:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<div>123</div>
</React.StrictMode>,
document.getElementById('root')
);
扩展 eslint
create-react-app 默认的 eslint 是不太符合我的开发习惯的,这里我们需要扩展一下 eslint 。扩展的方法有很多,这里我选择的是直接在根目录下添加一个 .eslintrc.js
的配置文件来扩展:
module.exports = {
"extends": [
"react-app"
],
"plugins": [
"react-hooks"
],
"rules": {
// style
semi: ['error', 'always'],
// es6
'no-var': 'error',
'prefer-const': ['error', {
destructuring: 'any',
ignoreReadBeforeAssign: true,
}],
},
};
其中,具体的配置规则大家可以按照自己的习惯查阅并配置,此处只是先添加一点内容,未来会随着学习的进行而不断的添加新配置。(这里非常建议开启一些根据 eslint 修复代码的工具,比如 vscode 有相关的插件,可以实现在保存文件时自动修复 eslint 报错信息)
结语
好了,本期的内容就到这里。内容不算多,也不算难,但是实践的过程是很重要的,纸上得来终觉浅,绝知此事要躬行。