Welcome to Ray's journey! To use Ray you need some knowledge of JavaScript basics. If you're new to JavaScript or need a refresher, you can develop or refresher on MDN ).
Ray is a cross-end development framework based on React DSL. If you have never been in contact with React and have doubts about the syntax of React, we recommend you to check it out.
This document is aimed at junior developers who are new to Ray. If you already have the basic development capabilities of Ray and want to see how to develop a panel Miniapp through Ray, we recommend that you check it out directly.
If you have any doubts about what a panel Miniapp is, we recommend you to check it out.
Ray - Tuya cross-end solution, build a development framework around smart device research and development, use React to write cross-end applications of different containers such as Web, Tuya Smart MiniApp, WeChat Miniapp, React Native, etc.
If you already know the basic concepts of Ray here, we will walk with you into the development of the Ray project.
Ray's development environment must depend on node. If your device has not installed node, we recommend using Homebrew to install node. Execute the following commands on the command line to install (if the installation is slow, you can try Alibaba Cloud's Mirror Source):
brew install node
If you already have Node installed, use node -v to check its version.
First, you need to install the @ray-js/create-app command globally using npm.
npm install -g @ray-js/create-app
Congratulations 🎉 , you have installed the script to create a Ray project, let's create a Hello World project.
We have installed the script to successfully create a Ray project through npm earlier. You can execute npx @ray-js/create-app my-first-ray-app to create your first Ray application.
npx @ray-js/create-app my-first-ray-app
Getting ray template...
? What project template would you like to generate? (Use
arrow keys)
❯ App Universal Ray application
Here we choose the common Ray application template of App to create a most basic Ray application.
After execution, we can see the created my-first-ray-app folder, which is the template project we created.
🎉 Now we can open it through vscode and take a look at the Ray application project we created.
Next, we want to use the Smart MiniApp IDE to launch the Ray application we created.
If you haven't used it yet, you can check the IDE related usage documentation here.
First, go to the my-first-ray-app folder, install dependencies, and start the construction of the Smart MiniApp corresponding to the Ray application.
cd my-first-ray-app
npm install
npm run start:tuya
After executing npm run start:tuya, the construction of the Ray application will be started. At this time, we can use the IDE to open the project.
see this page
We can replace the home page file src/pages/home/index.tsx in the project with
import React from "react";
import { View } from "@ray-js/components";
import styles from "./index.module.less";
export default function Home() {
return <View className={styles.view}>Hello World</View>;
}
At this point, you can see that the page changes to
Congratulations 🎉 , you have completed the creation and operation of the Hello World project, let's enrich our page.
Ray provides a wealth of basic components for us to use, so check out the documentation of the components below.
Let's change the code of src/pages/home/index.tsx and use the three components of View, Image, and Text to optimize our page.
import React from "react";
import { View, Image, Text } from "@ray-js/components";
export default function Home() {
return (
<View className={styles.view}>
<Image
style={{ width: 300, height: 160 }}
mode="scaleToFill"
src="https://images.tuyacn.com/rms-static/65d804b0-3706-11ec-a70c-1f1416f21f67-1635326115963.png"
/>
<Text style={{ fontSize: "50rpx", marginTop: 15 }}>Hello Tuya</Text>
</View>
);
}
Open index.module.less and we can modify the style file. Ray supports less by default, and no additional configuration is required. Of course, you can also use inline styles directly.
If you have any doubts about the style, it is recommended to check directly Ray Style.
.view {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: greenyellow;
}
Does the changed page look better?
🎉 Let's take a look at how to use the Ray API.
Ray provides a wealth of APIs for us to use, so check out the documentation of the Ray API.
Let's change the code of src/pages/home/index.tsx, refer to the getSystemInfo function in the Ray API, get system information, and display the screen width and height.
import React, { useEffect, useState } from "react";
import { View, Image, Text } from "@ray-js/components";
import { getSystemInfo } from "@ray-js/api";
export default function Home() {
const [systemInfo, setSystemInfo] = useState<
Partial<{
screenHeight: number;
screenWidth: number;
}>
>({});
useEffect(() => {
getSystemInfo({
success(res) {
console.log("Get system information", res);
setSystemInfo(res);
},
});
}, []);
return (
<View
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100vh",
backgroundColor: "greenyellow",
}}
>
<Image
style={{ width: 300, height: 160 }}
mode="scaleToFill"
src="https://images.tuyacn.com/rms-static/65d804b0-3706-11ec-a70c-1f1416f21f67-1635326115963.png"
/>
<Text style={{ fontSize: "50rpx", marginTop: 15 }}>Hello Tuya</Text>
<Text>screenHeight: {systemInfo.screenHeight}</Text>
<Text>screenWidth: {systemInfo.screenWidth}</Text>
</View>
);
}
At this time, we can see that according to the above code, the page we can get has changed again, the system information is printed on the console, and the screen width and height are displayed on the page.
Currently, not only getSystemInfo, but also from the documentation, we can see that the API capabilities provided by Ray are very rich, including APIs related to control pages, APIs related to control devices, APIs related to routing, etc. You can go to the official documentation of Ray by yourself. View usage.
🎉 Congratulations, you have initially completed a Ray framework from 0 to 1 according to our tutorial, developing pages, using IDE to start projects, using components and API to update pages, and have the basic ability to develop Ray applications.
We have completed the basic page development above. To view the my-first-ray-app project we created, we need to continue to learn about project configuration and routing configuration. You can directly click the following link to view it.
If you are in doubt about the application and page life cycle, component usage, style processing, events and other related framework issues in the development of Ray App, you can click the following link to view the related documents of the Ray framework.
After reading the above documents, we believe that you can basically complete the development of a Ray application. If you don't know how to start developing a panel Miniapp, we recommend you to check it out.