React.js is a very popular front-end JavaScript library used to create robust, interactive, and dynamic user interfaces based on components. Now, this powerhouse of UI development is available for you to develop even better widgets in the HTML Canvas.
Learn about React and how to enable this option following this brief guide.
Requirements:
An active Ubidots account (Industrial and above).
1. What is React
React.js, also known as ReactJS, is an open-source JavaScript library developed and maintained by Facebook. It serves as the foundation for creating modern and robust user interfaces for web and mobile applications. React revolves around the concept of reusable components that can be combined to form intricate UIs.
Key features of React include:
Virtual DOM: React uses a virtual representation of the DOM to keep track of changes. When the application's state changes, React calculates the minimal number of updates needed and then efficiently updates the actual DOM, reducing performance bottlenecks.
Declarative Syntax: Describing the UI based on application state simplifies UI rendering.
Unidirectional Data Flow: Data changes cascade from parent to child components, ensuring predictable behavior.
JSX (JavaScript XML): JSX is a syntax extension for JavaScript that allows developers to write UI components using a syntax similar to HTML. JSX makes the code more readable and enables developers to embed JavaScript logic directly within the UI structure.
Rich Ecosystem: React has a large and active community, resulting in a vast ecosystem of tools, libraries, and resources that can enhance development productivity. Additionally, React can be used with other libraries and frameworks as needed.
2. Using React in an HTML Canvas
Open your Ubidots dashboard and click the "+" button in the upper right corner.
Click on the “HTML Canvas” option.
Toggle the “enable React.js” button (located at the bottom of the modal).
Click on the “code editor” button.
Start developing your widget directly in the editor or paste your code into it. Note that the editor has 3 distinct tabs devoted to HTML, CSS, and JavaScript (JSX).
Important note: It’s advised to develop locally, transpile, and then copy the generated code into the “Javascript (JSX)” tab of the HTML Canvas’ code editor. This is to maximize the performance of your widget since your code would, otherwise, lack “tree shaking”. |
The editor loads with this React code example:
// https://react.dev/
const { useState } = React;
const { createRoot } = ReactDOM;
const { Button, Text, VulcanUIProvider } = VulcanUI;
function App() {
const [count, setCount] = useState(0);
return (
<VulcanUIProvider>
<Text>You clicked {count} times</Text>
<Button onClick={() => setCount(count + 1)}>+1</Button>
</VulcanUIProvider>
);
}
createRoot(document.getElementById('root')).render(<App />);
And it ends up looking like this:
Check out these guides to learn more about the HTML Canvas widget:
And our HTML Canvas documentation.