React JS - Create children components in React

React JS - Create children components in React

Break apart the large main components, moving functionality to child components

Details

You will learn

In this tutorial series, we will explore another technology for Single Page Application (SPA) development - React. React is another popular web framework, and is used by many companies for both internal and client-facing systems. These tutorials will parallel our SAPUI5 tutorials, building a visual interface using Angular, and connecting it to an OData back end service.

REACT tutorial series

Step 8: Up to this point, the tutorial has focused on adding functionality to the application. The components on the page, however, have grown very large and have many moving parts. REACT is designed to segment the components in to smaller “child” components. This is a very object oriented concept, where each component is compartmentalized. This makes maintaining each component easier and debugging faster.

This tutorial will focus on creating smaller child components. The focus is on components that do not render straight text, instead, they do some sort of translation on the data.

Here are the detailed steps:

Create a currency child component

Create an Available or Discontinued status component

Add a Category display component

Step 1: Add new currency component

￼

The currency in both the list and the detail is still the raw data coming from the server. Correctly formatted, it would be both locale specific, and also rounded to two decimal places.

Start by adding a new currency component to the JavaScript file.

Open the main.js file, and add the following code at the top, directly underneath the variable declarations:

Run the application. The list will show the Available/Discontinued tag with the CSS formatting.

Step 9: Add CategoryDisplay component

￼

The category display, in the modal detail, only displays a number. This number is the primary key to the actual Category object, which is a separate OData object. Using encapsulation, the category primary key can be resolved in to a name, using an OData call.

In this case, we will use the properties of the component to store the Categories that have already been loaded, so that there is only one single call for each primary key.

Create the new CategoryDisplay component by adding the following component to the top of your JavaScript file (under the variable declarations):