当前位置：首页 > news >正文

【前端】1 小时实现 React 简历项目

news 2025/7/3 13:58:29

近期更新完毕。仅包括核心代码

目录结构

yarn.lock保证开发者每次能下载到同版本依赖，一般不需要特别留意
package.json 是 Node.js 项目、前端项目、npm/yarn的配置文件。
Dockerfile 是用来定义 Docker 镜像构建过程的文本文件。它是一份脚本，告诉 Docker 如何一步步搭建你的应用环境。包括基础镜像、安装依赖、复制代码、运行命令等操作。最终由 Docker 根据 Dockerfile 自动构建出一个镜像。
.editorconfig 是一个用于统一和规范不同开发者编辑器（IDE）中的代码格式设置的配置文件。

- config
- public
- scripts- build.js # 生产环境构建脚本- start.js # 本地开发服务器的脚本- test.js # 测试运行脚本
- src
- templatesdefault.md #放置默认模版

构建工具 webpack/vite 特点是引入.ts/tsx文件的地址可以省略类型扩展名
.ts ：标准TypeScript文件，用于编写纯TypeScript逻辑代码，不包含JSX语法。
.tsx ：TypeScript JSX文件，专门用于编写React组件，支持JSX语法（如 <div>...</div> ）。

代码解析

//templates/default.md
::: header:::: title::::: left
xxxxx
:::::::::: right
xxxxx
::::::::::::: title::::: left:::::::::: right::::::::::::

scripts文件夹

build.js - 生产环境构建脚本

主要功能：将源代码编译打包为生产环境可用的静态文件
核心流程：
- 设置环境变量为 production
- 清空并准备构建目录
- 复制public文件夹资源
- 使用Webpack执行生产环境构建
- 输出构建文件大小统计和部署指南
- 处理构建过程中的错误和警告
关键依赖：Webpack、React Dev Utils、文件系统工具(fs-extra)
触发方式：通过 npm run build 或 yarn build 命令执行

start.js - 开发服务器脚本

主要功能：启动本地开发服务器，支持热重载和实时预览
核心流程：
- 设置环境变量为 development
- 检查必要文件是否存在
- 确定可用端口(默认3000)
- 配置并启动Webpack开发服务器
- 设置代理和热更新功能
- 自动打开浏览器访问开发地址
关键特性：
- 支持端口自动检测和冲突处理
- 集成错误和警告实时通知
- 提供开发环境专属优化
触发方式：通过 npm start 或 yarn start 命令执行

test.js - 测试运行脚本

主要功能：配置并启动Jest测试运行器
核心流程：
- 设置测试环境变量
- 检测版本控制系统(Git/Mercurial)
- 根据环境自动配置测试模式：
  - CI环境：默认运行所有测试
  - 本地环境：默认启动监视模式
关键特性：
- 智能检测版本控制环境
- 支持Jest命令行参数传递
- 集成错误捕获机制
触发方式：通过 npm test 或 yarn test 命令执行

config文件夹

public文件夹

favicon.ico网页图标
robot.txt放在网站根目录下的纯文本文件，用来告诉搜索引擎爬虫（如 Googlebot、Bingbot 等）：哪些页面或路径允许抓取，哪些不允许抓取。

manifest.json：控制 Web App 即PWA 外观和安装行为等配置或者对浏览器扩展插件的配置

{"short_name": "简历","name": "Markdown在线简历，简单、急速、丰富的模板。","icons": [{"src": "favicon.ico","sizes": "64x64 32x32 24x24 16x16","type": "image/x-icon"}],"start_url": ".","display": "standalone","theme_color": "#000000","background_color": "#ffffff"
}

