模板展示

项目结构

使用的部分扩展包

📂 System
├── 📂 Plugin
│ ├── 📄 file-loader | 在处理图片文件时，Webpack 会将它们复制到输出目录并生成一个哈希值文件名
│ ├── 📄 style-loader && css-loader | Webpack 将会使用 css-loader 解析 CSS 文件，并使用 style-loader 将其转化为可应用的样式
│ ├── 📄 @babel/preset-typescript | 将 TypeScript 代码转换为 JavaScript 代码
│ └── 📄 @babel/core: “^7.23.5”
│ └── 📄 @babel/preset-typescript: “^7.23.3”
│ └── 📄 @types/styled-components: “^5.1.32”
│ └── 📄 @typescript-eslint/eslint-plugin: “^6.4.0”
│ └── 📄 eslint扩展全家桶
│ └── 📄 customize-cra: “^1.0.0”
│ └── 📄 react-app-rewired: “^2.2.1”
│ └── 📄 customize-cra: “^1.0.0”

页面配置代码

Layout 公共容器组件

import React, { ReactNode } from "react";
import CCV4 from "../cc-by-4.0"

interface LayoutProps {
  children: ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children } : any) => {
  const layoutStyle: React.CSSProperties = {
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
  };
  const mainStyle: React.CSSProperties = {
    backgroundColor: `rgb(248,248,248)`,
    flex: 1,
  };
  const mainFooter: React.CSSProperties = {
    padding: "0 50px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "50px",
    lineHeight: "50px"
  };

  return (
     <div style={layoutStyle}>
      <header>header</header>
      <main style={mainStyle}>{children}</main>
      <footer style={mainFooter}>
        <CCV4></CCV4>
      </footer>
    </div>
  );
};

export default Layout;

路由Js

import React, { Fragment, Component } from "react";
import Home from "../pages/Home/home";
import { BrowserRouter, Route, Routes } from "react-router-dom";

export default class index extends Component {
  render() {
    return (
      <Fragment>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>
        </BrowserRouter>
      </Fragment>
    );
  }
}

package.json

{
  "name": "blog-react-typescript",
  "version": "1.0.0",
  "author": "starlight-fungus || 東方幻想郷",
  "private": true,
  "dependencies": {
    "@babel/eslint-parser": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.66",
    "@types/react": "^18.2.39",
    "@types/react-dom": "^18.2.17",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "4.3.1",
    "react-router-dom": "^6.20.0",
    "react-scripts": "5.0.1",
    "style-loader": "^3.3.3",
    "styled-components": "^6.1.1",
    "typescript": "^5.3.2",
    "web-vitals": "^2.1.4",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "webpack-build": "webpack --config webpack.config.js",
    "build-production": "react-app-rewired build mode --production"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.23.5",
    "@babel/preset-env": "^7.23.5",
    "@babel/preset-typescript": "^7.23.3",
    "@types/styled-components": "^5.1.32",
    "@typescript-eslint/eslint-plugin": "^6.4.0",
    "customize-cra": "^1.0.0",
    "eslint": "^8.0.1",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-standard-with-typescript": "^40.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "react-app-rewired": "^2.2.1"
  }
}

开源模板下载

React + TypeScript + Webpack => 便捷模板项目(配置完毕)

TIP

本项目使用 cc by 4.0 协议，项目可以随意使用，若出现任何法律纠纷，与项目作者无关