AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-03-08 179
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 从零开始搭建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';
  1. 删除node_modules文件夹，并重新执行npm install
  2. 重新执行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
  1. 配置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"
  },
  1. 创建.env ，.env.development ，.env.production ，.env.uat ，.env.sit，
    .env
REACT_APP_ENV=development
  1. .env.development
REACT_APP_ENV=development
  1. .env.production
REACT_APP_ENV=production
  1. .env.uat
REACT_APP_ENV=uat
  1. .env.sit
REACT_APP_ENV=sit
  2. 项目中获取当前环境变量
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
  1. src目录下创建views文件夹，views内创建页面组件，如Index

  2. 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;

  1. index.tsx引入所有的功能模块路由配置，做统一暴露
import CommonRouter from "./CommonRouter";
const routerConfig: any = [...CommonRouter]
export default routerConfig;
  2. 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;
  1. 根目录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();

  1. 至此，路由配置就完成了

步骤5：配置less

  1. 暴露配置
npm run eject
  1. 此时项目多出了config文件夹
  2. 安装less和less-loader@5.0.0 (less-loader必须安装指定版本5.0.0)
npm install less less-loader@5.0.0 -S
  1. 仿照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$/;
  1. ②修改 getStyleLoaders 函数，添加代码
{
  loader: require.resolve('less-loader'),
  options: lessOptions,
},
  1. ③搜索 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'
  ),
},
  1. 重新启动项目，创建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
  1. 创建redux核心模块
    如以下示例：
├── src
│   └── redux
│       ├── action
│       │   ├── TestAction.tsx
│       └── asyncAction
│       │   ├── AsyncTestAction.tsx
│       └── reducer
│       │   ├── reducer.tsx
│       │   └── TestReducer.tsx
│       └── store.tsx

  1. 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;
  1. reducer~reducer.tsx // 创建管理所有reducer的配置
import { combineReducers } from 'redux';
// 引入其他reducer
import TestReducer from './TestReducer';
// 将所有引入的reducer合并成一个reducers,暴露出去
export default combineReducers({
  TestReducer,
});
  1. 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
    }
  }
}
  1. 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);
  }
}
  1. store.tsx // 配置store
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer/reducer';
export default createStore(reducer, applyMiddleware(thunk));
  1. 入口文件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();
  2. 组件中使用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

文章标签：
前端开发
JavaScript
测试技术
关键词：
React Native typescript项目
React Native typescript
react TypeScript
TypeScript项目
React Native redux
Boale_H
目录
相关文章
陌陌谣
|
24天前
|
设计模式 监控 JavaScript
TypeScript 在大型项目内网管理监控软件中的结构优化
本文探讨了 TypeScript 在大型项目内网管理监控软件中的结构优化，包括模块划分与组织、接口与抽象类的使用以及依赖注入与控制反转的设计模式，通过具体代码示例展示了这些技术的应用，提高了代码的可读性、可维护性和灵活性。
陌陌谣
32 3
Star时光
|
30天前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石：深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石：深入理解React与Redux
Star时光
31 0
游客zi3qmblbcdexu
|
22天前
|
前端开发 JavaScript
手敲Webpack 5：React + TypeScript项目脚手架搭建实践
手敲Webpack 5：React + TypeScript项目脚手架搭建实践
游客zi3qmblbcdexu
37 6
dufadayang
|
29天前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
dufadayang
30 3
众所周知
|
29天前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript：为何TypeScript成为大型项目的首选
JavaScript与TypeScript：为何TypeScript成为大型项目的首选
众所周知
28 1
一缕微风绕指柔
|
1月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
一缕微风绕指柔
42 3
代码bug生产队
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
代码bug生产队
39 1
代码bug生产队
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
代码bug生产队
42 1
光明顶阳顶天
|
1月前
|
存储 JavaScript 前端开发
如何在 React Hooks 中使用 Redux？
【10月更文挑战第1天】
光明顶阳顶天
45 2
九月天空
|
1月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
九月天空
32 1

热门文章

最新文章

  • 1
    TypeScript 函数
  • 2
    攀爬TS之路(六) 类型别名、字面量类型、枚举
  • 3
    TypeScript 泛型
  • 4
    nodejs 不支持 typescript （...paramName:any[]）剩余参数。变相支持方式。
  • 5
    推荐 7 个学习 TypeScript 的宝库，2021 学 TS 看这篇就够了！
  • 6
    TypeScript的概要和简介
  • 7
    TypeScript 真香，说说它的优缺点
  • 8
    TypeScript 类型体操，无非是语法过度嵌套而已
  • 9
    TypeScript-类装饰器和TypeScript-defineProperty
  • 10
    TypeScript入门之数据类型
  • 1
    React useMemo钩子指南：优化计算性能
    93
  • 2
    掌握React中的useCallback：优化性能的秘诀
    93
  • 3
    深入理解React中的useReducer：管理复杂状态逻辑的利器
    207
  • 4
    掌握React中的useContext：访问父组件数据的神奇技巧
    149
  • 5
    掌握React中的useEffect：函数组件中的魔法钩子
    149
  • 6
    深入理解React中的useState：函数组件状态管理的利器
    297
  • 7
    React Hooks：让你轻松掌握函数组件的状态与管理
    121
  • 8
    React中渲染html结构---dangerouslySetInnerHTML
    54
  • 9
    vue中nextTick函数和react类似实现
    218
  • 10
    探索React中的类组件和函数组件
    70

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端开发CSS基础
  • jQuery开发教程

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 对象和接口-1：对象类型
  • 函数类型-1：基本语法
  • 常见类型-1：空，联合，枚举
  • 常见类型-2：数组和元组
  • 语言入门-2：基本类型
  • 语言入门-1：环境构建
    • 下一篇
    阿里云OSS设置跨域访问