React.js es una biblioteca de JavaScript de front-end muy popular utilizada para crear interfaces de usuario robustas, interactivas y dinámicas basadas en componentes. Ahora, este potente desarrollo de UI está disponible para que desarrolles incluso mejores widgets en el Lienzo HTML.
Aprende sobre React y cómo habilitar esta opción siguiendo esta breve guía.
Requisitos:
Una cuenta activa de Ubidots (Industrial y superior).
1. Qué es React
React.js, también conocido como ReactJS, es una biblioteca de JavaScript de código abierto desarrollada y mantenida por Facebook. Sirve como la base para crear interfaces de usuario modernas y robustas para aplicaciones web y móviles. React gira en torno al concepto de componentes reutilizables que pueden combinarse para formar UIs complejas.
Las características clave de React incluyen:
DOM Virtual: React utiliza una representación virtual del DOM para realizar un seguimiento de los cambios. Cuando cambia el estado de la aplicación, React calcula el número mínimo de actualizaciones necesarias y luego actualiza de manera eficiente el DOM real, reduciendo los cuellos de botella de rendimiento.
Sintaxis Declarativa: Describir la UI basada en el estado de la aplicación simplifica la renderización de la UI.
Flujo de Datos Unidireccional: Los cambios de datos se propagan de padre a hijo, lo que garantiza un comportamiento predecible.
JSX (JavaScript XML): JSX es una extensión de sintaxis para JavaScript que permite a los desarrolladores escribir componentes de UI utilizando una sintaxis similar a HTML. JSX hace que el código sea más legible y permite a los desarrolladores incrustar la lógica de JavaScript directamente dentro de la estructura de la UI.
Ecosistema Rico: React tiene una comunidad grande y activa, lo que resulta en un vasto ecosistema de herramientas, bibliotecas y recursos que pueden mejorar la productividad del desarrollo. Además, React se puede usar con otras bibliotecas y marcos según sea necesario.
2. Usando React en un Lienzo HTML
Abre tu panel de Ubidots y haz clic en el botón "+" en la esquina superior derecha.
Haz clic en la opción “Lienzo HTML”.
Activa el botón “habilitar React.js” (ubicado en la parte inferior del modal).
Haz clic en el botón “editor de código”.
Comienza a desarrollar tu widget directamente en el editor o pega tu código en él. Ten en cuenta que el editor tiene 3 pestañas distintas dedicadas a HTML, CSS y JavaScript (JSX).
Nota importante: Se recomienda desarrollar localmente, transcompilar y luego copiar el código generado en la pestaña “JavaScript (JSX)” del editor de código del Lienzo HTML.
Esto es para maximizar el rendimiento de tu widget, ya que de lo contrario tu código carecería de “tree shaking”. |
El editor se carga con este ejemplo de código React:
// 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 />);
Y termina viéndose así:
Consulta estas guías para aprender más sobre el widget de Lienzo HTML:
Y nuestra documentación del Lienzo HTML.