【React】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd

繁星召唤

已于 2022-08-10 15:36:12 修改

阅读量3.2k

点赞数 2

分类专栏： react配置 ts+react 文章标签： react.js 前端前端框架

于 2022-05-04 11:27:15 首次发布

本文链接：https://blog.csdn.net/weixin_42582523/article/details/124567375

版权

react配置同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

ts+react

8 篇文章 0 订阅

订阅专栏

一、通过create-react-app脚手架创建项目

npx create-react-app testproject

在vscode中打开项目，可以看到顺利生成了react项目,此时说明成功创建了react项目的雏形

在项目根目录下，运行npm run start，成功启动项目

npm run start

二、配置路由

npm i react-router-dom@5.2.0 react-router-config @types/react-router-config @types/react-router-dom
react-router@5.2.0 -S

src目录下创建views文件夹，views内创建Home，Contact，About，Navbar四个js文件，其中Navbar用来控制路由，其他三个页面用来展示

Home:

import React from "react"

export default function Home() {
  return (
    <div className="home">
      <div className="container">
        <h3 className="center"> Home页面</h3>
        <p>欢迎来到首页</p>

        </div>
    </div>
  )
}

Contact:

import React from "react"

export default function Contact() {

  return (
    <div className="contact">
      <div className="container">
        <h3 className="center"> Contact页面</h3>
        <p>欢迎来到联系我们页面！</p>

      </div>
    </div>
  )
}

About:

import React from "react"

export default function About() {
  return (
    <div className="about">
      <div className="container">
        <h3 className="center"> About页面</h3>
        <p>欢迎来到关于我们页面！</p>
      </div>
    </div>
  )
}

Navbar:

import React from "react"

export default function Navbar() {
  return (
    <nav className="nav-wrapper">
      <div className="list">
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  )
}

src目录下创建routes文件夹，同时创建index.js，使用RouteConfig对路由进行统一管理

// 导入路由组件
import Home from "./../views/home"
import About from "./../views/about"
import Contact from "./../views/contact"


const routes = [
  { path: "/", component: Home, exact: true },
  { path: "/about", component: About, exact: true },
  { path: "/contact", component: Contact, exact: true },
]

export default routes;

App.js中引入Route，Navbar和路由管理工具

import "./App.css"
// 引入路由导航组件
import Navbar from "./views/navbar"
// 引入routes组件
import routes from "./routes"
// 引入路由管理工具
import { renderRoutes } from "react-router-config"


function App() {
  return (
    <div className="App">
      <Navbar />
      {renderRoutes(routes)}
    </div>
  )
}

export default App

根目录index.js中这样定义

import React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import { BrowserRouter as Router } from "react-router-dom"


const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>

      <Router>
        <App />
      </Router>

  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

至此，路由配置就完成了

有点难看是吧，我们给App添加一点样式

* {
  padding: 0;
  margin: 0;
}

h1 {
  text-align: center;
  font-size: 45px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(6, 0, 32);
  padding: 40px;
}

.list {
  display: flex;
  justify-content: center;
  width: 100%;
}

.list ul li {
  list-style: none;
  margin: 42px;
  text-align: center;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 14px 25px;
  background-color: transparent;
  border: 2px solid rgb(12, 0, 66);
}

a:hover {
  background-color: rgb(12, 0, 66);
  color: rgb(255, 255, 255);
}

三、配置less

第一种方式：暴露配置的方式

npm run eject

此时项目多出了config文件夹

安装less和less-loader

npm i less less-loader -S

仿照sass修改config目录下的webpack.config.js：

1. 找到config目录下的webpack.config.js文件，在50-70行之间有个cssRegex，在此处添加

// less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2. 在webpack.config.js文件500多行有个sassRegex，模仿写对应的lessRegex

// less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            // less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

3.重新启动项目，创建less文件并引入

样式生效，说明less配置成功

这种方式有个不好的地方，就是会产生很多不必要的js文件，且这个操作不可逆，等到后期项目上传时造成代码冗余，不好维护。

第二种方式：找到config.js文件直接修改

1.找到文件路径：node_modules\react-scripts\config\webpack.config.js

2.在60-80行之间有个cssRegex，在此处添加

// less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

3. 在550多行有个sassRegex，模仿写对应的lessRegex

// less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                "less-loader"
              ),
              sideEffects: true,
            },
            // less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                "less-loader"
              ),
            },

3.重新启动项目，创建less文件并引入

.about{
  .container{
    font-size: 22px;
    p{
      color: red;
    }
  }
  }

样式生效，说明less配置成功

四、配置sass

通过create-react-app创建的react项目，其实是默认已经配置好sass的，所以我们先尝试在项目中引入sass文件

会发生如下报错：

解决方法：执行下面的命令

npm i sass -s

然后重新运行即可，样式生效

五、配置axios和反向代理

1. 安装axios 和 http-proxy-middleware（后面反向代理会用到）

