III. Folder structure - 24CaretSolutions/2b_n4tive GitHub Wiki

As a basis for the project folder structure we are using this example.

Top-level folders and files

/components - shared components that can be used anywhere in the app
/store - files related to app state in central store
/scenes - application screens and their locals components
/hoc - higher order components
/services - modules that can be used by components, store or scenes
App.jsx - top-level component
Content.jsx - app content root component that is rendered if user is logged in
index.js - entry point of the app
store.js - module that initializes app central store

Typical component folder structure

Each component folder contains everything that component needs to work on its own, such as its own styles, images, translations, set of actions, utilities modules as well as unit or integration tests.

For example,

/Header
  /__snapshots__
  /img
  /NavLink
  api.js
  container.jsx
  container.spec.jsx
  index.jsx
  index.spec.jsx
  styles.js
  utils.js
  utils.spec.js

We divide components into presentational and container components following the pattern which is described here. Container part of the component goes to container.jsx when presentational part goes to index.jsx.

Typical scene folder structure

Every scene folder generally contain the same set of folders and files as component folder, but in addition it can contain folders of nested scenes. We prepend these folders name with underscore, so it will stack it on the top of the tree and separate them from usual components folders. In the example below, scenes Login and Register are nested in the parent Auth scene and SocialProvider is just child component.

/Auth
  /__snapshots__
  /_Login
  /_Register
  /SocialProvider
  ...

Store folder structure

Folder tree inside store mirrors application central store object. In the top-level folder it has a root reducer that combines lower level reducers into one which is used in initializing store function. Every second level folder contains all files that are necessary to put or get particular piece of data to/from application central store such as reducers, action types, action, utilities and test suites. Besides that, second level folders contain its own root reducer that combines reducers of nested state items. Overall, there are three level of nesting in the store folder.

Example of folder tree is shown below:

/store
  /data
    /comments
      __snapshots__
      actions.js
      actions.spec.js
      actionTypes.js
      api.js
      reducer.js
      reducer.spec.js
    /events
    /users
    ...
    reducer.js
  /screen
    /alert
    /searchBar
    ...
    reducer.js
  reducer.js

Services folder structure

Services are independent modules that can be used by components or scenes. Here is a short description of each module:
/api - wrapper (or adapter) around all api calls
/constants - any constants that used in the app (eg colours or shared styles)
/propTypes - type definitions of frequently used pieces of data
/utils - application utility functions

Global aliases

Sometimes when importing module from another branch of the folder tree, it is better to use an absolute path rather than an relative one. For that cases use the following global file path aliases:
~ - project root folder