Development guide (React)

Create new top level scenes (pages)

A scene is a set of components rendered together. Rule of thumb is:

• if you use the router to show a specific view (e.g. the Home page or a settings page)

then chances are good, that this is a scene.

A top level scene is a scene that changes the top level header (the dark box below the menu bar). Top level scenes may be composed of other scenes:

Organization # Top level scene, displays information about org in header
  - overview page # scene
  - members page # scene
  - settings page # scene
    - member settings # scene
    ...

and so on.

Scenes (which are code-wise normal components) are created in the src/scenes directory, together with sub-scenes and scene-specific components in subdirectories.

Routes for top level scenes are entered into the file src/routes.js. Conceptually they are not different from other routes, but since we have to set the scene content together with the scene header, this is how we remove code duplication. Other routes are defined inline (see https://reacttraining.com/react-router/web on how).

API data

We're using react-apollo to get our data from our GraphQL backend API. To develop without a backend, stubbing the return data is possible in normal Javascript code:

const queryData = {
  data: {
    myQuery: {
      foo: "bar",
      count: 4,
      baz: {
        bla: "shoo"
      }
    }
  }
};

class FooComponent extends Component {
  // use queryData as if it came from the API
}