React

React is a JavaScript framework originally developed by Facebook, and is widely used and very popular within the JavaScript community. React uses a specific inline syntax for combining HTML templates and JavaScript code in the same file, which is named JSX, or JavaScript XML. Interestingly, React is only geared toward rendering components to the DOM, and does not provide an out-of-the-box framework for things like routing. For this reason, React is often combined with other frameworks, such as Redux for state management, or React Router for routing capabilities. That said, React is an extremely efficient rendering engine, and is generally a lot faster than other frameworks in terms of rendering speed. There are some, but not many, frameworks that render faster than React, the most notable of these being Backbone.

Along with its JSX syntax for combining HTML and JavaScript, React is actually a very simple framework to understand and use. Its primary principle is that rendering...

Introduction to React

In this section of the chapter, we will set up a React development environment, and explore the JSX syntax that React uses. We will also discuss how parent components pass information to child components through properties, or props, and how a component can track its own properties through what is known as React state.

React setup

Setting up a React development environment has, in the past, been a rather time-consuming and delicate operation. Getting React to work properly with TypeScript in the past only seemed to add to this complexity. The React community, however, has introduced a set of handy utilities to make setting up a React development environment a breeze.

We can create a fully fledged React application, complete with unit testing and TypeScript integration, by running the following command:

npx create-react-app product-list --template typescript

Here, we are running the create-react-app script directly with npx, instead of installing...

A React application

In this section of the chapter, we will build a React application that shows us a list of products. Clicking on any one of the products will show a full-screen dialog that will slide in from the right, with a detailed description of the product and some product specifications. The detail view dialog will also include a form that will allow us to specify how many products we would like to order.

Application overview

The starting screen for our application will be the product list, which shows a short-form version of each product, which includes just the name of the product, the switch type, and an image, as shown in the following screenshot:

Figure 12.6: React application showing a list of products for sale

Here, we can see a summary view of all the products that are available for sale. Each product is rendered in its own area, with the product name and switch type shown, along with a thumbnail image of the product itself. Clicking on any one...

Summary

We have covered a fair bit of ground in this chapter, as we built a sample React application. We started with the basics of React and JSX syntax, and explored the interaction of logic within JSX returning render functions. We then discussed how properties are used within React components, and what React component state is. We then built a React application to show a product list, and discussed the various components we needed to render the list itself, and a product details panel. We finished off with a discussion on React form input. In the next chapter, we will discuss another very popular JavaScript framework, named Vue, and will build a shopping cart-style application.