React-常用命令和配置

常用命令

bash 复制代码
# 创建项目
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

javascript 复制代码
网站: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

配置@路径

javascript 复制代码
# 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%;
}
相关推荐
G_GreenHand13 分钟前
Dhtmlx Gantt教程
前端
鹿九巫14 分钟前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长16 分钟前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
宝拉不想努力了19 分钟前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
YONG823_API23 分钟前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化
鱼樱前端24 分钟前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
小希爸爸1 小时前
1、中医基础入门和养生
前端·后端
神仙别闹2 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
下雨的Jim2 小时前
前端速成之——Script
前端·笔记
Captaincc2 小时前
使用 Copilot 代理模式构建着陆页
前端·ai编程·github copilot