React Starter Kit 使用教程

React Starter Kit 使用教程

react-starterStarter kit for creating universal React applications.项目地址:https://gitcode.com/gh_mirrors/rea/react-starter

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 配置文件。

react-starterStarter kit for creating universal React applications.项目地址:https://gitcode.com/gh_mirrors/rea/react-starter