# Arena-React

**Repository Path**: box3lab/react-arena

## Basic Information

- **Project Name**: Arena-React
- **Description**: 神岛 React-like 框架是一个轻量级的类 React UI 框架，专为神岛游戏 UI 系统设计。它提供了与 React 类似的 API 和开发体验，让开发者能够使用组件化、声明式的方式构建游戏 UI 界面。框架实现了 React 的核心功能，包括虚拟 DOM、组件系统、状态管理和钩子系统。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-28
- **Last Updated**: 2025-04-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 神岛 React 框架

神岛 React-like 框架是一个轻量级的类 React UI 框架，专为神岛游戏 UI 系统设计。它提供了与 React 类似的 API 和开发体验，让开发者能够使用组件化、声明式的方式构建游戏 UI 界面。框架实现了 React 的核心功能，包括虚拟 DOM、组件系统、状态管理和钩子系统。

📚 更多详细信息请查看官方文档：[https://docs.box3lab.com/arenapro/package/react/](https://docs.box3lab.com/arenapro/package/react/)

## 安装依赖

你可以通过以下两种方式安装 `@dao3fun/react` 依赖包：

### 方式一：使用 ArenaPro 插件安装（推荐）

1. 在 VSCode 中，按下 `Ctrl + Shift + P`（Windows）或 `Command + Shift + P`（MacOS）打开命令面板
2. 输入 "ArenaPro" 并选择 `ArenaPro: 查看神岛NPM包` 命令
3. 在搜索框中输入 `react`
4. 选择 `@dao3fun/react` 包，点击左下角"确认安装"
5. 等待安装完成，VSCode 右下角会显示安装成功提示

### 方式二：使用 npm 安装

在项目根目录下执行以下命令：

```bash
npm install @dao3fun/react
```

## 环境配置

安装完成后，需要进行以下配置以支持 React 开发：

### 配置 tsconfig.json

1. 打开项目 `client` 目录下的 `tsconfig.json` 文件
2. 在 `compilerOptions` 中添加 `jsx` 配置：

```json
{
  "compilerOptions": {
    "jsx": "react"
    // 其他配置...
  }
}
```

完成配置后，TypeScript 将能够正确识别 JSX 语法。

### 配置 dao3.config.json

1. 打开项目根目录下的 `dao3.config.json` 文件
2. 在 `entry` 中修改为 `src/clientApp.tsx`

### 修改客户端入口文件

由于框架原因，你需要使用 `.tsx` 或 `.jsx` 格式的文件作为入口文件，而不是 `.js` 或 `.ts`。

在 `client` 目录下创建或修改 `clientApp.tsx` 文件。

## 快速上手

神岛 React 的标签系统与神岛 UI API 完全兼容，例如：

- `<box />` 对应 `UiBox`
- `<text />` 对应 `UiText`

UI 样式通过 `style` 属性设置，具体 API 请参考：[神岛 UI API 文档](https://docs.box3lab.com/api/ClientUI/)

让我们通过一个简单的示例来了解基本用法：

```tsx
// clientApp.tsx
import React from "@dao3fun/react";

function App() {
  return <box>你好，React</box>;
}

React.render(<App />, ui);
```

恭喜！你已经成功完成了神岛 React 的基础配置和简单使用。更多特性和开发技巧，请阅读文档。