Yet Another React Lightbox 使用教程

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

Yet Another React Lightbox 项目的目录结构如下：

yet-another-react-lightbox/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── icons/
│   ├── plugins/
│   ├── styles/
│   ├── utils/
│   ├── index.tsx
│   └── types.ts
├── examples/
│   ├── basic/
│   ├── custom-components/
│   ├── custom-icons/
│   ├── custom-plugins/
│   ├── custom-styles/
│   ├── lazy-loading/
│   ├── responsive/
│   ├── server-side-rendering/
│   ├── typescript/
│   └── vite/
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── package.json
├── README.md
├── tsconfig.json
└── vite.config.ts

目录结构介绍

• src/：包含项目的核心代码，包括组件、钩子、图标、插件、样式和工具函数等。
• examples/：包含多个示例项目，展示了不同场景下的使用方法。
• src/index.tsx：项目的入口文件。
• src/types.ts：定义了项目中使用的类型。
• .eslintrc.js、.prettierrc：代码风格配置文件。
• package.json：项目的依赖和脚本配置。
• README.md：项目的说明文档。
• tsconfig.json：TypeScript 配置文件。
• vite.config.ts：Vite 构建工具的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.tsx，它是整个项目的入口点。该文件导入了项目的核心组件和样式，并提供了默认的导出。

import React from 'react';
import ReactDOM from 'react-dom';
import Lightbox from './components/Lightbox';
import './styles/index.css';

export { Lightbox };

启动文件介绍

• React 和 ReactDOM：React 库的核心模块。
• Lightbox：项目的核心组件，用于显示图片灯箱效果。
• ./styles/index.css：项目的全局样式文件。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "yet-another-react-lightbox",
  "version": "1.0.0",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md}\""
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "eslint": "^7.23.0",
    "prettier": "^2.2.1",
    "typescript": "^4.2.3",
    "vite": "^2.1.5"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项和文件包含规则。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

vite.config.ts

vite.config.ts 文件是 Vite 构建工具的配置文件，定义了项目的构建和开发服务器选项。