React 简历模板项目教程

最新推荐文章于 2024-09-26 14:30:55 发布

余鹤赛

最新推荐文章于 2024-09-26 14:30:55 发布

阅读量391

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00379/article/details/141080507

版权

React 简历模板项目教程

react-resume-templateA personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css项目地址:https://gitcode.com/gh_mirrors/re/react-resume-template

1. 项目的目录结构及介绍

react-resume-template/
├── public/
│   ├── _next/
│   └── index.html
├── src/
│   ├── components/
│   ├── data/
│   ├── pages/
│   ├── styles/
│   ├── utils/
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── index.tsx
│   └── resume-screenshot.jpg
├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .yarnrc.yml
├── LICENSE
├── README.md
├── next-env.d.ts
├── next-sitemap.js
├── next.config.js
├── package.json
├── postcss.config.js
├── stylelint.config.js
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

目录结构介绍

public/: 存放静态资源文件，如 index.html。
src/: 项目的源代码目录，包含组件、页面、样式等。
- components/: 存放React组件。
- data/: 存放数据文件，如简历信息。
- pages/: 存放页面组件。
- styles/: 存放样式文件。
- utils/: 存放工具函数。
- _app.tsx: 自定义App组件。
- _document.tsx: 自定义Document组件。
- index.tsx: 入口文件。
- resume-screenshot.jpg: 简历截图。
.eslintrc: ESLint配置文件。
.gitignore: Git忽略文件配置。
.prettierignore: Prettier忽略文件配置。
.prettierrc: Prettier配置文件。
.yarnrc.yml: Yarn配置文件。
LICENSE: 项目许可证。
README.md: 项目说明文档。
next-env.d.ts: Next.js类型定义文件。
next-sitemap.js: 站点地图配置文件。
next.config.js: Next.js配置文件。
package.json: 项目依赖和脚本配置。
postcss.config.js: PostCSS配置文件。
stylelint.config.js: Stylelint配置文件。
tailwind.config.js: Tailwind CSS配置文件。
tsconfig.json: TypeScript配置文件。
yarn.lock: Yarn锁定文件。

2. 项目的启动文件介绍

入口文件

src/index.tsx: 这是项目的入口文件，负责渲染应用到DOM中。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

自定义App组件

src/_app.tsx: 自定义App组件，用于包装所有页面组件。

import '../styles/globals.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

自定义Document组件

src/_document.tsx: 自定义Document组件，用于修改服务端渲染的HTML结构。

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

3. 项目的配置文件介绍

Next.js配置文件

next.config.js: Next.js的配置文件，用于自定义Next.js的行为。

module.exports = {
  reactStrictMode: true,
};

react-resume-templateA personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css项目地址:https://gitcode.com/gh_mirrors/re/react-resume-template

余鹤赛

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