从零开始搭建react+typescript+antd+redux+less+vw自适应项目

已于 2022-09-07 13:57:50 修改
阅读量1.1k 收藏 3
点赞数
分类专栏： 项目框架搭建 文章标签： react redux 前端 antd typescript
于 2021-08-05 18:47:16 首次发布
Edited by Boale_H （博哥的二进制世界）
本文链接：https://blog.csdn.net/Boale_H/article/details/119353627
版权

从零开始搭建react+typescript+antd+redux+less+vw自适应项目

步骤1：通过create-react-app脚手架创建项目

npx create-react-app react-template --template typescript

在这里插入图片描述

在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形
在这里插入图片描述
在项目根目录下，运行npm run start，成功启动项目

npm run start

在这里插入图片描述

步骤2：引入antd

npm install antd -S

安装完成之后，再次运行npm run start启动项目，发现报错了，提示Could not find a declaration file for module 'react'.
在这里插入图片描述
这实际上是create-react-app 4.x版本的bug
解决方案如下：

  1. 在项目根目录创建react-app-env.d.ts文件

    /// <reference types="react-scripts" />
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

// declare module 'react-imageview';

  2. 删除node_modules文件夹，并重新执行npm install

  3. 重新执行npm run start，项目成功运行
    在这里插入图片描述

接下来我们继续引入antd
在App.tsx中添加import 'antd/dist/antd.css';,同时引入所需要的antd组件，如Button

import React from 'react';
import './App.css';
import 'antd/dist/antd.css';
import { Button } from 'antd';

