Requires React Node js

Reaching into the tool box: a toolchain for React

Toolchains promote flexibility and simplify the development process - In this blog post we are building a toolchain for the popular React front-end technology. We take a look at the components of a toolchain and learn how we can use them to optimize our workflow with React.

What is React?

React is a JavaScript library that enables us to develop interactive user interfaces for web applications. With React we can write our own UI components with JSX (JavaScriptXML), in an HTML-like syntax.

In order to use React, we can integrate the required script files via CDN’s (“Content Delivery Networks”). Content delivery networks make files available, so we don't have to download the libraries we need ourselves.

We have to integrate the React library as well as the virtual ReactDOM. Babel, a JavaScript transpiler, is also required. Babel enables us to use JSX as it translates the syntax of JSX into JavaScript that the browser can understand.

You can read about the individual concepts and functions of React in the React documentation or you can use the create-react-app project to generate a complete application.

What is a toolchain and what are they good for?

A tool chain makes it possible to link several tools and technologies with one another.

A toolchain structured and simplifies development and build processes and offers flexibility, since different processes and technologies can be simply “linked” or exchanged.

We can use React via CDNs as described above. However, implementing a toolchain and not using CDNs would offer us the following advantages:

  • Free choice of tools and technologies
  • Shortened loading times, since the client no longer has to request files via CDN’s
  • Performance gain, because Babel can no longer be performed on the client side, but once per build process on the server

Come on let's build a toolchain for React!

In the following we implement a toolchain using Node.js. You can see the finished toolchain in action in my showcase project. Our toolchain should do the following:

  • JSX transpilation (Translation from JSX to native JavaScript)
  • JavaScript bundling (Merging multiple JavaScript files)
  • JavaScript minification (Reduction of the file size as part of a build process)

We want to be able to operate the toolchain via the command line and create a production-ready build with one command.

After we have installed Node.js and initiated a project in a folder with the command, we can start. NPM stands for “Node Package Manager” and we will use it to install various packages.

JSX transpilation with Babel

Babel is a JavaScript transpiler that translates various JavaScript-extending syntax such as JSX into downward-compatible JavaScript.

To use React with JSX, we have to convert the files back into native JavaScript, as JSX is not natively understood by browsers.

React also recommends using the ES6 (“EcmaScript 2015”) syntax, which extends JavaScript with practical functions such as “Class Functions” or “Arrow Functions”. Since ES6 is not (yet) supported natively by all browser versions, we also want to translate that into native JavaScript.

In order to be able to use Babel we have to install the Babel module with the presets for React via NPM:

With the option we can create a watcher which “looks” over part of our project and, when changes are detected, transpiles the files and saves them in the specified folder. <ZuBewachenderOrdner> and <SpeicherOrdner> are relative paths which can refer to e.g. and directory. With the help of the option we only have to specify the installed preset and not configure Babel any further.

Bundling with Browserify

It would be great if we could write each React component in its own JavaScript file. This would prevent us from generating a thousand-line spaghetti code.

Browserify is a JavaScript bundler that enables multiple JavaScript files to be merged into one file using the “require syntax”.

To do this, we install the Watchify package, an extension of Browserify. Like Babel, Watchify can create a watcher that reacts to changes in our project.

After the installation we can also create a watcher here. <ZuBewachendeDateien> refers to the files generated by Babel.

Minification with Terser

If we now look at the JavaScript file generated by Browserify, we notice that its file size has increased.

Of course, this results on the one hand from the fact that we now only have one large file. On the other hand, the polyfills, i.e. the downward-compatible JavaScript code generated by Babel, are responsible for the file growth.

Therefore we reduce the file with a JavaScript minifier by removing unnecessary line breaks and spaces and shortening variable names. Our code therefore remains completely understandable for the computer, even if it is difficult for us humans to read. We should therefore only deal with this step when the software is delivered, because large files in particular cause long loading times, but can also burden the data volume of mobile users.

We install the JavaScript minifier Terser over NPM:

With Terser we can summarize our from Browserify <Zieldatei> at one <SpeicherOrt> lay down. The storage location can be, for example, the subdirectory of the project.

Chaining of the individual tools

Now we automate the above three steps with the help of the package runner NPX, which is able to execute the commands and has already been installed with NPM. However, we still need the Concurrently package, which enables several “NPM scripts” to be executed in parallel. We can reinstall the package via NPM as usual.

In order to define our planned commands and, we edit them in our project. We just have to <Transpile>, <Bundle> and <Minify> with the commands that we have written in the individual chapters.

Now we can execute our commands and to automatically update our project for changes and generate a build.

In our example we used the package runner NPX, because it is “supplied” with the NPM. Alternatively, we can also use task runners such as Gulp or Grunt. These require a little more configuration effort, but also offer a further level of functionality.

Conclusion

In this blog post we have developed a small toolchain that transpils JSX and ES6 into native JavaScript, merges individual JavaScript files and reduces them with an additional command.

This implementation is only one of many. A “good” toolchain ultimately depends on your own workflow. With the toolchain developed by us, it is easy to exchange individual elements or to expand them to include others.

For example we can:

  • Use Webpack as a bundler instead of Browserify
  • Extend our build process with a CSS minifier like clean-css
  • Run all tests again before our build process

No matter which tools we choose, our toolchain is just a handle in the toolbox away!