Fave-K/webapp

React Boilerplate

This is a simple, opinionated boilerplate to help quickly setup a react-redux appliaction

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Many of the boilerplate insprirations were drawn from this article

Prerequisites

• npm
• node js

Installing

clone the repo

git clone https://github.com/muneneevans/react-js-bolierplate.git

install node modules

npm install

Tools

The recommended editor for this is VS CODE with these extensions

• ES-Lint
• Prettier
• Chrome debugger

Folder Structure

After creation, your project should look like this:

react-js-boilerplate/
    public/
        build/
            main.js
            main.css
        index.html
    node_modules/
    src/
        Components/
        Containers/
        Services/
        Store/
            confitureStore.js
            rootReducer.js
        app.css
        index.html
        index.js
    package.json
    readme.md
    webpack.config.js

Running the tests

run test

npm test

Buidling the project

run build

npm start

Adding Actions/ActionTypes/Reducer/Selectors

The store is split up into domains as follow

Store/
    Domain1/
        actionTypes.js
        actions.js
        reducer.js
        selectors.js
    Domain2/
        actionTypes.js
        actions.js
        reducer.js
        selectors.js
    configureStore.js
    rootReducer.js

Example

Store/
    Posts/
        actionTypes.js
        actions.js
        reducer.js
        selectors.js
    Comments/
        actionTypes.js
        actions.js
        reducer.js
        selectors.js
    configureStore.js
    rootReducer.js

Combining reducers

All reducers are combined in the rootReducer

import { combineReducers } from "redux";

import domain1Reducer from "./Domain1/reducer";
import domain2Reducer from "./Domain2/reducer";

const rootReducer = combineReducers({
  domain1Reducer,
  domain2Reducer
});

export default rootReducer;

Configure the Store

The configureStore.js is already configured to accept the root reducer as the default store

Built With

• Node - The web framework used
• React - Componenet builder
• Redux - Js Flux management
• Seamless Immutable - compiling scripts
• Webpack - Dependency Management
• Babel - compiling scripts

Authors

• Evans Munene - Vorane
• Brian Savatia - Vorane

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License

Acknowledgments

• God
• Vorane Development Team