Before you start

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.

Babel

Webpack can combine different JavaScript files, but you know that to use React
and JSX you need more than that. Here comes Babel.

Babel takes files containing JSX and transforms them into regular JavaScript
that all browser can understand.

Actually it is much more powerful than that. For example, it supports using the
latest JavaScript standards like ES6 in your files. You can use lambda functions
and other nice features in addition to JSX.

$ npm install babel-core babel-loader --save

Bare in mind that you install babel in your local project folder. It is a good idea
to first create a project.json file with npm init.

babel-core is Babel itself and babel-loader will help us to use Babel together
with Webpack.

React

Yes of course, you also need React, and you can use NPM for that, too.

$ npm install react react-dom react-router --save

react and react-dom are part of the main React project. The former contains
the main react logic, while the latter is required for using React in the browser.

In addition, we also install react-router. A great component which helps when
you like to build a single page app with natural navigation.

File Structure

Now that you have everything installed in your node_modules folder, let’s
have a look how your app structure can look like.

You can see that the login component is not too complex either. Again it uses
require to get React, and then exports itself at the end of the file, just like
in Node.

I am not going to show you how the comments component looks like, but it is pretty
much the same.

You can use what you just saw with many more components and it will still work.

The main problem that you might encounter is what to do when you want use JS libraries
which don’t work well with webpack, but there are solutions around them.

Puting it all together

To put everything together you can run the following command

$ webpack --progress--color--watch

This command will never exit but it will build continuously your app as you change it.
In addition, it will provide you with a nice feedback.

You can run from the root of your project the http-server in another terminal

$ http-server

And then you can see your app by visiting http://127.0.0.1:8080.

Once you are ready for production stop webpack and just issue the following command

$ webpack -p

It will minify and optimize your build/bundle.js file.

Next

There are many places where you can go from this point. Here are a few ideas.

I just showed you a very simple app, which doesn’t use any other libraries besides
React and ReactRouter. You can try to add more useful libraries and then use them
with require instead of depending on global states.

Another place webpack can be very helpful is with CSS. You can configure it to
transform your multiple Stylus or Less files into single CSS.

Maybe you saw that above I used the onEnter hook on the ReactRouter routes to
implement a simple authorization mechanism. You can expand on that.

Did you like this article?

Please share it

Enter your email and get our NPM Cheat Sheet for NodeJS Developers and
the links to our 5 most popular articles which have helped thousands of
developers build faster, more reliable and easier to maintain Node applications.