React NodeGui

A React NodeGui application is a Node.js application. It uses native components instead of web-based components. The project structure is similar to a standard Node.js module, typically requiring a package.json and an entry point like index.js.

You have access to all Node.js APIs and modules, as well as the @nodegui/react-nodegui and @nodegui/nodegui modules. Note that because this runs in Node.js and not a browser, browser-specific APIs are not available.

To build the project, use the standard npm build command.

npm run build

React NodeGui supports various native widgets such as View (similar to a div), CheckBox, and PushButton.

• Native Widgets: A full list of supported widgets can be found in the Native widgets documentation.
• Customization: To move beyond native looks and create custom designs, you must use the styling system.

The View component is used to encapsulate other components and provide structure, functioning similarly to a div in web development. It is based on NodeGui's QWidget and serves as a base for many other component props.

import React from "react";
import { Renderer, Button, Window, View } from "./index";

const App = () => {
 return (
   <Window>
     <View>
       <Button style={buttonStyle} text={"Hello"} />
       <Button style={buttonStyle} text={"World"} />
     </View>
   </Window>
 );
};

const buttonStyle = `
 color: white;
`;

Renderer.render(<App />);

To set a component to a specific, unchanging size, add fixed width and height properties to its style. This is useful for components that should not resize regardless of the window or parent dimensions.

import React from "react";
import { Renderer, View, Window } from "@nodegui/react-nodegui";

const App = () => {
  return (
    <Window>
      <View style={viewStyle} />
    </Window>
  );
};

const viewStyle = `
  width:50px;
  height:30px; 
  background-color: yellow;
`;

Renderer.render(<App />);

To start a local development server that opens a browser window and supports live reloading for changes, use the yarn start command.

$ yarn start

To debug a React NodeGui application in Visual Studio Code, you must use the qode runtime executable instead of the standard node executable. This allows the debugger to attach to the process managed by NodeGui.

1. Open your project in VSCode.
2. Create a .vscode/launch.json file in your project root.
3. Add the following configuration to the configurations array.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Qode Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/qode",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/qode.exe"
      },
      "args": ["./dist/index.js"],
      "outputCapture": "std"
    }
  ]
}

Styles in React NodeGui cascade from parent to child. An arbitrary component's effective style is a merge of the stylesheets set on all its ancestors.

Precedence Rules:

1. Inline Styles: The component's own style prop always takes precedence over any inherited or global stylesheet, regardless of specificity.
2. Ancestry: When multiple stylesheets are inherited, the parent's stylesheet is preferred over the grandparent's, and so on.

To develop with React NodeGui on macOS, ensure you meet the following requirements:

• OS: macOS 10.10 (Yosemite) or higher (64-bit only).
• Node.js: Version 12.x or higher (using a version manager like nvm is recommended).
• CMake: Version 3.1 or higher.
• Build Tools: Make and GCC v7.

Verify your Node.js and npm installation by running:

node -v
npm -v

# This command should print the version of Node.js
node -v

# This command should print the version of npm
npm -v