React Starter Kit 使用教程
1. 项目的目录结构及介绍
React Starter Kit 的目录结构如下:
react-starter/
├── app/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── styles/
│ │ ├── index.js
│ │ └── App.js
│ ├── public/
│ │ ├── index.html
│ │ └── favicon.ico
│ ├── package.json
│ └── yarn.lock
├── db/
├── edge/
├── scripts/
├── server/
├── .editorconfig
├── .env
├── .eslintrc.cjs
├── .gitattributes
├── .gitignore
├── .prettierignore
├── .yarnrc.yml
├── LICENSE
├── README.md
├── package.json
├── tsconfig.base.json
├── tsconfig.json
├── vitest.config.ts
├── vitest.workspace.ts
└── yarn.lock
目录结构介绍
app/
: 包含前端应用的主要代码。src/
: 源代码目录。components/
: React 组件。pages/
: 页面组件。styles/
: 样式文件。index.js
: 入口文件。App.js
: 主应用组件。
public/
: 公共资源文件。index.html
: HTML 模板文件。favicon.ico
: 网站图标。
package.json
: 前端项目的依赖配置。yarn.lock
: 依赖锁定文件。
db/
: 数据库相关文件。edge/
: 边缘计算相关文件。scripts/
: 脚本文件。server/
: 后端服务相关文件。.editorconfig
: 编辑器配置文件。.env
: 环境变量配置文件。.eslintrc.cjs
: ESLint 配置文件。.gitattributes
: Git 属性配置文件。.gitignore
: Git 忽略文件配置。.prettierignore
: Prettier 忽略文件配置。.yarnrc.yml
: Yarn 配置文件。LICENSE
: 项目许可证。README.md
: 项目说明文档。package.json
: 项目依赖配置。tsconfig.base.json
: TypeScript 基础配置。tsconfig.json
: TypeScript 项目配置。vitest.config.ts
: Vitest 配置文件。vitest.workspace.ts
: Vitest 工作区配置。yarn.lock
: 依赖锁定文件。
2. 项目的启动文件介绍
项目的启动文件主要位于 app/src/
目录下:
index.js
: 这是项目的入口文件,负责渲染 React 应用到 HTML 模板中。App.js
: 这是主应用组件,包含了应用的路由和主要布局。
启动文件介绍
-
index.js
:import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
-
App.js
:import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import HomePage from './pages/HomePage'; import AboutPage from './pages/AboutPage'; function App() { return ( <Router> <Switch> <Route exact path="/" component={HomePage} /> <Route path="/about" component={AboutPage} /> </Switch> </Router> ); } export default App;
3. 项目的配置文件介绍
项目的配置文件主要位于项目根目录下:
.env
: 环境变量配置文件。.eslintrc.cjs
: ESLint 配置文件。tsconfig.base.json
: TypeScript 基础配置。tsconfig.json
: TypeScript 项目配置。vitest.config.ts
: Vitest 配置文件。