ReactJS is great. It allows you to create easily complex web applications and user interfaces, without worrying how all is going to update.

As any great technology it is very easy to start with. However, as soon as you begin writing more complex applications your React app begins to grow very quickly.

A complex application has many different React components, each requiring a lot of code to be described and to provide its functionality. It is no more practical to keep everything in the same file.

However, it is also not practical to include many JavaScript files as loading them takes way too much time, while preventing the rest of your page to render.

On the other hand if you know Node & NPM, you know how easy developing in JavaScript can be.

Wouldn’t it be nice if you had that same power while developing client side web applications?

Thankfully there is way to achieve that same kind of development, even using some npm modules, when developing React apps.

Before you start

You need to install NodeJS before you begin.

Webpack

Webpack is a great tool. It takes a bunch of files and as a result produces another bunch of files. Doesn’t sound like much, does it? :-)

In your case you would like that Webpack takes all your JavaScript files and produces a single file to be included in your web application.

Let’s install Webpack globally.

$ npm install webpack -g

Now, you should have the webpack executable on your path.

Let’s also install

$ npm install http-server -g

This is a simple but reliable http server for static files. It is ideal for serving your single page web applications during development.