@dao3fun/react
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

神岛 React 框架

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

📚 更多详细信息请查看官方文档: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 安装

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

npm install @dao3fun/react

环境配置

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

配置 tsconfig.json

  1. 打开项目 client 目录下的 tsconfig.json 文件
  2. compilerOptions 中添加 jsx 配置:
{
  "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 文档

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

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

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

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i @dao3fun/react

Weekly Downloads

9

Version

0.0.3

License

MIT

Unpacked Size

129 kB

Total Files

25

Last publish

Collaborators

  • viyrs
  • surfish
  • tobylai
  • studentnumber2
  • l.w.kevin0wvf
  • onloading
  • whale303