---
title: Guide
---

# Guide

This access guide is designed for users with React Native Panel development experience who want to quickly understand the corresponding functions of Panel MiniApp.

**You don't need to read all of this content before starting Panel MiniApp development, you can refer to it as needed during actual development.**

If you are a beginner, we recommend directly reading [Quick Start - Panel MiniApp](/en/miniapp/develop/ray/guide/start/quick-start).

---

### Quick Start

<Callout type="info" emoji="ℹ️">
  This section lists the differences and precautions between Panel MiniApp and RN in terms of quick start. For specific details, you can read [Quick Start - Panel MiniApp](/en/miniapp/develop/ray/guide/start/quick-start).
</Callout>

#### 1. Setting Up the Environment

**Differences**:

- Additional installation of [Tuya MiniApp IDE](/en/miniapp/devtools/tools) is required, but no need to install CLI tools.

**Advantages**:

- Built-in packaging, debugging, and publishing features.

**Precautions**:

- None.

---

#### 2. Experience the Panel

**Differences**:

- None.

**Advantages**:

- In addition to the [Scaffold](https://github.com/Tuya-Community/tuya-ray-materials/tree/main/template) and [Functional Component Experience Demo](https://developer.tuya.com/material/smartui?comId=help-getting-started), a series of [Functional Module Example Projects](https://github.com/Tuya-Community/tuya-miniapp-demo) are also provided.

**Precautions**:

- None.

---

#### 3. Create a Product

**Differences**:

- None.

**Advantages**:

- None.

**Precautions**:

- None.

---

#### 4. Initialize the Project

**Differences**:

- Panel MiniApp need to create a project from Tuya MiniApp IDE and associate it with the corresponding product and its Panel MiniApp for subsequent device debugging and publishing.

**Advantages**:

- Some project templates come with [Codelab Tutorials](https://developer.tuya.com/en/miniapp-codelabs).

**Precautions**:

- Some outdated RN templates are deprecated in Panel MiniApp. If needed, you can seek help and support through the [Community Forum](https://www.tuyaos.com/viewforum.php?f=37).

---

#### 5. Development and Debugging

**Differences**:

- Panel MiniApp can be debugged directly using the SmartLife App or OEM App.
- Panel MiniApp can be developed and debugged on the PC via Tuya MiniApp IDE.

**Advantages**:

- Built-in [Panel Development Tools](/en/miniapp/devtools/tools/extension/panel) and AI plugins.
- No need to install additional debugging apps; use the SmartLife App or OEM App directly.

**Precautions**:

- Make sure to test on both iOS and Android real devices before final release as PC environment limitations may not guarantee 100% consistent behavior.

---

#### 6. Packaging and Upload

**Differences**:

- Panel MiniApp only need to upload one resource package.
- Panel MiniApp require Tuya official review before publishing.
- Panel MiniApp need to maintain multi-region server domains, multi-region static resources, cloud project information, etc.

**Advantages**:

- Supports multi-version management and grayscale strategy.
- Supports testing different device functions by dynamically inputting device IDs through experience QR codes.
- Supports compatibility with different app baseline versions through [Kit Capability](/en/miniapp/common/desc/tech-stack/api#kit-capability).

**Precautions**:

- None.

---

### API

**Differences**:

- MiniApp have atomized and extended APIs, resulting in an increased number of APIs.

**Advantages**:

- Richer and more flexible API capabilities, supporting more foundational capabilities or business scenarios that were previously unsupported, such as **multi-device control**, **multimedia**, **object model**, etc.

**Precautions**:

- Due to the large number of RN APIs, we provide an [API Migration Guide](/en/miniapp/develop/ray/guide/migrate/api/basic) for easy reference.

---

### Scaffold

**Differences**:

- Adjusted and designed based on the Panel MiniApp solution and the new panel SDK.

**Advantages**:

- Some project templates come with [Codelab Tutorials](https://developer.tuya.com/en/miniapp-codelabs).

**Precautions**:

- Some outdated RN templates are deprecated in Panel MiniApp. If needed, you can seek help and support through the [Community Forum](https://www.tuyaos.com/viewforum.php?f=37).

<Image
  src='https://images.tuyaus.com/content-platform/hestia/1728298633ad999a7633c.jpg'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Scaffold Preview"
/>

---

### Internationalization and Multi-language

**Differences**:

- The multi-language API of Panel MiniApp is identical to that of RN, only the package name is different. Refer to [Multilingual](/en/miniapp/solution-panel/ability/common/multi-language) for usage.

**Advantages**:

- Supports platformized management of multi-language for Panel MiniApp, better handling scenarios where multiple products are associated with the same panel and require simultaneous multi-language effectiveness.

**Precautions**:

- The multi-language logic of Panel MiniApp is identical to that of RN. However, due to the complexity of business logic, it is recommended to read [Multilingual - FAQs](/en/miniapp/solution-panel/ability/common/multi-language#faqs) in advance.

---

### Basic Components

**Differences**:

- Provides [Basic Components](/en/miniapp/develop/ray/component) corresponding to RN's official basic components.
- Provides [SmartUI Component Library](https://developer.tuya.com/material/smartui?comId=help-getting-started) corresponding to Tuya's official component library.

**Advantages**:

- Based on WebView as the rendering engine, naturally supports CSS, offering greater flexibility in styling, community ecosystem, and component development efficiency.
- The SmartUI component library provides real-time editing and preview capabilities on the platform through Codesandbox.

**Precautions**:

- RN's performance is inherently superior to MiniApp due to the use of native components and restricted coding practices. To bridge this gap, we provide technical solutions such as `SJS`, `RJS`, `eventChannel`, `native components`, and `hybrid development`.

---

## Notable New Features

Compared to RN panel development, Panel MiniApp have the following notable new features:

### Panel Development Tools

**Before:**

Could only debug through the [Device Debugging](https://developer.tuya.com/en/docs/iot/device_debug?id=Kbrcqod1qa730) feature on the developer platform.

<Image
  src="https://images.tuyaus.com/content-platform/hestia/166133512795a0cdb35bb.png"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Device Debugging 1"
/>

<Image
  src="https://images.tuyaus.com/content-platform/hestia/1661335442da7ebab1eb2.png"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Device Debugging 2"
/>

**Now:**

1. In addition to the device debugging feature on the developer platform, you can directly debug devices in the [Panel Tools](/en/miniapp/devtools/tools/extension/panel).

<Image
  src="https://images.tuyaus.com/content-platform/hestia/1728299679cf416670a2a.jpg"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Device Debugging 1"
/>

2. Also supports debugging of [Complex Protocol](https://developer.tuya.com/en/docs/iot/complex-protocol-description?id=Kbabmb54ueujl) function points.

<Image
  src="/images/panel/raw-protocol-en.gif"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Device Debugging 2"
/>

### Smart Device Model

**Before:**

The panel SDK only provided basic device API wrappers, usually requiring `redux` or other state management libraries to manage device states.

```tsx
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useDispatch } from 'react-redux';
import { useSelector } from '@models';

export default function Home() {
  const dispatch = useDispatch();
  const power = useSelector(state => state.dpState.power);

  const handleTogglePower = () => {
    dispatch(actions.common.updateDp({ power: !power }));
  };

  return (
    <View style={{ flex: 1 }}>
      <Text>power: {power}</Text>
      <TouchableOpacity onPress={handleTogglePower}>
        <Text>toggle power</Text>
      </TouchableOpacity>
    </View>
  );
}
```

**Now:**

1. The panel SDK provides two hooks, `useProps` and `useActions`, which can be directly used to get device states and control devices.

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useProps, useActions } from '@ray-js/panel-sdk';

export default function Home() {
  const power = useProps((props) => props.power);
  const actions = useActions();
  return (
    <View style={{ flex: 1 }}>
      <View>power: {power}</View>
      <View onClick={actions.power.toggle}>toggle power</View>
    </View>
  );
}
```

2. By using the [Smart Device Schema File](/en/miniapp/solution-panel/ability/common/sdm/usage#defining-smart-device-schema-file) (i.e., TYSdk.devInfo.schema in the original RN SDK) with TS type inference, a more elegant device development experience can be obtained.

<Image
  src="/images/panel/sdm-react.gif"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Smart Device Model"
/>

3. The panel SDK has built-in function point interceptors (i.e., dp-kit), which support parsing & re-parsing complex type DP function points, throttling, debouncing, filtering, and other functions.

### Supports Multiple Devices and Richer Capabilities

**Before:**

1. Only supported single device control:

```js
TYSdk.device.putDeviceData({ switch_1: true });
```

2. Only supported the following limited capabilities:

- Native methods
- Mobile methods
- Device methods
- ...

**Now:**

1. All APIs and events support controlling or responding to specified devices:

```js
// Device control
publishDps({
  // Control a specified device in the home by specifying the deviceId
  deviceId: 'vdevoxxxxx',
  dps: { switch_1: true },
  success: res => {
    console.log(res);
  },
  fail: error => {
    console.log(error);
  },
});

// Device listening
onDpDataChange((res)=>{
  console.log(res);
  // Listen to a specified device in the home by judging the specified deviceId
  // {
  //   deviceId: "vdevo169477319679442",
  //   dps: {
  //     1: true
  //   },
  //   gwId: ''
  // }
})
```

2. Supports richer basic or device capabilities, see [API](/en/miniapp/develop/ray/api/base/framework/getApp)

### Platform Extended Capabilities (Experience QR Code, Data Statistics, Performance Quality)

**Before:**

1. If Product A is currently associated with Panel A and you want to switch to the newly developed Panel B, you can only switch Product A directly to Panel B, which has certain risks.

**Now:**

1. If Product A is currently associated with Panel A and you want to switch to the newly developed Panel B, you only need to generate an experience QR code for the specified device ID, without associating Product A. You can associate Product A after testing is complete.

<Image
  src="https://images.tuyaus.com/content-platform/hestia/17270190304aed70c2dec.jpg"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Experience QR Code"
/>

2. The MiniApp platform provides built-in data statistics, performance quality, and other capabilities, which can be viewed and analyzed on the developer platform.

<Image
  src="https://images.tuyaus.com/content-platform/hestia/172701900980cad3848d0.jpg"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Data Statistics"
/>

<Image
  src="https://images.tuyaus.com/content-platform/hestia/1727018984eb860b3c8e1.jpg"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
  alt="Performance Quality"
/>

## Advanced Technical Points Worth Noting

Compared to RN panel development, Panel MiniApp have the following advanced technical points worth noting:

### SJS

- **Application Scenarios**: Used for scenarios with frequent user interactions, similar to [setNativeProps](https://reactnative.dev/docs/direct-manipulation) in RN.
- **Reference Documentation**: [Respond to Events with SJS](/en/miniapp/develop/miniapp/framework/event/sjs) and [SJS Reference](/en/miniapp/develop/miniapp/framework/sjs)
- **Reference Examples**: [tuya-miniapp-demo/sjs](https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/sjs)

### RJS

- **Application Scenarios**: Used to handle high-frequency drawing requirements, improving the animation rendering performance of views, such as Canvas chart rendering, WebGL graphic rendering, etc.
- **Reference Documentation**: [Render Script](/en/miniapp/develop/miniapp/framework/api/render#render-script)
- **Reference Examples**: [tuya-miniapp-demo/rayRjsPlugin](https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayRjsPlugin)

### Hybrid Development

- **Application Scenarios**: Directly reference components developed with native MiniApp syntax or third-party components from the WeChat MiniApp ecosystem in the Ray framework to improve performance or development efficiency.
- **Reference Documentation**: [Hybrid Development](/en/miniapp/develop/ray/framework/mixed-development)
- **Reference Examples**: [tuya-miniapp-demo/rayUseAx](https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayUseWX)