Writing Your First React NodeGUI App

React NodeGUI enables you to create desktop applications with JavaScript (React). React NodeGUI is a react renderer for NodeGui. This makes it extrememly memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions.

Hello World

Clone and run the code in this tutorial by using the nodegui/react-nodegui-starter repository.

Note: Running this requires Git and npm.

# Clone the repository
$ git clone https://github.com/nodegui/react-nodegui-starter
# Go into the repository
$ cd react-nodegui-starter
# Install dependencies
$ npm install
# Run the app
$ npm start

As far as development is concerned, an React NodeGUI application is essentially a Node.js application. The starting point is a package.json that is identical to that of a Node.js module. A most basic React NodeGUI app would have the following folder structure:

your-app/
├── package.json
├── index.js

React NodeGUI Development in a Nutshell

React NodeGUI apps are developed in JavaScript using the same principles and methods found in React Native development. React NodeGUI exposes native widgets in the form of React components. Also, since we are now not running inside a browser, there is no DOM. Hence browser based APIs are NOT available. But you do have access to complete NodeJs APIs along with some exported Qt Apis.All APIs related to React NodeGUI are found in @nodegui/react-nodegui module. Additionally you can also access APIs and features from NodeGui via the @nodegui/nodegui module. These can be required like any other Node.js module:

require("@nodegui/nodegui");
require("@nodegui/react-nodegui");

A simple main.js.

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

const App = () => {
  const [time, setTime] = useState(new Date());
  return (
    <Window minSize={{ width: 500, height: 200 }} styleSheet={styleSheet}>
      <View id="container">
        <Button
          text="Update Time"
          on={{
            clicked: () => setTime(new Date())
          }}
        />
        <Text id="result">{`${time}`}</Text>
        <Text id="result">{`Time in epoc: ${time.getTime()}`}</Text>
      </View>
    </Window>
  );
};

const styleSheet = `
  #container {
    qproperty-flex: 1;
    qproperty-flexDirection: column;
    qproperty-minHeight: '100%';
    qproperty-alignItems: 'center';
    qproperty-justifyContent: 'center';
  }
  #opBtn {
    font-size: 20px;
  }
  #result {
    font-size: 12px;
    qproperty-flex: 1;
    color: cyan;
  }
`;

Renderer.render(<App />, () => {});

The index.js should create windows and handle all the system events your application might encounter.

Running Your App

You can try your app by running npm start from your application's directory.

Trying this Example