Post1

ReactJS JavaScript Framework

Posted by Umesh Kumar Singh

What is ReactJS?

ReactJS is a front-end library developed by a collaboration of Facebook and Instagram. It enables users to create interactive, stateful, and reusable UI components. In 2003, Facebook released ReactJS as an open source JavaScript library to build user interface. Over the last few years, ReactJS has emerged as one of the most popular JavaScript libraries owing to the fact that it not only can perform on the client side but it can also be rendered server side, and they can work together inter-operably.

Additionally, ReactJS, also incorporates the concept of Virtual DOM, builds an in-memory data structure cache, computes the resulting differences, and finally updates the browser’s displayed DOM efficiently. Programmers are, thus, able to write code presuming the entire page is rendered on every modification, however, the React libraries only renders subcomponents that are actually modified.

ReactJS convert JSX to plain JavaScript objects and insert them into the Virtual DOM.

ReactJS Feature:-

  • Adaptability: – React JS can adapt with ease and convenience, and thanks to the short list of lifecycle approaches, it is very easy to understand and use. Also, the advent of ES2015 and ES2016 has led to more functional and user friendly programming, which works with render function of React JS.
  • JSX (JavaScript syntax extension):- although the programming community is divided on the separation of HTML from Java as both of them were very well integrated, the makers of ReactJS introduced JSX that ensured easier reasoning of a module.
  • SCMAScript: – with the wide availability of ECMAScipt6 and ECMAScipt7, programmer community believes that ReactJS features will become more prominent. That said, ECMAScipt7 is still work in progress, its features are in use by leading libraries. Users can also use these features with the help of an ES transpiler.
  • Server-side Communication: – it is one of the major reasons why ReactJS is a widely used library. The ReactJS library features lifecycle “hooks” that empower programmers to enable server requests.
  • Flux Library: – Flux is probably one of the best libraries that complement ReactJS, which makes it easy for programmer to manage data across the application.

ReactJS Advantage:-

  • It uses Virtual DOM, a JavaScript Object, which improves the application performance.
  • It can be used at both client and server side.
  • It uses a special syntax called JSX, which supports mixing HTML with JavaScript.
  • It is easy to write UI test cases as the virtual DOM system is implemented entirely in JS.

ReactJS Disadvantage:-

  • Programmers can’t break the components into presentational and container component.
  • Easy to track the code.
  • Difficult to manage component due to monolith behavior.

ReactJS using JSX:-

JSX is a syntax extension to JavaScript. It is similar to XML, with a tag name, attributes, and children. React uses JSX as a template in place of regular JavaScript to define the UI of the application. Programmers can, however, use ReactJS without JSX, however, thanks to the following advantages, programmers still prefer to use JSX with ReactJS.

  • JSX performs faster optimization while compiling the code into JavaScript.
  • JSX makes it easier and faster to write templates.
  • JSX is a type-safe and most of the error are easy to detect during compilation.

Example1:- [Code] JSX example

class myTestApp extends React.Component {

render() {

                                    return (

                                                <div>

                                                            <h1>JSX Header 1</h1>

                                                            <h2>JSX Header 2</h2>

                                                            <p>JSX paragraph!!!!</p>

                                                </div>

                                    );

                        }

            }

 

 

Example2:- [Code] JSX example with attribute

class myTestApp extends React.Component {

                        render() {

                                    return (

                                                <div>

                                                            <h1>JSX Header 1</h1>

                                                            <h2>JSX Header 2</h2>

                                                            <p message-attribute = “message”></p>

                                                </div>

                                    );

                        }

            }

 

In above code “message-attribute” is the attribute of p element

 

Example3: [Code] JSX example with CSS expression

class myTestApp extends React.Component {

                        render() {

                                    var headeStyle = {

                                                fontSize: 50px,

                                                color: ‘#FFFFFFF’

                                    }

                                     return (

                                                <div>

                                                                        <h1 style = {myStyle}>Header</h1>

                                                </div>

                                    );

                  }

}

 

Example4:- [Code] JSX example with arithmetic expression

class myTestApp extends React.Component {

                         render() {

                                     return (

                                                 <div>

                                                            <h1>{5+5}</h1>

                                                </div>

                                    );

                   }

}

 

In above code {5+5} represents an expression

 

ReactJS Component Lifecycle:- 

ReactJS provides several methods that notify the developer about the particular stage of process. These methods are called component’s lifecycle method and they are invoked in a predictable order.

The ReactJS component’s lifecycle methods are split in four phases:

  • Initialization
  • Mounting
  • Updating
  • Unmounting

 

  • Initialization:-

The initialization phase is when programmers need to define the default and initial values by implementing getDefaultProps() and getInitialState() methods.

The getDefaultProps() method is called once and cached (to be shared across instances) when the class is created, before creating any instance of the component. The getInitialState() method, on the other hand, is also invoked once before the mounting phase begins.

Example 4:- [Code] initialization phase of lifecycle

var App = React.createClass({

                        getDefaultProps: function() {

                                    console.log(‘getDefaultProps Called’);

                                     return {

                                                 text: “Loading!!!!”,

                                    }

                        },

                        getInitialState: function () {

                                    return {

                                                email: ‘using2@xavient.com’,

                                                  password: ‘*******’

                                    }

                        },

             render: function() {

                        console.log(“Render Called”);

                        return(

                                    <h1>{this.props.text}</h1>

                                    <div>{this.state.email}</div>

                                    <div>{this.state.password}</div>

                        ); 

            }

});

 

  • Mounting:-