npm i axios http-proxy-middleware -s

2. 在src目录下创建api文件夹，然后创建 index.js 和 request.js 文件

//index.ts

import { Service } from "./request"
//获取汽车列表
export function getCarList(config) {
  const params = new URLSearchParams()
  params.append("page", config.page)

  return Service({
    url: "./api/getCarList",
    data: params,
  })
}


//request.ts
import axios from "axios"

export const Service = axios.create({
  timeout: 3000, //延迟时间
  method: "POST",
  headers: {
    "pc-token": "4a82b23dbbf3b23fd8aa291076e660ec",
    "content-Type": "application/x-www-form-urlencoded",
  },
})

//请求拦截
Service.interceptors.request.use((config) => config)

//响应拦截
Service.interceptors.response.use(
  (response) => response.data,
  (err) => console.log(err)
)

3. 配置代理，可以访问到后台的服务器地址

在src文件夹中创建setupProxy.js内容配置如下

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function(app) {
  app.use('/api', createProxyMiddleware({ 
    target: 'http://www.ibugthree.com/oldcar/',//后台服务器地址
    changeOrigin: true,
    pathRewrite: {
    '^/api': '',
    },}))
};

在新版本中已经默认设置代理的文件夹名为setupProxy.js

到这里所有配置就基本完成，在组件中调用即可

import React from "react"
import "./contact.scss"
import { getCarList } from "../api"


export default function Contact() {
  const getList = async () => {
    const res = await getCarList({ page: "1" })
    console.log(res)
  }

  return (
    <div className="contact">
      <div className="container">
        <h3 className="center"> Contact页面</h3>
        <p>欢迎来到联系我们页面！</p>
        {/* 点击事件调用 */}
        <button onClick={getList}>获取数据</button>
      </div>
    </div>
  )
}

六、配置redux

1. 安装redux

npm i redux react-redux -s

2.在src路径下创建store文件夹，文件假中创建两个文件reduce.js和index.js两个文件

先定义store

import { createStore } from "redux"
import reducer from "./reducer"
const store = createStore(reducer)
export default store

然后定义reduce文件

const common = {
  name: "张三123",
  age: 18,
}

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = common, action) => {
  console.log("action", action) // 使用dispatch调用action中的方法会触发更新state 获取到action之后根据type的不同来更改不同的值    类似于action:{type: "SET_AGE", age: "1"}
  switch (action.type) {
    case "SET_AGE":
      return {
        ...state,
        age: state.age + action.n,
      }
    case "SET_NAME":
      return {
        ...state,
        name: action.name,
      }
    default:
      return state
  }
}

3. 在主入口文件index.tsx中进行redux的连接和store的引用

import React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import { BrowserRouter as Router } from "react-router-dom"
//引入rootReducer组件
import { Provider } from "react-redux"
import store from './store/index'

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    {/* provider组件将所有的组件包裹起来，用绑定属性的形式绑定store到组件中 */}
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

4.组件中使用redux

1.引入redux中的useDispatch, useSelector

2.使用useDispatch调用action修改数据，使用useSelector获取数据

import React, { useRef } from "react"
import "./abou.less"
// redux
import { useDispatch, useSelector } from "react-redux"

export default function About() {
  const dispatch = useDispatch()
  const name = useSelector((state) => state.name)
  const age = useSelector((state) => state.age)
  const inputRef = useRef()
  const changeName = () => {
    dispatch({
      type: "SET_NAME",
      name: inputRef.current.value,
    })
  }
  const changeAge = () => {
    dispatch({
      type: "SET_AGE",
      n: 1,
    })
  }

  return (
    <div className="about">
      <div className="container">
        <h3 className="center"> About页面</h3>
        <p>欢迎来到关于我们页面！</p>
      </div>
      <div>
        <p>名字是：{name}</p>
        <input ref={inputRef} type="text" />
        <button onClick={changeName}>修改姓名</button>
        <p>年龄是：{age}</p>
        <button onClick={changeAge}>修改年龄</button>
      </div>
    </div>
  )
}

七、配置antd

1.在项目中安装antd-mobile 使用

npm i antd -S
// 或
yarn add antd

2.在项目中Home.js文件中导入要使用的组件

import React from "react"
// 引入antd
import { Button } from 'antd';

export default function Home() {
  return (
    <div className="home">
      <div className="container">
        <h3 className="center"> Home页面</h3>
        <p>欢迎来到首页</p>
        <Button type="primary">Button</Button>
      </div>
    </div>
  )
}

完成之后，你就能在react项目使用antd-mobile的样式文件进行构建自己的页面了

至此，react项目创建和配置完成

如有问题，请及时沟通

繁星召唤

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
【React】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd

【React+TS】从零开始搭建react+router+redux+less+sass+axios反向代理+antd，如有问题，请及时留言，看到后会及时解答的
复制链接

扫一扫