学习记录-Week1(create-react-app)

383 阅读3分钟

学习目标

  1. 学习使用 create-react-app 初始化一个 React 项目
  2. 搭建适合学习的工程结构

初始化工程

在这里,我们使用 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.tsxApp.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.htmlsrc/index.tsxsrc/react-app-env.d.ts 即可。其中 :

  • public/index.html 是项目模板 html
  • src/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 报错信息)

结语

好了,本期的内容就到这里。内容不算多,也不算难,但是实践的过程是很重要的,纸上得来终觉浅,绝知此事要躬行。

工程地址:github.com/VarHug/stud…