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.
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 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? :-)
Let’s install Webpack globally.
Now, you should have the
webpack executable on your path.
Let’s also install
This is a simple but reliable http server for static files. It is ideal for serving your single page web applications during development.
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
babel-core is Babel itself and
babel-loader will help us to use Babel together
Yes of course, you also need React, and you can use NPM for that, too.
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.
Now that you have everything installed in your node_modules folder, let’s have a look how your app structure can look like.
This is the base structure which I use for all kind of single web apps, both simple and complex.
There are two critical files. First, there is index.html, which is the entry point of your application. It is actually very simple
It is only 11 lines. Don’t worry about
build/bundle.js, you will see what it is
a single file.
This little html snippet loads your styles and your React application and that’s it.
Before you begin developing you need to tell Webpack how to build your application.
You tell it with the
webpack.config.js file, which is in the root of your project.
It tells which file is the entry point of your application, where the end result should be stored and then which files should be transformed by Babel.
In this case Babel will transform all .js files as long as they are not in node_modules.
Your first App
Now that you have all the structure in place, let’s make an example app to see how to use it.
It will consist of three files. The entry file, a login component and a component capable of storing comments.
Let’s look at your app.js file
In this simple application, there are only two screens. One will display a list of comments, the other one will display a login screen.
As you can see just like in Node, you can use
require to load additional modules.
You can load local modules and also those installed with NPM. Of course, not all NPM libraries will work, but many do work.
Webpack is smart, and can follow all your require statements to include and load
all the files that you need and then to produce a single
Another interesting component is the React Router. The
/ path will show the
comments and the
/login path will display a login component.
The other part of the code from above insures that when a user is logged then the comments are shown and the login screen is shown otherwise.
Let’s see how our login component will 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
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
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
It will minify and optimize your build/bundle.js file.
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
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.