Home

Awesome

Unicorn Standard Starter Kit

This starter kit provides you with the code and conventions you need to get straight into building your React/Redux based app.

Happiness is six lines away

Prerequisites: node.js and git

git clone https://github.com/unicorn-standard/starter-kit.git your-repo-name
cd your-repo-name
npm install
npm start
npm run open # (from a different console window, otherwise open localhost:3000)

Presto, you've got a ready-to-customise application!

Unicorn Standard Starter Kit

Why use Unicorn Standard Starter Kit?

Getting Started

Put your name on it

Make sure your editor is happy

Start building

Show your friends

Structure

Entry point

main.js is the entry point to your application. It defines your redux store, handles any actions dispatched to your redux store, handles changes to the browser's current URL, and also makes an initial route change dispatch.

Most of the above will be obvious from a quick read through main.js - if there is one thing which may strike you as "interesting", it'll be the block which handles actors.

Actors

Read the introduction to actors

Each time your store's state changes, a sequence of functions are called on the current state of your store. These functions are called actors.

There is one important exception to this rule: actors will not be called if main.js is currently in the midst of calling the sequence from a previous update. This allows earlier actors in a sequence to dispatch actions to the store, with later actors in the sequence receiving the updated state.

The code which accomplishes this is very small:

let acting = false
store.subscribe(function() {
  // Ensure that any action dispatched by actors do not result in a new
  // actor run, allowing actors to dispatch with impunity.
  if (!acting) {
    acting = true

    for (let actor of actors) {
      actor(store.getState(), store.dispatch.bind(store))
    }

    acting = false
  }
})

The actor is defined in src/actors/index.js. By default, it runs the following sequence:

Model

Your model (i.e. reducers and actions) is pre-configured with three parts:

Navigation

The navigation state holds the following information:

Data

The data state can be thought of as the database for your application. If your application reads data from a remote server, it should be stored here. Any metadata should also be stored here, including the time it was fetched or its current version number.

View

The view state has a property for each of the view's in your app, holding their current state. For example, form state should be stored in the view models.

Directories

Other directories:

Main application files:

Main build files:

TODO