edisen-ui v1.0.16

edisen-ui

A demonstration of react components for communication with product, and exploration/definition of Vigor's react usage.

Setup

Run the following commands from repo directory:

Running for development

Run the following command:

npm run start-dev

Building for production

Run the following command:

npm run build

The project will be viewable in the browser at a link provided. On edit of a project file, the build will be re-rendered and the browser refreshed.

NOTE: When started it will take a few seconds to boot up, but re-renders due to file updates should be quick due to caching.

Decisions (soft)

In creating this demo, there were a few soft decisions made. These can be reviewed and updated as needed.

State manager

The library redux was chosen.

• https://www.npmjs.com/package/redux

Router

The universal (non-react specific) library router5 was chosen.

• https://router5.js.org/
• The routes changes are state driven from redux https://router5.js.org/integration/with-redux
• The wrapping library used is react-router5

Styling engine

We're using scss for our styles. All styles were ported from the previous vue project.

Component Sizing

We will be going with the Atomic Design strategy for classifying/grouping components. (Decision 14: https://vigorsystemsinc.atlassian.net/wiki/spaces/DEV/pages/490471443/Team+Decisions)

Atomic Design can be read about here: http://bradfrost.com/blog/post/atomic-web-design/

The directory structure will reflect the naming convention as follows:

• atoms
• molecules
• organisms
• templates
• pages

Pug templating support

Pug support in react components is given by the Babel "transform-react-pug" plugin

Component Specific Styling

A decision still needs to be made on this. However, there are a number of options outlined here:

https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822