https://github.com/edulan/react-app-example

Electron application example using React and MobX
https://github.com/edulan/react-app-example

electron mobx react

Last synced: about 2 months ago
JSON representation

Electron application example using React and MobX

• Host: GitHub
• URL: https://github.com/edulan/react-app-example
• Owner: edulan
• Created: 2016-08-14T19:42:42.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-28T20:34:23.000Z (over 8 years ago)
• Last Synced: 2024-12-15T02:03:11.911Z (2 months ago)
• Topics: electron, mobx, react
• Language: JavaScript
• Homepage:
• Size: 79.1 KB
• Stars: 21
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React application example

This is an example of a desktop application using Electron, React and MobX.

This project is based on create-react-app, but has been ejected and further configured to suite its special needs.

## Usage

Start dev server

```

npm run build:watch

```

Start electron application (development mode)

```

npm start

```

Run tests

```

npm test

```

## Application

### Folder structure

* config

* src

  * components

  * stores

  * services

  * queries

  * index.js (react app entry point)

* test

* index.js (electron app)

### Architecture

This applications follows MobX conventions, in which everything is based on state and changes in the UI are reactions to state changes.

Components only receive stores via props and interact with the external world via those stores. Stores are globally available for components via a `Provider`.

Stores exposes a simple API to abstract components from outside world. Stores uses services to perform all actions that mutate state.

Services are responsible of retrieving/sending current state from/to persistance layer. Queries functions are used to communicate with persistance engine.

Queries encapsulates persistance specific domain language. They are kind of adapter.

### Bootstrap

Bootstrap process is responsible of setting up all the needed engines for application to start. Currently there are 2 main ones:

* Prepare DB migrations

* Initialize routing

### DB

IndexedDB is used as persistance engine. Dexie is the wrapper around it that the application uses to commmunitcate with DB storage.

### Routing

Based on state

### Authentication

Uses hashed passwords

### I18n

In progress. Evaluating react-intl

### Tests

Uses Electron and Mocha for testing. Enzyme is the framework election for testing components