React19

React19 is a fairly simple React/Redux boilerplate we use within our team.

Why redux? Redux offers an opinionated way of managing state that makes an app easy to understand if you've never been on a project. For us, easy knowledge sharing is the ultimate goal. A redux project is much faster to get to grips with than when other libraries are used such as mobx, because of predictable patterns. redux-devtools Chrome extension offers incredible insights into your app state, and offers time travel.

React packages included

• react
• react-redux
• react-router
• redux-saga
• redux-form

Front end

• Bootstrap 4 [beta] (Sass, flexbox)

Debugging

• Redux devtools (redux all the things)
• Flow and flow-runtime

Development

• Webpack server
• Hot reloading
• Flux Standard Actions (FSA)
• Jest

Utilities

• lodash (beware the footprint)

!important note about CSS:

Because Bootstrap relies on a lot of global css, this becomes difficult to use with css-modules. So we allow global css, but you can isolate css easily using a classname like this:

.__loginComponent {
  color:blue;
}

Webpack looks for classnames prefixed like this and generates a hash, so you can attach a unique parent class to your components without worrying about collisions with other components, while still being able to use global bootstrap css within your components.

This is only if you're intending to separate your scss files per component, rather than having a lot of global css imported to main.scss.

For example, you import the component styles into your component:

import loginStyles from './login.component.scss';

const loginComponent = () => (
  <div className={styles.__loginComponent}></div>
);

This outputs something like

<div class="__loginComponent5a1da8"></div>

Installation

Simply clone the project and use yarn or npm to install dependencies.

Available commands:

yarn run dev (webpack dev server)
yarn run build (webpack build for prod)
yarn run test (jest)

Other libraries

Here are some recommended libraries to install for meeting a variety of project requirements:

Animation and data

• react-motion (transitions, animations)
• reselect (advanced redux lib for memoization; use this to improve rendering of large amounts of data)

Components

• react-select (custom typeahead/select)
• react-dates (datepicker by airbnb)
• react-slick (port of Slick)
• react-google-maps

Monitoring

• redux-analytics (redux middleware for tracking)
• react-ga

Other

• react-native-starter (very nice boilerplate for react-native, especially if you want to use parse-server sdks)
• oy (render emails)

Useful links

• https://github.com/xgrommx/awesome-redux

Boilerplate by Lab19 Digital.