Chapter 5
Electron + React
Desktop apps with Electron and React: the same designer, with the code in JavaScript.
Creating an Electron project
When you create the app, choose Electron + React. The Designer, the inspector and the events are the same; the code language changes: JavaScript, in the Form1.js file. The palette only shows the components Electron already has.
It needs Node.js (nodejs.org). The first time you run an Electron project, the studio installs Electron and React (about 100 MB) in its data folder; after that, every project shares them and starts at once.
The code: components with properties
Every event of the design is a method of the Form1 class, which extends FormDesign. Every component is this.Name, with simple properties: when you change them, the window repaints (with React).
class Form1 extends FormDesign {
form_create() {
this.List1.items = ["Madrid", "Lima", "Bogotá"];
}
Button1_click() {
this.Label1.text = "Hello, " + this.Entry1.text;
this.Status.set("Greeted");
}
List1_select(event) {
this.title = "Chosen: " + this.List1.selected;
}
}| Component | Properties and methods |
|---|---|
| All | text, enabled, visible, bg, fg, x, y, width, height, focus(), configure({...}) |
| Entry, Text, Password | text (also value), readonly |
| Check box, Radio button | checked |
| List, Combo box | items, index, selected, selection (several), add(text), clear(), remove(i) |
| Data grid | columns, rows (lists or objects), addRow(row), index, selectedRow, clear() |
| Scale, Progress bar | value, maximum; the indeterminate bar, start() and stop() |
| Page control | page (the active page) |
| HTML view | html, setHtml(html, top); links and forms with data-action call its event |
| Status bar | text, icon, set(text, icon) |
| Timer | interval, start(), stop() |
| Open and Save dialogs | await execute() (the path or null), readText(path), writeText(path, text) |
The window (this) | title, message(text), ask(question), notify(text), after(ms, function), close() |
The menu is the system's native menu: its event receives the chosen option, such as "File/Open…". Node's require also works in the code (fs, path…).
Run, debug and export
- Run (F9) generates the app in
build/electronand opens it in its own window. Whatconsole.logwrites and the errors (with theirForm1.jsline) go to the Output tab. - Debug (Shift+F9) opens it with Chromium's developer tools: your breakpoints become
debugger;on the same line, and there you have variables, the stack, the console, stepping and performance. - Export the Electron app creates a folder with its
package.json: it opens on any computer withnpm installandnpm start.
Not in Electron yet: the chart, the canvas, the ribbon, the API integration, the AI assistant, the reports, the tray icon and data connections. Nor “Ask the AI” or the Tests tab. They will come in future versions.