React项目的搭建和配置

一、搭建

环境准备

1.检查nodejs

2.安装脚手架
命令 npm install -g create-react-app

创建项目

选择好创建项目的目录，执行 create-react-app 项目名称
项目名称自定义，英文

创建完成

启动

npm start

二、配置路由

1.将创建项目后生成的文件删至只剩index.js
在src下新建pages 页面 router 路由 utils 工具包

2.配置router
/router/configs

/router/index

3.修改index.js文件内容

4.修改浏览器默认样式
npm i normalize.css
在入口文件中引入

三、配置eslint

1.下载

npm i eslint -D

2.初始化

npx eslint --init

之后根据项目情况进行选择

项目中出现.eslintrc.js即为完成

3.在vscode中下载eslint

4.在设置中勾选

5.在setting.josn文件中配置

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".tsx"
    ]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "eslint.alwaysShowStatus": true,
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
}

注意

报错'React' must be in scope when using JSX
组件中需要引入Reactimport React, { useState } from 'react';

tab键补全标签
在setting文件中配置

  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

使用useHistory，一定要在组件外层包裹Router，否则history的值会是undefined