React JS - Add the React JavaScript

React JS - Add the React JavaScript

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 3: Add the React JavaScript code to the web application. This step will take the existing bootstrap template, which defined the layout of the page, and start to move that HTML in to React components. The React components are written in JavaScript, and use JMX as a template for the HTML fragments they replace.

This will involve the following steps:

Add the React JavaScript libraries

Set up the React framework

Create our first component

Create a second component, to be the parent of the first component

Step 1: Add the React JavaScript libraries

￼

Open the Web IDE, and then open your index.html page.

First, we need to add Angular to our application. Add the following to the <head> section of your HTML page:

The previous HTML standard (HTML 4) specified the ISO-8859-1 character set as the default. When HTML5 was released, the specification was updated to default to UTF-8. UTF-8 is a much more flexible character set, and can support languages from all over the world.

The React framework defaults to reading ISO-8859-1 characters. So, if we don’t tell it to use UTF-8 (which is what SAP Cloud Platform uses), React will not understand the characters and will throw several syntax errors.

The tag <meta charset=""> is now the recommended best practice in all HTML.

Step 3: Add JavaScript to page

￼

Next, we will create a JavaScript section to define our application. In this example, we will put the code in our index.html file, for convenience. Later, we will move this over to a separate file, which is the standard convention for working with large JavaScript applications.

Add a <script> element to the end of your <head> section. Add the following code:

WARNING The placement of this script element is critical! The script must be after the “import” of your React code.

<script type="text/babel">
</script>

Step 4: Add skeleton for component

￼

Next, we will add our first React component.

React is all about building components in JavaScript, and then inserting those components directly in to the HTML. A React component is both HTML and the JavaScript code that makes it work. Both pieces (the HTML and the JavaScript) are stored in a single location.

React was built to solve a issue called Separation of Concerns. Both the structure of the component and the logic of the component are in the same place. This allows you, the developer, to clearly see how the two interact and control both parts from a single location.

React is a lot like SAPUI5. In React, code is the center of the work, and HTML is built in to the code. This makes both SAPUP5 and React “code centric”.

This may not be very clear at the moment, but as you follow the tutorials, you will notice the differences.

Run the application. Nothing looks different, yet, because we haven’t attached the data to the HTML. That happens next.

Step 6: Add your first React component

￼

React is component based. Each dynamic element on the screen becomes a React component. Our first goal is to take our existing Bootstrap design (from the previous tutorial) and turn it in to a React component.

We will start by removing the existing HTML, and move it to the React framework

Go to your index.html file, select the following HTML code, and delete it.

In order to render the new React code, the browser requires a small piece of HTML telling it where to put the new React component.

Scroll down to the <body> tag, and add the following HTML inside the <div class="container"> tag:

<div id="product-list"></div>

Step 9: Run your application

￼

Run your application. The output should look exactly the same, even though the code has moved around. This means that React is now displaying the component, using the same format we used in our static Bootstrap layout.

Step 10: Add a list-group

￼

The first React component is a single list element. In order to have multiple list elements, the next component will be a container that holds multiple list items.

In Bootstrap, this is called a list-group. Our new component will hold a list group, and place the list items inside of itself. In React terms, this is called component Children.

Open your index.html file, and scroll to the <script> tag in the top of the document.

Add the following JavaScript in between your existing ListBox component, and the ReactDOM.render call at the end.