DEV Community

Cover image for SPA Boilerplate with React, react-redux, react-router, ES6, and webpack
Kenta Takeuchi
Kenta Takeuchi

Posted on • Originally published at bmf-tech.com

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

#boilerplate #es6 #react #reactrouter

This article was originally published on bmf-tech.com.

Overview

I created a simple boilerplate for SPAs using React. I'm just barely keeping up with the recent frontend technologies, so I don't have much confidence in the source code, but I think it has taken shape, so I'll make that excuse (_).

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

I believe most of these are the latest versions as of now, but I think react-router is one version behind.

Features

  • Routing
  • API Calls

That's it (--)

Demo

redux.gif

Source

Thoughts

When actually building a decent SPA, it becomes chaotic as you add more external libraries and the components get more complex, but I think that's due to my lack of design skills.

Top comments (0)