4.初始化React工程项目与整体架构

书诚小驿2024/10/09前端知识库React

一、脚手架创建React项目

1、使用 create-react-app 创建 React 应用

npx create-react-app react-ts-project --template typescript

npm start  // 启动开发服务器
npm run build  // 构建生产环境
npm run test  // 运行测试
npm run eject  // 暴露配置

cd react-ts-project进入项目目录
npm start启动开发服务器

2、安装依赖及第三方模块

脚手架安装依赖

安装依赖

npm install

安装第三方模块

npm i axios sass antd @ant-design/icons react-router-dom  // 前端框架
npm i redux react-redux redux-persist @reduxjs/toolkit  // 状态管理

axios封装

安装 axios

npm i axios

创建/src/utils/http.ts

import axios from 'axios'
import type { AxiosRequestConfig, AxiosResponse } from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000/',
  timeout: 5000
});

instance.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
});

instance.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  return Promise.reject(error);
});

interface Data {
  [index: string]: unknown
}

interface Http {
  get: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
  post: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
  put: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
  patch: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
  delete: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
}

const http: Http = {
  get(url, data, config){
    return instance.get(url, {
      params: data,
      ...config
    })
  },
  post(url, data, config){
    return instance.post(url, data, config)
  },
  put(url, data, config){
    return instance.put(url, data, config)
  },
  patch(url, data, config){
    return instance.patch(url, data, config)
  },
  delete(url, data, config){
    return instance.delete(url, {
      data,
      ...config
    })
  }
}

export default http;

src/assets/styles和src/assets/images引入全局样式和图片

创建src/assets/styles/index.scss目录

@import "./reset.scss";
@import "./common.scss";
@import "./iconfont.scss";

在src/index.tsx中引入

import './assets/styles/index.scss';

src/views/Home/Home.tsx和src/views/Home/Home.module.scss

创建src/views/Home/Home.tsx输入rfc

import React from 'react'
import styles from './Home.module.scss'

const Home = () => {
  return (
    <div>
      Home
    </div>
  )
}

export default Home

src/router

创建src/router/index.ts

import React, { lazy } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
import type { RouteObject } from "react-router-dom";

const Home = lazy(()=> import('../views/Home'))
const Sign = lazy(()=> import('../views/Sign'))
const Login = lazy(()=> import('../views/Login'))
const NotAuth = lazy(()=> import('../views/NotAuth'))
const NotFound = lazy(()=> import('../views/NotFound'))
const NotServer = lazy(()=> import('../views/NotServer'))


export const routes: RouteObject[] = [
  {
    path: '/',
    element: React.createElement(Home),
    children: [
      {
        path: 'sign',
        element: React.createElement(Sign)
      },
    ]
  },
  {
    path: '/login',
    element: React.createElement(Login)
  },
  {
    path: '/403',
    element: React.createElement(NotAuth)
  },
  {
    path: '/404',
    element: React.createElement(NotFound)
  },
  {
    path: '/500',
    element: React.createElement(NotServer)
  },
  {
    path: '*',
    element: React.createElement(Navigate, {to: '/404'})
  }
];

const router = createBrowserRouter(routes)

export default router;

src/index.tsx引入路由

import './assets/styles/index.scss';
import { RouterProvider } from 'react-router-dom';
import router from './router';
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
reportWebVitals();

二级路由Outlet

src/views/Home/Home.tsx中添加Outlet

import { Outlet } from "react-router-dom";

const Home = () => {
  return (
    <div>
      Home
      <Outlet />
    </div>
  )
}

export default Home

4.初始化React工程项目与整体架构

一、脚手架创建React项目

1、使用 create-react-app 创建 React 应用

2、安装依赖及第三方模块

目录