Chapter 14. Creating UI with React

So far in this book, we have focused on the development of our back-end API; but our application won't be complete without an intuitive user interface (UI) our end-users can interact with. Thus, this chapter will focus on building a web application that consumes our API.

Specifically, by following this chapter, you will:

• Understand the pros and cons of different UI frameworks and libraries
• Learn about the basics of React, including JSX and virtual DOM
• Bundle our code using Webpack

Picking a front-end framework/library

As we've already discussed in Chapter 2, The State of JavaScript, single-page applications (SPAs) are a great improvement over the more traditional multi-page applications (MPAs) that uses a client-server architecture. With SPAs, a lot of the logic that was traditionally done on the server has been delegated to the client. This means there'll be less load on the server, and the application can respond more quickly to user interaction. Therefore, for our client application, we will be building an SPA. Now, the next step is to pick a technology stack for our SPA.

Vanilla JavaScript vs. frameworks

SPAs are often discussed in conjunction with popular frameworks and libraries, such as AngularJS/Angular, React, Vue.js, Ember, and Meteor; but we should remember that SPAs can be written with vanilla HTML, CSS, and JavaScript alone. We may also choose to employ utility libraries, such as jQuery, to abstract away prickly web APIs, such as XMLHttpRequest, and to...

Getting started with React

As mentioned earlier, although React itself is quite simple, the ecosystem around it can be a little overwhelming. Tessa Thorton, a former senior front-end developer for Shopify, once wrote a blog post titled How to learn web frameworks (ux.shopify.com/how-to-learn-web-frameworks-9d447cb71e68) In it, she reminded us that "Frameworks don’t exist to impress people or make your life harder. They exist to solve problems."

This reminds me of the first ever application I ever built, a clone of Amazon. It was built completely in vanilla JavaScript and PHP because I didn't even know there were frameworks available! However, there was a piece of animation I couldn't get right, and after Googling a lot (and finding the paradise that is Stack Overflow), I ended up using jQuery.

For learning how to program, this was not a bad strategy. It allowed me to understand what is possible without frameworks, and appreciate the framework more when I do use it.

Most tutorials will ask you...

Modularizing React

But for now, we must solve another pressing issue - our code is not very modular. Everything is defined inside a single <script> tag. Not only is this hard to read, but it is also not maintainable. We can't define every component in one file!

Furthermore, we are including libraries using <script> tags. Because some libraries depend on others (for example, react-dom depends on react), we must manually ensure our scripts are loaded in the right order.

We have already looked at CommonJS and ES6 modules when we discussed server-side modules. However, we must consider other factors when using modules on client-side code, such as:

• The size of each module. Dependencies are downloaded before the application is run. On the server, the application is only initialized once, after which it will keep running for a long time (weeks to years). Therefore, the initial time required for downloading dependencies is a one-time cost. On the client, however, these dependencies need...

Summary

In this chapter, we have built a basic Registration form using React, and bundled it using Webpack. In the next chapter, we will look at how to perform E2E testing for front-end applications using Selenium.