Understanding React

Chad
UI/Theme Developers

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](https://reactjs.org/docs/getting-started.html) 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 applications performance. The responsible 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 a 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 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 recomended that React components be developed using JSX. React components writen in JSX will be render to the DOM.

  • JSX is a preprocessor step.
  • JSX can include HTML, React component, 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 camal case.
  • To add the class attribute use "className".

More on React

What was presented here is 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 programing.
  • Redux Saga for handling application side effects.

How Kinetic Data leverages 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. Though a build process the React code is output to static Javascript files. The deployment of the static files are 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 maintain data definitions. The React portal leverages the data to build up useful displays for users.