React LLM 项目教程

React LLM 项目教程

1. 项目目录结构及介绍

react-llm/
├── github/
│   └── workflows/
├── assets/
├── packages/
│   ├── headless/
│   ├── retro-ui/
│   ├── extension/
│   └── model/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.base.json

目录结构介绍

• github/workflows/: 包含GitHub Actions的工作流配置文件。
• assets/: 存放项目所需的静态资源文件。
• packages/: 包含项目的各个子包，如headless、retro-ui、extension和model。
  • headless/: 包含无头React Hooks，用于在浏览器中运行LLMs。
  • retro-ui/: 包含复古主题的UI组件。
  • extension/: 包含Chrome扩展的代码。
  • model/: 包含LLM模型和分词器的代码。
• .gitignore: Git忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目的npm配置文件。
• pnpm-lock.yaml: pnpm的锁定文件，用于版本控制。
• pnpm-workspace.yaml: pnpm的工作区配置文件。
• tsconfig.base.json: TypeScript的基础配置文件。

2. 项目启动文件介绍

项目的启动文件主要位于packages/retro-ui/目录下。以下是主要的启动文件：

• packages/retro-ui/src/index.tsx: 这是项目的入口文件，负责初始化React应用并渲染根组件。
• packages/retro-ui/src/App.tsx: 这是主要的应用组件，包含了应用的逻辑和UI结构。

启动步骤

1. 进入packages/retro-ui/目录：

   cd packages/retro-ui
   

2. 安装依赖：

   pnpm install
   

3. 启动开发服务器：

   pnpm dev
   

3. 项目配置文件介绍

package.json

package.json文件位于项目根目录下，包含了项目的元数据和依赖配置。以下是一些关键配置项：

{
  "name": "@react-llm/headless",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "pnpm run dev",
    "build": "pnpm run build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "typescript": "^4.5.2"
  }
}

tsconfig.base.json

tsconfig.base.json文件位于项目根目录下，包含了TypeScript的基础配置。以下是一些关键配置项：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["packages/**/*"],
  "exclude": ["node_modules"]
}

pnpm-workspace.yaml

pnpm-workspace.yaml文件位于项目根目录下，定义了pnpm的工作区配置。以下是配置内容：

packages:
  - 'packages/*'

这个配置指定了packages/目录下的所有子目录为pnpm的工作区。