Everything React in a snap.

CobaltJS is a package that uses React and its associated technologies on Node to setup fast and effecient web applications. It streamlines all the best practices in an opiniated manner, bypassing the decisions that usually involve while creating a new application on React.

CobaltJS, along with being a starter kit on React also provides various other mechanisms and standards, with most effecient practices for speed.

Using cobalt is straight forward. Install this package globally and initiate cobalt setup.

npm install -g cobalt-js

In a fresh folder:

cobalt init demo (for setting up demo application)

cobalt start

Goto: localhost:3000

Cobalt JS is a combination of React and Redux. Documentation on these may be found in their source repositories.

Internally CobaltJS also uses the React Router and React Hot reloading.

#### Setting up routes CobaltJS uses the routes.yml file to define routes. The hierachy of routes may be defined in this YML file along with specifying the route path, the folder path (with respect to the modules folder) in which the react element to be rendered for the route may be found and the name of the file that contains the react element. The build bundles created by CobaltJS for the routes are designed in a specific manner, so as to load the app in minimum time. The route siblings at the top of the hierarchy are bundled seperately. So, if /abc and /def are two top level app paths, the nested contents of each of these will be bundled and loaded seperately and lazily. This keeps the content loaded on the client side absolutely minimal and limited to the major portions of the app as needed, along with avoiding multiple requests, which might slow it down as well.

#### Modules The modules folder contains the react elements to be rendered. They are loaded into the DOM by the react router with the help of the routes.yml file. The creation and use of the elements is standard and may be found in the React documentation. Fixed Components: The modules folder has another folder named fixed_components. This can contain two files: header.js and footer.js. These files may be used to create header and footer for the application that will be loaded along with the first bundle for the app and will show on the top and bottom of every page.

#### Reducers Again, reducers are used and implemented same as are required by Redux and how to use them may be found in the Redux documentation. The setup with the store is already done by CobaltJS and the reducers are just needed to be exported via the index.js inside the reducers folder to get them working as they should. The react elements need to be connected to the store though, if access to the store is needed by it. Examples may be found in the CobaltJS demo app.

#### Models The models folder may be used to write code associated with a certain model. Actions may be written and used from here, as well as definitions of http requests.

#### SCSS The scss folder contains the .scss files that may be used in the application. These can be 'required' into module react element files to be loaded and added to the DOM via webpack.