Boilerplate: Webpack + React + Redux

A boilerplate for playing around with react, redux and react-router with the help of webpack.

Contains:

  • a working example of a filterable table which you can play around with (look below).
  • ES6 – 7 Support with Babel
  • Redux dev tools to help you keep track of the app’s state
  • hot module replacement support so you can change modules or react components without having to reload the browser
  • a webpack production config so you can build the app and make it ready for production
  • Sass support, just import your styles wherever you need them
  • eslint to keep your js readable
  • much more…

Run the app

  1. npm install
  2. npm start

Once running, if you want to hide the redux dev monitor: CTRL+H

Yes, it takes a while to load the first time you open the app.

Is the hot module replacement really working?

Yup! Take a look:

The app updates without the browser having to reload. You don’t lose state!

Build the app

npm run build

This will build the app into the “dist” directory in the root of the project. It contains the index.html along with the minified assets, ready for production.

It should look something like the above image.

I don’t understand anything!

I went ahead and wrote a detailed series of posts on this project for you. I hope it helps you understand better:

Why doesn’t it have async?

To keep it unopinionated. You choose what async library you want. If you want to check out a full example with async in it, check this simple todo-app

Understanding a Simple React, React-Router and Redux Application in ES2015. Part 2

This is the third article in a series of posts on react, redux and webpack. Others:

  1. configuring webpack
  2. Understanding a simple react, redux and react-router app in es2015, part1.

Here, we will cover the routes configuration, the actions and all the react components starting from the Root.

Continue reading “Understanding a Simple React, React-Router and Redux Application in ES2015. Part 2”

Understanding a Simple React, React-Router and Redux Application in ES2015. Includes Hot Module Replacement and much more.

In this post I will try to make you understand how a javascript react application with redux and react-router works and how they play together. We will be using this boilerplate.

Continue reading “Understanding a Simple React, React-Router and Redux Application in ES2015. Includes Hot Module Replacement and much more.”

Tutorial: Webpack setup using React, React-Router and Redux for developing Front End applications. Includes Hot Module Replacement and much more.

In this post I will show you how to build and understand a webpack config file for developing applications with react, reactrouter and redux. I also provide a boilerplate to start developing right away.

If you already know how to set up webpack and wish to learn more on building and understanding react apps, see this post. It includes setting up hot module replacement in react components.

Continue reading “Tutorial: Webpack setup using React, React-Router and Redux for developing Front End applications. Includes Hot Module Replacement and much more.”

What are Javascript Prototypes?

I’m writing this post on javascript prototypes to help me further understand what they are by documenting, or rather summarizing, what I read. I hope that by doing this I also help you understand the subject. Prototypes, the prototype chain, the new keyword, the ES6 class keyword, Object.assign will all be discussed.

Continue reading “What are Javascript Prototypes?”