The Mounting takes place when a component is being inserted into the DOM and has two methods:

  1. componentWillMount()
  2. componentDidMount()

The componentWillMount() is the first method called in this phase and it executes rendering on both server and client side, while the componentDidMount() is the second method invoked in this phase. It is invoked just once that too right after React inserts the component into the DOM.

  • Updating:-

During the update phase React component is already inserted into DOM. This phase has four methods:

  1. componentWillReceiveProps()
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. componentDidUpdate()

The first method invoked in this phase is componentWillReceiveProps(). It is invoked when a component is receiving new props. This method gives programmers an opportunity to react to a prop transition before they call the render() method.

The next method invoked is the shouldComponentUpdate() that allows programmers to decide whether the next component’s state should trigger a re-render. This method returns a Boolean value, which, by default, is true.

The next method componentWillUpdate() is called immediately before rendering, when new props or state are still being received.

The last method componentDidUpdate() is called immediately after React updates the DOM. This method enables programmers to interact with the updated DOM and perform actions post-rendering.

  • Unmounting:-

This phase only has one method componentWillUnmount() that is invoked immediately before the component is unmounted from the DOM. It helps cleanup invalidating timers or cleaning up any DOM elements created in componentDidMount()/componentDidUpdate().

Example 5: [Code] ReactJS component’s lifecycle

 

var Application = React.createClass({

componentWillMount: function(){

                        console.log(“ComponentWillMount called”);

},

componentDidMount: function(){

                        console.log(“componentDidMount called”);

},

getInitialState : function(){

                        return {status: true}

},

getDefaultProps: function(){

return {name: “Umesh”}

},

componentWillReciveProps : function(nextProps){

                         console.log(“componentWillReciveProps  called”);

},

shouldComponentUpdate : function(nextProps, nextState){

                        console.log(“shouldComponentUpdate  called”);

retur true;

},

componentWillUpdate: function(){

console.log(“componentWillUpdate called”);

},

render: function(){

console.log(“render called”);

return <h1 onclick={this.toggleState}>Hello</h1>

},

componentWillUnmount: function(){

console.logcomponentWillUnmount called”);

},

toggleState: function(){

                        this.setState({status:!this.state.status})

},

});

ReactJS using Flux:-

Flux is a programming pattern associated with the M of the MVC. It is the architecture accountable for creation of data layers in JavaScript applications and developing client-side web applications. It complements Reacts Composable view components with its unidirectional data flow until it is rendered on the screen. Thus, Flux is viewed more of a pattern than a framework with four major components:

  • Dispatcher
  • Stores
  • Views (React components)
  • Action

Also, the unidirectional data flow makes it easy to find errors as data flows through a strict pipeline in the application.

Unlike React, Flux doesn’t makes uses of a virtual DOM object to render changes, the interactions with user interface trigger a series of actions that alter the application data, with the View getting alerts on the changes.

Also, the code in Flux is predictable as compared to other MVC frameworks. Developers, thus, can build applications without worrying about complicated interactions between data resources.

Flux Application Architecture:-

Diagram 1:- Flux data flow

Controller Views: - The view will receive data from the store and re-render the app.
Stores
: - are the places where the application state and logic are held. Every store is maintaining particular state that will be updated when need arises.
Dispatcher
: - This is central hub of the app. All the data is dispatched and sent to the stores.Actions: – Actions are sent to dispatcher to trigger the data flow.

Points to Follow while Creating ReactJS Application:-

  • ReactJS is a component-based development, which means the big component of our page should be made up of several small components.
  • The first letter of the component name must be in capital letter.
  • The variable name package must be in {} and can’t be included in double quotes.
  • When adding an external css styles for the component, the class name should be written as “className” instead of class. When you add an internal style, it should be style = {{opacity: this.state.opacity}} instead of style = “opacity: {this.state .opacity};
  • The parameters are sent to internal components through the property, equally can also be sent to the parent. If you want to change some values, take this value into the state.

Conclusion:-

React and Angular offer completely diverse approaches to web application development for startup, small and midmarket businesses. Both technologies are powerful and flexible, while none of them is worse or better, than the other.

That’s it from our side, comments and suggestions are welcome.

Until next time!

Related Posts

  • Mobile App Automation Testing using ‘ESPRESSO’

    If you are a Mobile Apps Test Engineer, you cannot overlook the very reliable Google Product i.e. Espresso. Espresso is an automatic UI testing or as we call it “hands…

  • Introduction to TypeScriptIntroduction to TypeScript

    What is TypeScript? TypeScript is not a Framework but a programming language that helps in developing a JS framework. It is a superscript for JavaScript, which means you can even…

  • Understanding Teradata Wallet

    Teradata Wallet is a facility for storage of sensitive/secret information, such as Teradata Database user passwords. Users are able to save and retrieve items by using this facility. Teradata wallet…

  • Teradata IoT capabilities & Teradata ListenerTeradata IoT capabilities & Teradata Listener

    What is Teradata: Teradata is a relational database management system (RDBMS) that is: an open system, running on a UNIX MP-RAS or Windows server platform. capable of supporting many concurrent users from various…

  • Teradata Intelligent Memory (TIM)

    Overview of Teradata Teradata is a RDBMS (Relational Database Management System). This system is solely based on off-the-shelf (readymade) symmetric multiprocessing (SMP) technology combined with communication networking, connecting SMP systems…

  • Introduction to Messaging

    Messaging is one of the most important aspects of modern programming techniques. Majority of today's systems consist of several modules and external dependencies. If they weren't able to communicate with…

Leave a Reply

Your email address will not be published. Required fields are marked *