March 3, 2016 | Software Consultancy
In this post, I’ll be sharing some React/Redux boilerplate code that Vince Martinez and I have been developing recently. It’s primarily aimed at developers who are familiar with the React ecosystem, so if you are new to React and/or Redux, you might like to have a look at Getting Started with React and Getting Started with Redux.
WRITTEN BY
In a previous post, Facebook’s React, and the Signal:Noise Ratio, I looked at where React fits in amongst its rivals.
Many developers who have had some experience using React over the last year or two will most likely have been using one of the libraries that implements the Flux pattern – so why use something different?
Dan Abramov, author of Redux, provides a very useful set of reasons for using Redux. TL;DR:
We have tried to anticipate the requirements of developing a typical React app, while avoiding producing a bloated codebase. Here’s a quick look at the home page:
We are using react-router
as the routing library, along with react-router-redux
to keep react-router and redux in sync. These allow us to exploit redux-devtools
(more details below).
Development tools included:
redux-devtools
– a live-editing time travel environment for Reduxwebpack
, configured with:
webpack-dev-middleware
and webpack-hot-middleware
react-transform-hmr
and babel-preset-react-hmre
.eslintrc
pre-loaderNODE_ENV
It’s also definitely worth watching Dan Abramov’s React Europe 2015 talk on Hot Reloading with Time Travel.
We have included the use of some recent advances in Javascript development:
So we can now write code like this simplified version of ProfileEditPage.js
:
import React, { PropTypes, Component, Element } from 'react';
import { FormattedMessage } from 'react-intl';
import { User } from 'declarations/app';
import ProfileEditForm from 'containers/ProfileEditForm/ProfileEditForm';
import { updateUser } from 'redux/modules/user/user-actions';
import { autobind } from 'core-decorators';
import { connect } from 'react-redux';
import { messages } from './ProfileEditPage.i18n';
export class ProfileEditPage extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
user: PropTypes.object,
};
@autobind
handleUpdate(user: User) {
this.props.dispatch(updateUser(user));
}
render(): Element {
return ();
}
}
const mapStateToProps = (state) => ({ user: state.user, });
export default connect(mapStateToProps)(ProfileEditPage);
There is also a set of ESLint code-styling rules based on the AirBnB rules.
It can be difficult to choose which design library to use, but it would appear that Twitter’s Bootstrap currently has a broad uptake, so the project uses the react-bootstrap
Bootstrap components for page layout, menus and a form; it is also built responsively:
We are assuming that making a website available in more than one language is very often a requirement of a modern website, so all content has been rendered in English and Spanish using react-intl
.
As well as a development build incorporating hot module reloading and live-editing time travel, there is a sample production build:
$ npm run start # development build; point browser at http://localhost:3000/
$ npm run build # production build
Selecting the right-most menu item simulates a user login; implementation of actual login is left to the developer.
Once you have logged in, a menu option for another page is available, along with a link to log out:
Check src/routes.js
for examples of how to restrict certain routes to only be available when the user is logged in.
Development of HTML forms for Redux requires a rethink in terms of approach to development. We have used redux-form
for form integration with Redux, and redux-form-validation
for validation:
A naming convention seems to be emerging in the React community that allows us to distinguish between a stateless reusable component (“component”), and one that is dependent on state (“container” or “container component”). To this end, the directory hierarchy is separated into components
and containers
directories.
As an observation, an iteration pattern while developing often goes like this:
Michael Chan writes more about it in his Container Components post.
Some simple unit tests have been included that demonstrate unit testing with React and Redux. These are *.spec.js
files, and reside in the same directory as the code they are testing.
We’ve had a lot of fun putting this codebase together. It’s available on github here: https://github.com/opencredo/opencredo-react-boilerplate
Please feel free to comment, fork the project, and contribute!
Starting off:
Digging deeper:
This blog is written exclusively by the OpenCredo team. We do not accept external contributions.
Agile India 2022 – Systems Thinking for Happy Staff and Elated Customers
Watch Simon Copsey’s talk from the Agile India Conference on “Systems Thinking for Happy Staff and Elated Customers.”Lean-Agile Delivery & Coaching Network and Digital Transformation Meetup
Watch Simon Copsey’s talk from the Lean-Agile Delivery & Coaching Network and Digital Transformation Meetup on “Seeing Clearly in Complexity” where he explores the Current…When Your Product Teams Should Aim to be Inefficient – Part 2
Many businesses advocate for efficiency, but this is not always the right goal. In part one of this article, we explored how product teams can…