Starting with ReactJS or React.js

Rajnilari2015
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 1820 red flag
Rating: 5 out of 5  
 1 vote(s)

In this tour to explore ReactJS, we will learn how to start with ReactJS by supporting some of the roaring concepts of it with the help of examples.


 Download source code for Starting with ReactJS or React.js

Recommendation
Read An overview of HTML5 DOM before this article.

Introduction

ReactJS or React.js is a open source JavaScript library that basically fit's into the View(V) part of a MV* architecture. React was created by Jordan Walke, a software engineer at Facebook. Currently, the ReactJS is maintained by Facebook and Instagram. In this tour to explore ReactJS, we will learn how to start with ReactJS by supporting some of the roaring concepts of it with the help of examples.

What is ReactJS ?

ReactJS is a library and not a framework for the View Layer of a MV* pattern. It provides a template language known as JSX. The JSX is a kind of JavaScript syntax extension that is meant for expressing the UI design components in a much more readable way, very similar to XML syntax. Once the JSX is prepare, it is passed to the Render method of ReactJS and it is the Render function that hooks with ReactJS to bring the essential HTML which is the final React output. The Html/JSX being passed to Render function are call COMPONENTS in React terminology. These components store their own internal state inside the memory like updation of a textbox value, tab selection in a tab view control etc. Finally, by the Render method, the COMPONENTS are transformed into Html. Having said that, it is also possible to write a React Component without using JSX also.

How ReactJS works?

It creates a Virtual DOM (aka Fake DOM) and manipulates the changes in the Virtual DOM only for those DOM element(s) that has been changed by using the DIFF Algorithm. Modification inside the real DOM is very costly operation as lot of time we need to Bubble up and Tunnel Down the DOM Tree. In contrast, Virtual DOM selectively renders sub trees of nodes based upon DOM element(s) state changes and since little amount of DOM manipulation happens in order to keep the components up to date by using the DIFF algorithm, the Virtual DOM works fast as compared to real DOM and henceforth ReactJS renders fast in the browser.

Environment Setup

Let us download the Starter kit which includes prebuilt copies of React and React DOM. Once downloaded, extract the zip file and put it in some folder say "C:\Users\niladri.biswas\ReactExperiment\react-0.14.3". If we visit inside the root folder, we will get the below

Using the code

Let us write a very basic program using the ReactJS which will display a text in the browser.

<html>
  <head>   
    <title>Our First Program Using ReactJS</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="mainContainer"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Message from RNA Team - "Welcome to ReactJS World"</h1>,
        document.getElementById('mainContainer')
      );
    </script>
  </body>
</html>

Upon rendering, the below output will be produce

We can observe a new kind of programming style inside the JavaScript.

<script type="text/babel">
      ReactDOM.render(
        <h1>Message from RNA Team - "Welcome to ReactJS World"</h1>,
        document.getElementById('mainContainer')
      );
</script>

It is the JSX. For translation of this JSX into the plain vanilla JavaScript, we are using <script type="text/babel">.This does the transformation in the browser.

Now let us do some more interesting thing.Let us try to add another Html Component to the Render method of ReactDOM as under

<script type="text/babel">
      ReactDOM.render(
        <h1>Message from RNA Team - "Welcome to ReactJS World"</h1>
        <b>Bold this text</b>,
        document.getElementById('mainContainer')
      );
</script>

and run the application

Instead of being render, we receive an error message stating

Adjacent JSX elements must be wrapped in an enclosing tag

So what's wrong? The Render method of ReactDOM returns a single node. We have specified multiple DOM elements inside the Render method and hence is the complain. So let us change that as under

<script type="text/babel">
      ReactDOM.render(
        <div> 
          <h1>Message from RNA Team - "Welcome to ReactJS World"</h1>
          <b>Bold this text</b>
         </div>,
        document.getElementById('mainContainer')
      );
</script>

Observe that, we have wrapped the multiple child elements inside a parent element which is a DIV here and returning a single node to the Render method. The output is as expected

We can equally seperate the React JSX portion and put it inside a seperate JS file say js/ourScripts.js.And then include it as under

<html>
  <head>   
    <title>Our First Program Using ReactJS</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="mainContainer"></div>
    <script type="text/babel" src="js/ourScripts.js"></script>
  </body>
</html>

We have used the term Bable like <script type="text/babel".Bable is a JavaScript source-to-source compiler (aka transcompiler or transpiler) which accepts ES2015 JavaScript code as input then compiles it into ES5 code and finally make it work on all browsers.

Question

"I heard that ReactJS is going to be a nice framework and becoming popular quickly but then there is confusion that when to use AngularJS, ReactJS and KnockoutJS. Could you clarify it in simple terms."

Answer

First of all ReactJS is not a framework but a library that fits only in the View. It works on a different principle all together.In the case of ReactJS, we treat everything in terms of Components. A component is that feature of React which comprises of an html along with it's associated JS satisfying the SRP principle. From the View part, we can easily bind to any other technology like e.g. JQuery for fetching the real time data from a WebAPI either in JSON (preferable) or XML format and then bind it to the ReactComponent. ReactJS however, works with FLUX framework to access with other 3rd party sources. This is the recommended approach.

