SPA Boilerplate with React, react-redux, react-router, ES6, and webpack

bmf-san Application ja
#boilerplate#ES6#React#react-router#Redux#webpack

Overview

I created a simple boilerplate for building SPAs with React. Keeping up with the latest frontend trends is overwhelming, so I can't guarantee the quality of the source code, but I think it works for now (_).

Environment

Modules

  • axios
  • lodash
  • react
  • react-dom
  • react-router
  • react-redux
  • redux
  • redux-promise

Build Tools

  • babel-core
  • babel-loader
  • babel-preset-es-2015
  • babel-preset-react
  • babel-preset-stage-0
  • webpack
  • webpack-dev-server

Most of these are the latest versions as of now, but react-router might be one version behind.

Features

  • Routing
  • API calls

That's it (--)

Demo

redux.gif

Source Code

Thoughts

When building a more complex SPA, you end up adding more external libraries and creating more complex components, which can lead to chaos. I think this is due to my lack of design skills.