网站建设速成班罗湖网站设计

模板展示

项目结构

使用的部分扩展包

📂 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 协议，项目可以随意使用，若出现任何法律纠纷，与项目作者无关