function App() {
  return (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;

可以看到效果：
在这里插入图片描述
此时antd就引入完成了

步骤3：配置不同环境的打包命令，如测试环境、生产环境

  1. 安装cross-env

    npm i cross-env -D

  2. 配置package.json命令
    在这里插入图片描述

    "scripts": {
    "serve": "cross-env REACT_APP_ENV=development node scripts/start.js",
    "build": "cross-env REACT_APP_ENV=production node scripts/build.js",
    "uat": "cross-env REACT_APP_ENV=uat node scripts/build.js",
    "sit": "cross-env REACT_APP_ENV=sit node scripts/build.js"
  },

  3. 创建.env ，.env.development ，.env.production ，.env.uat ，.env.sit，
    .env

    REACT_APP_ENV=development

    .env.development

    REACT_APP_ENV=development

    .env.production

    REACT_APP_ENV=production

    .env.uat

    REACT_APP_ENV=uat

    .env.sit

    REACT_APP_ENV=sit

    在这里插入图片描述

  4. 项目中获取当前环境变量

    console.log(process.env.REACT_APP_ENV)

步骤4：配置路由

  1. 安装react-router-dom和@types/react-router-dom

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

  2. src目录下创建views文件夹，views内创建页面组件，如Index
    在这里插入图片描述

  3. src目录下创建router文件夹，文件夹下配置各个功能模块的路由，同时创建index.tsx，对各个功能模块的路由做统一的引入和暴露
    功能模块CommonRouter.tsx:

    import { lazy } from "react";

const Index = lazy(() => import("../views/Index/Index"));

const CommonRouter: any = [
  {
    path: "/",
    component: Index,
    exact: true,
    title: "首页",
  },
];

export default CommonRouter;

    在这里插入图片描述
    index.tsx引入所有的功能模块路由配置，做统一暴露

    import CommonRouter from "./CommonRouter";

const routerConfig: any = [...CommonRouter]

export default routerConfig;

    在这里插入图片描述

  4. App.tsx中引入Route和自定义的路由配置

    import React, { Suspense, Component, Fragment } from "react";
import { Route, Switch, Redirect, withRouter as realWithRouter } from "react-router-dom";
// 这里的是路由配置文件
import routes from "./router/index";
import 'antd/dist/antd.css';

type StateType = {
  [propName: string]: any;
};
type PropType = {
  [propName: string]: any;
};
interface App {
  state: StateType;
  props: PropType;
}

// 获取路由信息
const withRouter: any = realWithRouter;
@withRouter
class App extends Component {
  render() {
    return (
      <Fragment>
        <Suspense fallback={<div></div>}>
          <Switch>
            {routes.length > 0 &&
              routes.map((route: any) => {
                //遍历路由数组
                const { path, component: C, exact } = route;
                return (
                  <Route
                    exact={exact}
                    key={path}
                    path={path}
                    render={(props: any) => {
                      return <C {...props} />;
                    }}
                  />
                );
              })}
            {/* 默认进入/时自动匹配到/ */}
            <Redirect exact from="/" to={"/"} />
            {/* 默认无效路径时自动匹配到首页 */}
            <Redirect to="/" />
          </Switch>
        </Suspense>
      </Fragment>
    );
  }
}

export default App;

  5. 根目录index.tsx中这样定义

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from "react-router-dom";


ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

// 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();

    在这里插入图片描述

    至此，路由配置就完成了
    在这里插入图片描述

步骤5：配置less

  1. 暴露配置

    npm run eject

    此时项目多出了config文件夹
    在这里插入图片描述

  2. 安装less和less-loader@5.0.0 (less-loader必须安装指定版本5.0.0)

    npm install less less-loader@5.0.0 -S

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

    ①搜索 cssRegex ，找到后添加两行代码,添加less相关正则
    在这里插入图片描述

    // style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

    ②修改 getStyleLoaders 函数，添加代码
    在这里插入图片描述

    {
  loader: require.resolve('less-loader'),
  options: lessOptions,
},

    ③搜索 cssRegex ，在 css 配置下添加 less 配置在这里插入图片描述

    // Opt-in support for LESS (using .less extensions).
// By default we support LESS Modules with the
// extensions .module.less
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 1,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using LESS
// using the extension .module.less
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 1,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

  4. 重新启动项目，创建less文件并引入
    在这里插入图片描述
    在这里插入图片描述
    样式生效，说明less配置成功
    在这里插入图片描述

步骤6：配置sass

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

在这里插入图片描述
在这里插入图片描述
样式生效，说明sass配置成功
在这里插入图片描述

步骤7：配置react-redux

  1. 安装react-redux、 @types/react-redux、 redux-thunk、 @types/redux-thunk

    npm install react-redux @types/react-redux redux-thunk @types/redux-thunk -S

  2. 创建redux核心模块
    如以下示例：

    ├── src
│   └── redux
│       ├── action
│       │   ├── TestAction.tsx
│       └── asyncAction
│       │   ├── AsyncTestAction.tsx
│       └── reducer
│       │   ├── reducer.tsx
│       │   └── TestReducer.tsx
│       └── store.tsx

    在这里插入图片描述

    reducer~TestReducer.tsx // 创建TestReducer

    interface StateType {
  name: string;
  age: number;
}

const commonState: StateType = {
  name: '',
  age: 0,
};

const TestReducer = (state = commonState, action: any): any => {
  switch (action.type) {
    case "CHANGE_NAME":
      return {
        ...state,
        name: action.payload.name,
      };
    case "CHANGE_AGE":
      return {
        ...state,
        age: action.payload.age,
      };
    case "ASYNC_CHANGE_NAME":
      return {
        ...state,
        addressObj: action.payload.name,
      };
    default:
      return state;
  }
};

export default TestReducer;

    reducer~reducer.tsx // 创建管理所有reducer的配置

    import { combineReducers } from 'redux';
// 引入其他reducer
import TestReducer from './TestReducer';

// 将所有引入的reducer合并成一个reducers,暴露出去
export default combineReducers({
  TestReducer,
});

    action~TestAction.tsx // 创建同步更改state的方法

    export const changeName = (name: string) => {
  return {
    type: 'CHANGE_NAME',
    payload: {
      name
    }
  }
}

export const changeAge = (age: number) => {
  return {
    type: 'CHANGE_AGE',
    payload: {
      age
    }
  }
}

    asyncAction~AsyncTestAction.tsx // 创建异步更改state的方法

    export const asyncChangeName = () => {
  return async (dispatch: any) => {
    const countDown: Promise<any> = new Promise((resolve: any, reject: any) => {
      setTimeout(() => {
        resolve({
          name: '模拟网络请求获取到的name'
        })
      }, 1000)
    })
    const data: any = await countDown;
    const params: any = {
      type: 'ASYNC_CHANGE_NAME',
      payload: {
        name: data.name
      }
    };
    dispatch(params);
  }
}

    store.tsx // 配置store

    import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import reducer from './reducer/reducer';

export default createStore(reducer, applyMiddleware(thunk));

  3. 入口文件index.tsx配置redux

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from "react-router-dom";

import { Provider } from 'react-redux';
import store from './redux/store';

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <Router>
        <App />
      </Router>
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

// 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，如在App.tsx中使用redux:

    import React, { Suspense, Component, Fragment } from "react";
// 这里的是路由配置文件
import { Route, Switch, Redirect, withRouter as realWithRouter } from "react-router-dom";
import routes from "./router/index";

// 公共样式
import 'antd/dist/antd.css';
import './assets/style/public.less';

// redux
import { changeName, changeAge } from "./redux/action/TestAction";
import { asyncChangeName } from "./redux/asyncAction/AsyncTestAction";
import { connect as realConnect } from "react-redux";

type StateType = {
  [propName: string]: any;
};
type PropType = {
  [propName: string]: any;
};
interface App {
  state: StateType;
  props: PropType;
}

// 获取redux
const mapStateToProps = (state: any) => {
  return {
    state,
  };
};
const connect: any = realConnect;

// 获取路由信息
const withRouter: any = realWithRouter;
@withRouter
@connect(mapStateToProps, { changeName, changeAge, asyncChangeName })
class App extends Component {
  componentDidMount() {
    // 调用redux中指定reducer的同步action和异步action方法
    this.props.changeName('张三');
    this.props.changeAge(25);
    this.props.asyncChangeName();
    // 获取redux中指定reducer的state
    console.log(this.props.state.TestReducer);
  }

  render() {
    return (
      <Fragment>
        <Suspense fallback={<div></div>}>
          <Switch>
            {routes.length > 0 &&
              routes.map((route: any) => {
                //遍历路由数组
                const { path, component: C, exact } = route;
                return (
                  <Route
                    exact={exact}
                    key={path}
                    path={path}
                    render={(props: any) => {
                      return <C {...props} />;
                    }}
                  />
                );
              })}
            {/* 默认进入/时自动匹配到/ */}
            <Redirect exact from="/" to={"/"} />
            {/* 默认无效路径时自动匹配到首页 */}
            <Redirect to="/" />
          </Switch>
        </Suspense>
      </Fragment>
    );
  }
}

export default App;

    在这里插入图片描述

步骤8：自适应

如有配置自适应的需求，可参考这篇文章移动端自适应解决方案vw(以react为例)

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

文章参考

https://www.cnblogs.com/gqx-html/p/13219422.html

Boale_H
关注
专栏目录
推荐优秀开源项目：React-VW-Layout - 响应式布局解决方案
gitblog_00091的博客
04-01 463
推荐优秀开源项目：React-VW-Layout - 响应式布局解决方案 项目地址:https://gitcode.com/gaohan1994/react-vw-layout React-VW-Layout 是一个基于 React 的轻量级组件库，旨在提供一种简单、灵活的响应式页面布局方案。它的核心理念是利用 vw（viewport width）单位，以实现像素完美的跨设备适配，为移动优先的设计...
搭建react项目，react+ts，react+typescript
tian6632的博客
09-01 773
搭建react+ts，react+typescript，过程、问题，和解决方式
React+快速入门学习
最新发布
集技术与才华于一体，个人博客网站：nanshuo.icu，公众号：烁烁南光
07-24 712
使用前端开发工具 VSCode 来学习 React 简单快速入门
react+typescript+less+本地代理项目搭建
wangshang1320的博客
01-29 2950
前置： ps:版本最好差别不要太大，不同版本可能导致不同的问题,这个很重要！很重要！很重要！ 我的版本： create-react-app 5.0.0 typescript 4.5.5 react 17.0.2 node 14.17.0 1. 全局安装create-react-app. 版本 5.0.0 2.创建react项目 1.随便找一个项目文件夹运行npx create-react-app my-app 运行后目录结构： 2....
React实现窗口自适应、自适应防抖、memo 缓存优化、监听元素尺寸变化
luemeon的博客
09-29 541
对父组件暴露获取 ECharts 实例的方法，让父组件可直接通过实例调用原生函数。作为一个全局通用组件，在 props 不变的情况下，跳过重新渲染。
React+TS从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@（写到redux了）
mineone的博客
07-01 252
一、通过create-react-app脚手架创建项目 npx create-react-app 项目名 --template typescript 在vscode中打开项目，可以看到顺利生成了react项目中有文件的后缀为tsx,此时说明成功创建了react+typescript项目，然后在命令提示符（也就是cmd打开的黑框）中cd+项目名进入项目，输入npm start即可打开项目。二、配置路由 先下载依赖npm i react-router-dom@5.2.0 react-router-config
react-typescript：具有TypescriptAntd的前端项目。 webpack5 +React路由器4 + antd + typescript4 + grahql
02-05
React打字稿 项目概况 使用蚂蚁金服的Antnt开发的一套后台管理系统，主要用到了react，typescript，antd，mobx等技术，使用webpack4打包构建，包含React16的代码拆分等新特性。 项目主要技术结构 React 打字稿 安特 暴民 webpack4 React路由器4 安装 在终端下操作 项目地址：（ git clone ） git clone git@github.com:xpioneer/react-typescript.git 安装node_modules依赖yarn yarn #in your command terminal 运行 启动开发服务
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
aoliei的博客
03-17 1945
一、通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形 在项目根目录下，运行npm run start，成功启动项目 npm start 二、配置路由 npm i react-router-dom@5.2.0 react-ro..
vite+react+Typescript+andt Design实现管理系统（一）
weixin_43963309的博客
07-11 411
二.安装react项目需要的依赖 三.使用eslint 规范代码风格 参考：AlloyTeam ESLint 规则
React(hook)+Typescript+Antd 实现一个可配置的后台管理系统
u013620259的博客
07-09 4579
1.效果预览地址 点击这里 2.应用到的技术栈 React（16.8）+ Typescript（3.5）+Antd（3.2）+redux + sessionStorage + less 3.搭建环境 1.安装官网react脚手架的typescript版本 $ npx create-react-app my-app --typescript $ # 或者 $ yarn create reac...
ts-redux-toolkit:TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router
04-04
ts-react-redux-toolkit TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router 还原 执照 新的BSD许可证
react typescript + antd 框架代码示例
08-12
react typescript + antd 前端框架, 入门示例demo。写的一个简单的首页页面，展示下component的创建，route创建，页面跳转，carco的主题定制，类似helloworld，使用typescript所写
react+typescript+umi+dva+antd
博哥的二进制世界
06-18 2950
react+umi+dva背景创建一个umi应用umi应用的路由配置路由路由配置工程化约定式路由路由跳转安装插件集@umijs/preset-reactumi+antdumi+dva 背景 React 前端三大框架之一。 Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：”dva 是 react 和 redux 的最佳实践”。 Antd 是阿里的一套开箱即用的中台前端/设计解决方案，UI框架。 Umi 一套可插拔的企业级 react 应用框
react 自适应插件
weixin_42327537的博客
05-16 239
【代码】react 自适应插件。
react+typescript项目构建
feinifi的博客
01-10 1785
react项目构建可以很简单，但是如果是结合typescript，其实也不是很麻烦，官网也有很明确的说明。有两种办法： 1、直接构建带有typescript的react项目，我们需要增加额外的参数，模版不能使用默认的cra-template。而是使用cra-template-typescript。 npx create-react-app tsreactdemo --template typescript 最早，我们创建typescript的react项目命令好像直接就是np...
react 自适应布局
dayexiaofan的博客
02-24 6581
head.js import {Component} from 'react' import './head.css' import React from "react"; export default class headTop extends Component{ render(){ return( &lt;div classNam...
React+Typescript+antd 搭建项目
m0_51300418的博客
04-29 685
React+Typescript+antd 搭建项目 初始化项目 开发环境: node: v14.15.0 yarn: 1.22.10 npx: 7.8.0 editor: visual studio code 使用cra进行项目初始化 npx create-react-app my-app --template typescript 如果已经使用cra创建过项目, 执行: npm install --save typescript @types/node @types/react @types/re
react自适应布局
A12536365214的博客
12-24 791
在这个例子中，使用了 Ant Design 的 `Layout` 组件，其中 `Header`、`Content`、`Footer` 分别代表页面的头部、主要内容区域和底部。在这个例子中，`.container` 使用了 Flexbox 布局，`.sidebar` 和 `.main-content` 分别占据了 `.container` 中的 1/3 和 2/3 的宽度。在 React 中实现自适应布局可以通过使用 CSS 的弹性布局（Flexbox）或者栅格系统来实现。/* 占据剩余空间的1部分 */
react+typescript+antd脚手架搭建
weixin_33701294的博客
03-11 3092
前段时间研究了一下react+typescript开发方式，再加上antd，开发感受还是挺不错的。本篇文章主要讲下在官方推荐的脚手架的基础上搭建脚手架所遇到的问题。 一开始使用的是create-react-app-typescript脚手架（此方案已废弃） npx create-react-app my-app --scripts-version=react-scripts-ts cd my-...
React+TypeScript快速搭建与路由整合指南
该文档是关于使用React和TypeScript搭建应用...这个教程覆盖了React应用的基础搭建、TypeScript的使用、项目结构解析、热部署的启用以及`react-router-dom`的集成，为初学者提供了一个完整的React+TypeScript项目起点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值