117 lines
3.4 KiB
Markdown
117 lines
3.4 KiB
Markdown
# Writing Your First React Desktop App
|
|
|
|
React Desktop enables you to create desktop applications with JavaScript (React). React Desktop 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-desktop-starter`][quick-start] repository.
|
|
|
|
**Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/).
|
|
|
|
```sh
|
|
# Clone the repository
|
|
$ git clone https://github.com/nodegui/react-desktop-starter
|
|
# Go into the repository
|
|
$ cd react-desktop-starter
|
|
# Install dependencies
|
|
$ npm install
|
|
# Run the app
|
|
$ npm start
|
|
```
|
|
|
|
As far as development is concerned, an React Desktop 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 Desktop app would have the following
|
|
folder structure:
|
|
|
|
```text
|
|
your-app/
|
|
├── package.json
|
|
├── index.js
|
|
```
|
|
|
|
## React Desktop Development in a Nutshell
|
|
|
|
React Desktop apps are developed in JavaScript using the same principles and methods
|
|
found in React Native development. React Desktop 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 Desktop are found in `@nodegui/react-desktop` 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:
|
|
|
|
```javascript
|
|
require("@nodegui/nodegui");
|
|
require("@nodegui/react-desktop");
|
|
```
|
|
|
|
A simple `main.js`.
|
|
|
|
```javascript
|
|
import { Renderer, View, Text, Button, Window } from "@nodegui/react-desktop";
|
|
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
|
|
|
|
Clone and run the code in this tutorial by using the
|
|
[`nodegui/react-desktop-starter`][quick-start] repository.
|
|
|
|
**Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/).
|
|
|
|
```sh
|
|
# Clone the repository
|
|
$ git clone https://github.com/nodegui/react-desktop-starter
|
|
# Go into the repository
|
|
$ cd react-desktop-starter
|
|
# Install dependencies
|
|
$ npm install
|
|
# Run the app
|
|
$ npm start
|
|
```
|
|
|
|
[quick-start]: https://github.com/nodegui/react-desktop-starter
|