Overview of React JS and Components in React JS

Usually, people see react as a framework but it is not a framework it’s a popular JavaScript library used for developing reusable complex interactive UI (User Interface) for web and mobile. A framework is a piece of code that tells how to run the architecture of the project and helps to develop and deploy the software applications easily. The framework calls the library for our code according to our use whereas the library is a collection of reusable functions used by programmers in which we can reuse the precompiled code, class, templates, etc., Angular.js and vue.js are JavaScript frameworks while React.js and jQuery are JavaScript library.

React was developed by Facebook software engineer Jordan Walke in 2011 for the Newsfeed feature. It was released to the public in July 2013 version V0.3.0. It works on a declarative paradigm which makes it an efficient, and flexible open-source component-based front-end JavaScript library with a rich ecosystem for developing complex UI processes, and data processing. It is in charge of the view layer of an application so it’s a ‘V’ in MVC. Simple views are designed for each state in an application and efficiently update and render the component which needed to be changed when the information changes. The code becomes more predictable and easier to debug due to the declarative view.

Features

Instead of real DOM react use Virtual DOM. In Virtual DOM when an object needs to be changed or updated only that state is changed while in real DOM all the states are changed this makes Virtual DOM lightweight in memory.

It makes web applications speedy and get high-performance cause only the needed component is changed. Components are the core building block for a React application. The application usually contains multiple components and splits UI into reusable and independent parts which can be processed separately.
It follows one-way binding in React makes everything accessible and quick.
JSX is a syntax extension for JavaScript used with react to illustrate what the UI should look like. By JSX we can code HTML structure in JavaScript under the same file.

Server-side rendering is used which gives better control over it. Serve side rendering is the ability of the JavaScript applications to render the server rather than the browser.

Advantages

React.JS is popular and is great for businesses because it has lots of merits
Performance of the application increases.

Fast rendering compared to other frameworks.
Used conveniently on both Server-side and Client-side.
No wastage of memory.

Code readability increases cause of JSX.
UI test cases become very easy.
Having a rich user interface.

SEO friendly.
One-way data flows make code stable.
Reusability of the component makes code less.

Easy debugging tools.
Better maintenance.

Virtual DOM

DOM stands for Document Object Model is an API that links HTML and XML documents in a logical tree structure called nodes and holds data between the nodes about the parent-child relationship. Like real DOM Virtual DOM is a node tree that consists of elements, attributes, and content as objects and properties.

Working on Virtual DOM

Whenever the primary data is changed the entire UI is re-rendered in logical tree structure i.e., Virtual DOM representation then the difference is calculated between the previous (Real DOM) and Virtual DOM. After all the calculations are done real DOM is updated only part which was supposed to be changed.

JSX

JSX stands for JavaScript XML. There is a syntax extension of JavaScript which is JSX when used with React it determines what the UI should look like. HTML structures in the same file containing JavaScript code can be written by using JSX. This makes the application robust and boosts its performance. The browser can’t read JSX directly because it is not a regular JavaScript object. JSX file can be transformed into the JavaScript object using JSX transformers like Babel then it is passed to the browser which enables the browser to read JSX.

React instead of other frameworks

Dynamic web applications are created easily. Easy creation of dynamic applications because it provides less coding more functionality and less complexity compared to others.

The cause of Virtual DOM performance is improved and makes web apps perform faster.
Components are reusable reducing development time. Components have their own logic and controls which can be reused through the application.
Unidirectional data flow or one direction binding it becomes easier to debug errors and know the location of the problem occurring at the moment.

Easy debugging through dedicated tools by Facebook makes the process of debugging easy n fast. A Chrome extension is released for debugging React applications by Facebook.

Limitations

The library is vast and takes time to understand.
Code becomes a little complex while using inline templates and JSX

Components

A React application usually consists of multiple components each component chargeable for rendering a small reusable piece of HTML. Components are nested with other components which becomes complex applications to be built. In simple words, we can say React is made up of small components. Components make takes easier for building UI. A piece of JSX code is returned in the component of React.

In React Functional Component and Class Component, there are two types of Components

Functional Component: Also known as Stateless Components. This type of component only contains the render method and doesn’t have its state. It is a JavaScript function that may or may not receive data as parameters. These components are not aware of other components. Function receiving data as parameter:

function Demo(props)
{
     .return <h1>Welcome to {props.name}</h1>;
}

Function not receiving data as parameter:

const Demo=()=>{
return <h1>Welcome to Lets React</h1>;

Basic Example of Stateless Component with HTML:

1. Index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello world</title>
    <!-- Script tags including React -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js">
    </script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel"> Script.jsx </script>
</body>

</html>

2. Script.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
class FirstComponent extends Component {
    render() {
        return (<div> Hello, {this.props.name} </div>);
    }
} 
render(<FirstComponent name={'User'} />, document.getElementById('content'));

Class Component

Also known as Stateful Components. It is a little bit more complex than the functional component. This type of component has a separate method for rendering to run JSX on-screen and holds and manages its own state. These components are aware of other class components for working with each other. Class-based components in React are created by JavaScript ES6 classes. A statement extends React.Component must be included in this component which creates an inheritance to React.Component, gives access to React.Component’s functions and a render() method are also required which returns HTML.


class Demo extends React.Component {

    render() {
        return <h2> Welcome to C#Corner</h2>;
    }
}

class Demo extends React.Component {
    render() {
        return <h1>Welcome to {this.props.name}</h1>;
    }
}

Example of Stateful Component

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello world</title> <!-- Script tags including React -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js">    </script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component {
            render() {
                return <h1>Hello from our app</h1>
            }
        }    
    </script>
</body>

</html>

Render() in React

A render() function is required for each component used in the class component which returns the HTML which is a representation of the DOM component. All elements must be grouped together inside one parent tag such as <groups>, <div> , <form>, etc., for rendering more than one element. This function creates a node tree out of the React components and then updates the tree in charge to the mutation in data caused by actions done by the system or user. Each time whenever the function is invoked result must be the same and pure.

By using this command ReactDOM.render() function will render our application on screen.

Example of Render of application on screen

var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);&nbsp;

State in React

It is the heart of components in React. It is a built-in React object used to hold and manage information about the component. It is mutable and the value can be changed over time. Whenever it changes, the component re-renders. The change in state is done according to user action or system-generated events. It tells the nature of the component and how it will render. The state of a component is updated by using the built-in ‘setState()’ method.

Props in React

Props stand for Properties. It is a React built-in object that keeps the value of attributes of a tag and works similarly to HTML attributes. Props provide a way to pass information from parent component to child component, prop can’t be sent back from child to the parent component. This maintains unidirectional flow. As arguments are passed in functions Props are passed to the component in the same way. Used to render dynamically render data.

Summary

React is an open-source component-based front-end JavaScript library with a rich ecosystem for developing UI. It is the view layer of an application so it’s a ‘V’ in MVC. Using Virtual DOM there is no wastage of memory and its performance is increased. Due to its unidirectional flow, everything becomes accessible and quick by which complexity of code is less, fast rendering and easy to debug. In React Components are reusable which reduces the development time and due to this, also code doesn’t become complex. Besides this React is SEO friendly and has easy debugging tools to help in better maintenance. There are mainly two kinds of Components first, Functional components also known as Stateless which are not aware of other components, second class components are known as stateful components which are aware of other components and are used using React.Component command and render() function. The state is the heart of components in React which are mutable while Props are immutable. The state holds and manages the information of components while Prop keeps the value of attributes of a tag and works similarly to HTML attributes.