react类组件移动端项目

最新推荐文章于 2025-09-18 03:33:44 发布

原创最新推荐文章于 2025-09-18 03:33:44 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

本文介绍了React项目的初始化、配置优化，包括使用`react-app-rewired`定制webpack配置，实现反向代理，按需加载antd-mobile，以及创建自定义组件。还涉及到Redux的状态管理和Mock数据的使用，同时探讨了组件的样式重置、路由处理和搜索功能的实现。此外，还讨论了如何进行git版本控制和项目部署。

npm i -D customize-cra react-app-rewired http-proxy-middleware

npm i -S redux react-redux redux-thunk styled-components immutable redux-immutable react-router-dom@5 react-transition-group axios

清理创建好的项目中不需要的文件及文件夹

修改public/index.html
在src目录下创建根组件App.jsx与项目入口文件index.js
配置装饰器支持

// 在当前项目根目录下面创建一个名称为config-overrides.js文件，对webpack进行配置

const {
    override,
    addDecoratorsLegacy,
    addWebpackAlias
} = require("customize-cra");
const path = require("path");

module.exports = override(
    addDecoratorsLegacy (),
    // 添加webpack别名
    addWebpackAlias({
        ["@"]: path.resolve("./src"),
    })
);

修改package.json中的脚本命令为如下

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

windows这样写就行,苹果本下插件

配置反向代理

// 在src目录下创建一个名称为setupProxy.js文件，提前为后续接口设置反向代理

const { createProxyMiddleware: proxy } = require("http-proxy-middleware");
module.exports = app => {
    app.use(
        "/api",
        proxy({
            target: "http://localhost:9000",
            changeOrigin: true,
	   pathRewrite:{
	      "^/api": ""
	   }
        })
    )
}

项目已在本机中初始化完成，需要在远程仓库中创建git仓库
本机把项目初始化一个git仓库

git init

git add .

git commit -m “说明”

git remote add origin https://远程地址

git push -u origin master(分支)

提交到远程后，在本机开始用分支来进行，不要在master中进行开发，切记

npm i -S antd-mobile

3,v2版本

Ant Design Mobile | A Mobile Design Specification

5, 按需

npm i -D babel-plugin-import

// 按需加载  tree-shaking
npm i -D babel-plugin-import

//  config-overrides.js 用于修改默认配置
const { override, fixBabelImports } = require('customize-cra')

module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',
   })
)