How React works?

It creates a Virtual DOM (aka Fake DOM) and manipulates the changes in the Virtual DOM only for those DOM element(s) that has been changed by using the DIFF Algorithm. Modification inside the real DOM is very costly operation as lot of time we need to Bubble up and Tunnel Down the DOM Tree.

One may have a doubt as how ReactJS maintains the changes.Well the short and sweet answer is that it maintains the element state by using the State Property

So how the State works?

ReactJS maintains an initial state of the element and when some Event (another concept in React) change it creates the final one. In the Virtual DOM, it only updates that particular DOM element that has been changed by using the DIFF Algorithm. The next time, this changed value becomes the initial one and the same rule follows. The concept is very similar to the Observable Collection often found in MVVM model of WPF. 

We can use Immutable.JS with ReactJS inorder to maintain the Objects immutability nature.

In short React is the V part of a MV* architectural pattern.

AngularJS and KnockoutJS are the complete framework satisfying the MV* pattern (though MVVM suites appropriate for the later). They provides the View part (angular directive), Controller and access to the Model. A similar approach for KnockoutJS too.

Now one beautiful use case for which we may prefer React over the other mentioned technologies is to make a CompositeUI by satisfying Microservices Architectural Pattern which has gained a huge popularity over SOA.

Though it can be built using the Custom Angular Directive and Templates but we have to end up with a huge chunk of code. Also a simple way can be to use the Includes directive of AngularJS but that may not be maintainable in the long run for a real time scenario.

But our research on ReactJS so far has given us the real spark for the literal success of a true CompositeUI.

Reference

React (JavaScript library)

Conclusion

In this article, we have provided a basic introduction to ReactJS and have discus some concepts of it and has seen how to write some simple programs using that. Hope this will be helpful. Thanks for reading. Zipped file is attached herewith.

Recommendation
Read Masking in JQuery after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Posted by: Poster on: 12/7/2015 | Points: 25
Nice post Raj.

I heard that ReachJS is going to be a nice framework and becoming popular quickly but then there is confusion that when to use AngularJS, ReactJS and KnockoutJS. Could you clarify it in simple terms.

Thanks
Posted by: Rajnilari2015 on: 3/6/2016 | Points: 25
Sure,

First of all ReactJS is not a framework but a library that fits only in the View. It works on a different principle all together.In the case of ReactJS, we treat everything in terms of Components.A component is that feature of React which comprises of an html along with it's associated JS satisfying the SRP principle. From the View part, we can easily bind to any other technology like e.g. JQuery for fetching the real time data from a WebAPI either in JSON(preferable) or XML format and then bind it to the ReactComponent. ReactJS however, works with FLUX framework (the recommended one and we will present an article on that soon) to access with other 3rd party sources. This is the recommended approach.

How React works is: It creates a Virtual DOM(aka Fake DOM) and manipulates the changes in the Virtual DOM only for those DOM element(s) that has been changed by using the DIFF Algorithm . Modificiation inside the real DOM is very costly operation as lot of time we need to Bubble up and Tunnel Down the DOM Tree.
One may have a doubt as how ReactJS maintains the changes.Well the short and sweet answer is that it maintains the element state by using the State Property (about which we will write another article soon).

So how the State works - React maintains an initial state of the element and when some Event (another concept in React) change it creates the final one. In the Virtual DOM, it only updates that particular DOM element that has been changed by using the DIFF Algorithm. The next time, this changed value becomes the initial one and the same rule follows. The concept is very similar to the Observable Collection often found in MVVM model of WPF.
We can use Immutable.JS with ReactJS inorder to maintain the Objects immutability nature.

In short React is the V part of a MV* architectural pattern.

AngularJS and KnockoutJS are the complete framework satisfying the MV* pattern (though MVVM suites appropriate for the later). They provies the View part (angular directive), Controller and asscess to the Model. A similar approach for KnockoutJS too.

Now one beautiful use case for which we may prefer React over the other mentioned technologies is to make a CompositeUI by satisfying Microservices Architectural Pattern which has gained a huge popularity over SOA.

Though it can be built using the Custom Angular Directive and Templates but we have to end up with a huge chunk of code. Also a simple way can be to use the Includes directive of AngularJS but that may not be maintainable in the long run for a real time scenario.

But our research on ReactJS so far has given us the real spark for the literal success of a true CompositeUI.

Please share your thought on the same and provide some more use case and do let us know if this answers to your question.

Have a nice day.
Posted by: Rajayadav on: 12/24/2015 | Points: 25
Good , Thanks for sharing
Posted by: Rajnilari2015 on: 12/24/2015 | Points: 25
@Rajayadav Sir, our pleasure.

Login to post response

Comment using Facebook(Author doesn't get notification)