A brief look at React

React is a JavaScript library that provides a set of components and services and enables you to build user interfaces.

Here is a quote from reactjs.org:

"React is a declarative, efficient, and flexible JavaScript library for building user interfaces."

The library is developed and maintained by Facebook and is licensed under MIT. It's extensively used in building various applications at Facebook, including Facebook web and Instagram web.

React enables you to build view components that get updated when the application's state changes. The state here could refer to the underlying domain data, or it may reflect where the user is in the application journey. React ensures that the view components reflect the application state.

Here are some of the important features of React:

• JSX: Components in React applications use an XML/HTML-like syntax, known as JSX, to render the view elements. JSX allows you to include HTML in your JavaScript/React code; the familiar syntax of HTML with attributes in your React component's render function does not require you to learn a new templating language. This JSX is then used by preprocessors such as Babel to transpile HTML text to JavaScript objects that the JavaScript engine can understand.
• One-way data binding: React applications are organized as a series of nested components; a set of immutable values are passed to the component's renderer as properties in HTML tags. The component does not modify the properties (or props) it receives from its parent; instead, the child communicates the user actions to its parent component and the parent component modifies these properties by updating the component's state.
• Virtual DOM: In React, for every DOM object, a corresponding virtual DOM object is created that has the same set of properties as the real DOM object. However, the virtual DOM object lacks the power to update the view when the user interacts with the page. Components in React re-render the view elements whenever a change in state is detected, and this re-render updates the virtual DOM tree. React then compares this virtual DOM tree with the snapshot that was created before the update to determine the DOM objects that changed. Finally, React modifies the real DOM by updating only those DOM objects that changed.

Component-based architecture in React

Since its release in 2013, React has redefined the way that frontend applications should be built. It introduces the concept of component-based architecture, which, in essence, allows you to visualize your application as if it were made up of tiny, self-sustained view components. These view components are reusable; that is, a component such as CommentBox or Footer encapsulates the necessary functionality and can be used across the pages in the site.

A page in this context is itself a view component that is composed of other tiny view components, as shown here:

<Dashboard>
    <Header>
        <Brand />
    </Header>
    <SideNav>
        <NavLink key=”1”>
        <NavLink key=”2”>
    </SideNav>
    <ContentArea>
        <Chart>
        <Grid data="stockPriceList">
    </ContentArea>
    <Footer />
</Dashboard>

Here, <Dashboard> is a view component that encompasses several other view components (Header, SideNav, ContentArea, and Footer), which in turn are made up tiny components (Brand, NavLink, Chart, and Grid). The component-based architecture encourages you to build components that provide certain functionality and are not tightly coupled with any of their parent or sibling components. These components implement certain functionality and provide an interface through which they can be included in the page.

In the preceding example, a <Grid> component would include features such as rendering data in rows and columns, providing search functionality, and also an option to sort the columns either in ascending or descending order. The <Grid> component would implement all of the aforementioned features and provide an interface through which it can be included in the page. The interface here would include the tag name (Grid) and set of properties (props) that accept the values from its parent component. Here, the <Grid> component could interface with the backend system and retrieve the data; however, this would make the component tied tightly to the given backend interface, thus not making it reusable. Ideally, a view component would receive data from its parent component and act accordingly:

<Grid data="stockPriceList" />

Here, the <Grid> component receives a list containing stock price information through its data prop and would render this information in a tabular format. A component that includes this <Grid> component can be termed a Container component and Grid as a child component.

A Container component is also a View component; however, its responsibility includes providing its child components with the necessary data to render. A Container component could initiate HTTP calls to a backend service and receive the data required to render its child components. In addition to that, the Container component is also responsible for the positioning of the individual view components in its view area.

Creating a React component

A React component is created by extending the Component class provided by React as follows:

import React, { Component } from 'react';
import './button.css';

export class Button extends Component {
    render() {
        return (
            <button className={this.props.type}>
                {this.props.children}
            </button>
        );
    }
}

Here, the Button class extends React's Component class and overrides the render method. The render method returns the JSX, which will be rendered on the DOM when the page loads. The type and children properties are available in this.props. React allows you to pass data to its components through props and does so by using the following syntax:

import React, { Component } from 'react';
import { Button } from './components/Button/button';
import './App.css';

export default class App extends Component {
    render() {
        return (
            <div className="App">
                <Button type="secondary">CANCEL</Button>
                <Button type="primary">OK</Button>
            </div>
        );
    }
}

Here, we have wrapped the Button component inside a parent component, App, to render two button elements. The type attribute is consumed by the Button component to set the class name (className) of the CANCEL and OK buttons and text mentioned inside the Button tag. This can be referenced using the children property. The children property can be plain text or other view components. The child component gets a reference to the data provided by its parent component using this.props. The children property in 'this.props' provides a reference to all the child elements included between the tags by the parent component. If you've used Angular in the past, consider the preceding snippet as similar to how you would include elements using ng-transclude in AngularJS, or ng-content in Angular.

Here, the <App> component contains the <Button> component and can be referred to as a container component, which is responsible for rendering the buttons on the page.

The next step is to render the <App> component on the DOM. The <App> component serves as a root component, that is, a root node in a tree. Every component in the application has the <App> component as its top-most parent component:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; 
import './index.css'; 

ReactDOM.render(<App />, document.getElementById('root'));

This code is included in index.js, which imports the React and ReactDOM libraries. The ReactDOM library has a render method, which accepts the component to be rendered as its first parameter, and a reference to the DOM node where the root component has to be rendered.

When the app is run, the content inside the <App> component is rendered: