# 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