react项目准备工作

1. 新建项目

npx create-react-app my-app

2. 新建一系列文件夹

3. 想用import App from "@/App";的那个@的时候，安装

npm install @craco/craco@alpha -D

craco-less 插件是用来让 Create React App 项目支持 LESS 文件的预处理器，通常用于集成 LESS 和定制主题。它简化了在 CRA 项目中使用 LESS 的配置，使开发者可以通过 CRACO 来修改 Webpack 配置，而无需弹出 CRA 配置。 如果你打算在项目中使用 LESS 样式，并希望对主题做自定义（如 Ant Design 主题定制），这个插件会非常有用。npm i craco-less@2.1.0-alpha.0

4. css样式初始化

npm install normalize.css

5. 路由

npm install react-router-dom

6.redux

建议用这种方式：@reduxjs/toolkit：npm install @reduxjs/toolkit react-redux 两种方式

1.在store.js新建modules,里面应该有4个文件

2.直接新建一个文件，

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

const homeSlice = createSlice({
    name: "home",
    initialState: {
        currentPage: 1
    },
    reducers: {

    }
})

export const {} = homeSlice.actions

export default homeSlice.reducer

最后新建一个index.js

import { configureStore } from "@reduxjs/toolkit"
import homeReducer from "./modules/home"
import entireReducer from "./modules/entire"

const store = configureStore({
  reducer: {
    home: homeReducer,
    entire: entireReducer
  }
})

export default store

注意：异步

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
export const fetchHomeDataAction = createAsyncThunk("fetchdata", async (params, {dispatch}) => {
    console.log(params)
    getHomeGoodPriceData().then(res => {
        dispatch(changeGoodPriceInfoAction(res))
      })
})

调用

  useEffect(() => {
    dispatch(fetchHomeDataAction("xxxx"))
  }, [dispatch])

7. axios

npm install axios

封装index.js

import { BASE_URL, TIMEOUT } from "./config"

class HYRequest {
  constructor(baseURL, timeout) {
    this.instance = axios.create({
      baseURL,
      timeout
    })

    this.instance.interceptors.response.use((res) => {
      return res.data
    }, err => {
      return err
    })
  }

  request(config) {
    return this.instance.request(config)
  }

  get(config) {
    return this.request({ ...config, method: "get" })
  }

  post(config) {
    return this.request({ ...config, method: "post" })
  }
}


export default new HYRequest(BASE_URL, TIMEOUT)

8.样式，css in js

npm i styled-components

import styled from "styled-components"
export const HeaderWrapper = styled.div`
  display: flex;
  align-items: center;
  height: 80px;
  border-bottom: 1px solid #eee;
`

9.内嵌css

  const obj = {}
  const s = styleStr.toLowerCase().replace(/-(.)/g, function (m, g) {
    return g.toUpperCase();
  }).replace(/;\s?$/g,"").split(/:|;/g)
  for (var i = 0; i < s.length; i += 2) {
    obj[s[i].replace(/\s/g,"")] = s[i+1].replace(/^\s+|\s+$/g,"")
  }

  return obj
}

export default styleStrToObject

10.props

<SectionHeader title={discountInfo.title} subtitle={discountInfo.subtitle}/>

import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { HeaderWrapper } from './style'

const SectionHeader = memo((props) => {
  const { title, subtitle } = props

  return (
    <HeaderWrapper>
      <h2 className='title'>{title}</h2>
      {subtitle && <div className='subtitle'>{subtitle}</div>}
    </HeaderWrapper>
  )
})

SectionHeader.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string
}

export default SectionHeader

11.mui样式

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components

npm install @emotion/react @emotion/styled

版本： "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/material": "^5.11.16", "styled-components": "^5.3.5"

12.atnd样式

npm i antd

import "antd/dist/antd.less"