index.html 整个应用的入口 HTML 文件，作用：
作为网页的骨架和载体
浏览器打开时，加载的第一个 HTML 文件。
挂载前端框架的根节点
比如 React、Vue 等单页应用（SPA）会在 index.html 里指定一个容器（如 <div id="app"></div>），JS 会把整个应用渲染到这个容器里。
配置网页基本信息
包含 <title>、<meta> 标签、引入 favicon、字体、外部脚本或样式表等。
作为开发服务器和生产构建的模板
构建工具会把打包后的 JS、CSS 文件自动注入到这里，最终生成浏览器能执行的页面。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><!-- 设置主题颜色 --><meta name="keywords" content="Markdown简历，简历模板，简历模板中心，简历制作软件，免费简历制作，个人简历制作"><metaname="description"content="Markdown在线简历，简单、急速、丰富的模板。"/><!-- SEO优化 --><!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> --><!--manifest.json provides metadata used when your web app is installed on auser's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/--><!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> --><!--Notice the use of %PUBLIC_URL% in the tags above.It will be replaced with the URL of the `public` folder during the build.Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" willwork correctly both with client-side routing and a non-root public URL.Learn how to configure a non-root public URL by running `npm run build`.--><title>简历</title><link href="https://cdn.bootcdn.net/ajax/libs/antd/4.14.1/antd.min.css" rel="stylesheet"><link href="/themes/reset.css" rel="stylesheet"><!-- Global site tag (gtag.js) - Google Analytics --></head><body><noscript>You need to enable JavaScript to run this app.</noscript><!-- 禁用JS的替代显示 --><div id="root"></div><!--This HTML file is a template.If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.To create a production bundle, use `npm run build` or `yarn build`.--><script src="https://at.alicdn.com/t/font_2410217_qz6rpfck71.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=G-5X7ZZVD7WS"></script><!-- google用户访问等数据跟踪分析 --><script>// 初始化配置数据分析功能window.dataLayer = window.dataLayer || [];// 创建/复用全局数据层数组 存储传递分析数据function gtag(){dataLayer.push(arguments);}// 定义全局跟踪函数gtaggtag('js', new Date());// 记录JS加载时间戳gtag('config', 'G-5X7ZZVD7WS');// 使用测量ID G-5X7ZZVD7WS 初始化GA4配置，开始收集基础访问数据</script></body>
</html>

data文件夹下有template.json 设置各个主题，后续Square.tsx会用到

themes文件夹

定义各个主题的.less，根据同目录下generate.js将.less编译为.css，在npm run build时自动执行
common文件夹下global.less放公共样式

//generate.js
const fs = require('fs');
const path = require('path');const fileList = fs.readdirSync(path.join(__dirname, './'));//读取当前目录下所有文件
//json是accumulator item是它的初始值
const contentJSON = fileList.filter(item => item.indexOf('.css') > -1).reduce((json, item) => {const itemPath = path.join(__dirname, item);//拼接完整路径const name = path.basename(item, '.css');//只取文件名 去掉.cssconsole.log(json, name, itemPath);json[name] = fs.readFileSync(itemPath).toString();//读取内容放入json对应位置return json;
}, {})fs.writeFileSync(path.join(__dirname, 'theme.js'), `module.exports = ${JSON.stringify(contentJSON)}`);
//生成theme.js//theme.js 很粗暴由generate.js导出.css文件

src文件夹

reportWebVitals.ts 用于测量和报告前端性能指标的工具文件，放在src/index.tsx中

import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {if (onPerfEntry && onPerfEntry instanceof Function) {import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {getCLS(onPerfEntry);//(Cumulative Layout Shift)：累积布局偏移量getFID(onPerfEntry);//(First Input Delay)：首次输入延迟getFCP(onPerfEntry);//(First Contentful Paint)：首次内容绘制getLCP(onPerfEntry);//(Largest Contentful Paint)：最大内容绘制getTTFB(onPerfEntry);//(Time to First Byte)});}
};
export default reportWebVitals;

react-app-env.d.ts 是 TypeScript 环境声明文件，主要作用是为 React 应用提供类型定义和环境配置，确保 TypeScript 编译器能够正确识别项目中的非代码文件和环境变量。一般是自动生成的。

utils

window-event.ts
App.tsx中引入它，设置window.onload/onresize事件

window.onload = () => {window.onresize = () => {const windowWidth = document.body.clientWidth;const el = document.querySelector('.rs-view-inner') as HTMLElement;
/*
TypeScript 中的 DOM 元素选择与类型断言语句，主要作用是 获取页面中特定 CSS 类的元素并明确其类型 。
*/if (!el) {return;}if (windowWidth < 1250 && windowWidth > 1000) {const resetWidth = windowWidth - 450;const marginWidth = resetWidth * 0.2;const radio = Math.round(resetWidth * 0.8 / 794 * 100);el.style.transform = `scale(${radio/100})`;el.style.marginLeft = `${marginWidth / 2}px`;} else if (windowWidth >= 1250) {el.style.transform = `scale(1)`;el.style.marginLeft = `auto`;}}
}
export { };