React-常用命令和配置

常用命令

# 创建项目
npx create-react-app my-app

# 安装配套工具
npm i @reduxjs/toolkit react-redux
npm i react-router-dom
npm i sass -D
npm i axios classnames echarts

# 启动项目
cd my-app
npm start

文件夹配置

安装ant

网站：https://ant.design/index-cn/
# 1. 安装
npm i antd --save

# 使用， 导入渲染
import { Button } from "antd"

function App() {
  return (
    <div>
      this is app <Button type="primary">test</Button>
    </div>
  )
}

export default App

配置@路径

# 1. 安装craco
npm i -D @craco/craco

# 2. 配置在项目根目录增加craco.config.js
const path = require("path")
module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
}

# 3. 配置命令修改项目根目录package.json
  "scripts": {
  	# react-scripts改成craco 
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

# 4. 使用@就表示项目根目录
@/xxx

# 5. vscode配置目录联想，在项目根目录增加jsconfig.json
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "scr/*"
            ]
        }
    }
}

浏览器样式reset

# 安装
npm install normalize.css

# 在入口js里导入， scr/index.js
import normalize.css

# 配置高度铺面浏览器，scr/index.scss
html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}