Capítulo 5
Electron + React
Aplicaciones de escritorio con Electron y React: el mismo diseñador, con el código en JavaScript.
Crear un proyecto de Electron
Al crear la aplicación, elija Electron + React. El Diseñador, el inspector y los eventos son los mismos; cambia el lenguaje del código: JavaScript, en el archivo Form1.js. La paleta solo muestra los componentes que ya tiene Electron.
Necesita Node.js (nodejs.org). La primera vez que ejecute un proyecto de Electron, el estudio instala Electron y React (unos 100 MB) en su carpeta de datos; después, todos los proyectos los comparten y arrancan al momento.
El código: componentes con propiedades
Cada evento del diseño es un método de la clase Form1, que hereda de FormDesign. Cada componente es this.Nombre, con propiedades sencillas: al cambiarlas, la ventana se vuelve a pintar (con React).
class Form1 extends FormDesign {
form_create() {
this.List1.items = ["Madrid", "Lima", "Bogotá"];
}
Button1_click() {
this.Label1.text = "Hola, " + this.Entry1.text;
this.Status.set("Saludado");
}
List1_select(event) {
this.title = "Elegida: " + this.List1.selected;
}
}| Componente | Propiedades y métodos |
|---|---|
| Todos | text, enabled, visible, bg, fg, x, y, width, height, focus(), configure({...}) |
| Entrada, Texto, Contraseña | text (también value), readonly |
| Casilla, Opción | checked |
| Lista, Combo | items, index, selected, selection (varias), add(texto), clear(), remove(i) |
| Tabla de datos | columns, rows (listas u objetos), addRow(fila), index, selectedRow, clear() |
| Escala, Barra de progreso | value, maximum; la barra indeterminada, start() y stop() |
| Control de páginas | page (la página activa) |
| Vista HTML | html, setHtml(html, arriba); los enlaces y formularios con data-action llaman a su evento |
| Barra de estado | text, icon, set(texto, icono) |
| Temporizador | interval, start(), stop() |
| Diálogos Abrir y Guardar | await execute() (la ruta o null), readText(ruta), writeText(ruta, texto) |
La ventana (this) | title, message(texto), ask(pregunta), notify(texto), after(ms, función), close() |
El menú es el menú nativo del sistema: su evento recibe la opción elegida, como "Archivo/Abrir…". En el código también funciona require de Node (fs, path…).
Ejecutar, depurar y exportar
- Ejecutar (F9) genera la aplicación en
build/electrony la abre en su propia ventana. Lo que escribeconsole.logy los errores (con su línea deForm1.js) salen en la pestaña Salida. - Depurar (Mayús+F9) la abre con las herramientas de desarrollo de Chromium: sus puntos de parada se convierten en
debugger;en la misma línea, y allí tiene las variables, la pila, la consola, el paso a paso y el rendimiento. - Exportar la aplicación de Electron crea una carpeta con su
package.json: se abre en cualquier equipo connpm installynpm start.
Aún no están en Electron: el gráfico, el lienzo, la cinta de opciones, la integración API, el asistente IA, los informes, el icono de bandeja y las conexiones de datos. Tampoco «Pedir a la IA» ni la pestaña Pruebas. Llegarán en próximas versiones.