Understanding React

This article will cover what the React JS framework is and how the Kinetic application makes use of it. If you are new to Kinetic products, this article is for you. This article will not cover specific implementation of React code. The goal is to give you a general understanding of React and how Kinetic Data makes use of it.

What is React JS?

React is a JavaScript library used to build impressive user interfaces (UI). With the React framework, developers build single page applications (SPA). Facebook developed React as a means to manage their ever changing and complex UI.

What is an SPA?

SPAs load a single HTML page and do dynamic updates as the user interacts with the application. Because SPAs only request a single HTML page, they tend to create a better user experience (UX). The browser doesn’t make full page requests when navigating between pages. This, in turn, increases the application's performance. The responsibility to build the UI falls on the browser. The browser uses pre-built components to construct the UI. When there is a need for more data, the browser can make lighter weight network requests; Ajax is a common example.

React Components

React's pattern is to break the UI into small individual pieces. React refers to the pieces as components. A component could be as small as a button or more complex,t like a service card. The UI displayed to a user is a combination of many components.

• Components are the foundation of React.
• A single component is a reusable bit of code.
• Components can contain other components in their outputs; referred to as composition.

Component Examples

It is recommended that React components are developed using JSX. React components written in JSX will be rendered to the DOM.

• JSX is a preprocessor step.
• JSX can include HTML, React components, JavaScript expressions and JavaScript variables.

Basic 'Hello World' Component

The below example is the definition of a "HelloWorld" component.

  const HelloWorld = () => <div>Hello World</div>;

Note: React Components must be capitalized.

Simple Button Component

The below example is the defintion of a "Button" component

  const Button = () => <button className="btn" onClick={() => alert('hi')}>Click Me</button>;

Notes:

• HTML attributes are required to be in camelcase.
• To add the class attribute use "className".

Additional Information

What was presented here are the most basic parts of React. Visit the React docs website to learn more about the framework. Also, it is a good idea to take a self paced training course that covers the framework. It is a good idea to have a solid foundation in Javascript prior to working with React.

The concepts presented here are the most basic parts of React. Visit the React docs website to learn more about the framework. Also, it is a good idea to take a self paced training course that covers the framework. Before starting to learn React, you should have a solid foundation in Javascript.

React is only a piece of the SPAs that Kinetic data builds. Other tools leveraged by Kinetic Data's bundles are:

• React Router for managing application navigation.
• Redux for application state management.
• Recompose to assist in functional style programming.
• Redux Saga for handling application side effects.

How Kinetic Data Uses React

Kinetic Data uses React to build the portals that interact with the Kinetic platform. React development environment allows for the separation of portal code from application code. Through a build process, the React code is output to static Javascript files. The deployment of the static files is independent of the Request application.
The portals interact with the Request application though the REST API. This allows for a complete separation of responsibility. The Request application is responsible to house and maintaining data definitions. The React portal leverages the data to build up useful displays for users.