Recent Tutorials and Articles
    Getting started with REACT JS
    Published on: 17th January 2016

    This article provides an introduction to REACT JavaScript Library along with covering its features and a simple web page to show one sample blog post.

    Abstract

    React is a javascript library for creating user interfaces of large applications in which data changes with time. In MVC (Model-View-Controller) terms, it just takes care of View part. Infact, its name also comes from reactive updates it makes to view as data changes.

    USP for React is improved performance as it internally figures out what data has changed and only applies those changes to view. It is also important to note that React is a library like JQuery and not a complete framework like AngularJs or BackboneJs. React is quite useful in developing reusable and independent components. These components help to reuse code and achieve separation of concerns.

    Features of React

    React comes with a set of unique features that make it useful and an effective library to develop reusable components. Some of the important features are as follows:

    • Unification of markup and view logic - React stresses on unification of markup (html tags) and view logic into independent and complete components. This enables to make views easier to extend and maintain in large applications. If you happen to know JQuery, this is similar to creating a widgets having both html markup and logic to render it.
    • Understanding of markup and content into JavaScript - While building complete UI components are quite useful from usability perspective. This is generally not good from code maintenance perspective due to lot of ugly string concetanation that we end up using while defining markup in components. React solves this problem very elegantly by understanding of markup and content in JavaScript. You define your markup in JavaScript code like you would do in HTML without any string concatenation and tag escaping.
    • Simple and One-way data updates - Reactive updates in React are quite simple and one-way. React passes the properties as a set of immutable values to a component's renderer in its HTML tag. However, component's renderer can always register callbacks to be called in case it needs to modify any of the properties passed to it. This way data only flow down from React to component renderer while actions flow up. This model removes the need of having complex bi-directional data flow while still achieving same functionality.
    • Virtual DOM - As we touched upon earlier, React really excels in reactive updates by figuring out what data have changed exactly and then just updating that in View. In order to achieve this, React uses something called Virtual DOM. It maintains its own DOM on top of actual HTML DOM. So whenever the data changes, it applies these changes to its virtual DOM first and figures out what exactly has changed. It then just propagates the changed part to actual DOM there by optimising the view updates.
    • JSX (JavaScript eXtension) - React also comes with its own extension of JavaScript for using HTML tag syntax to render subcomponents. This HTML syntax is however passed and processed in JavaScript calls of React library. JSX is however completely option and developers are free to use plain JavaScript.
    React in Action

    After some theory, it's time to see React in action. We will be starting with a simple Hello World program in this article and more advanced programs will be covered in subsequent articles.

    Let's start with how we will create a widget to show a blog past in plain Javascript. As shown below, it uses concatenation to define mark up which can be tricky to maintain in long run.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Sample Blog Post</title>
    <style>
    .blog-title {
        font: bold 25px Georgia, serif;
        text-transform: uppercase;
    }
    .blog-description {
        font: 15px arial, sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="blog-container"></div>
    </body>
    <script type="text/javascript">
    var blogcontainer = document.getElementById("blog-container");
    showBlog(blogcontainer, "Introduction to React JS", "React is a javascript library for creating user interfaces of large applications in which data changes with time. In MVC (Model-View-Controller) terms, it just takes care of View part. Infact, its name also comes from reactive updates it makes to view as data changes.");
    
    function showBlog(blogcontainer, blogtitle, blogdesc) {
        blogcontainer.innerHTML = "<div class='blog'><span class='blog-title'>"+blogtitle+"</span><div class='blog-description'>"+blogdesc+"</div></div>";
    }
    </script>
    </html>
    
    

    Now let's see how this can be created in React using JSX -

    <!DOCTYPE html>
    <html>
    <head>
    <title>Sample Blog Post</title>
    <style>
    .blog-title {
        font: bold 25px Georgia, serif;
        text-transform: uppercase;
    }
    .blog-description {
        font: 15px arial, sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="blog-container"></div>
    </body>
    <script src="https://fb.me/react-0.14.6.js"></script>
    <script src="https://fb.me/react-dom-0.14.6.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel">
    
    var Blog = React.createClass({
      render: function() {
        return (
    	  <div className="blog">
    		<span className="blog-title">{this.props.title}</span>
    		<div className="blog-description">{this.props.description}</div>
    	  </div>
        );
      }
    });
    
    ReactDOM.render(
        <Blog title={"Introduction to React Js"} description={"React is a javascript library for creating user interfaces of large applications in which data changes with time. In MVC (Model-View-Controller) terms, it just takes care of View part. Infact, its name also comes from reactive updates it makes to view as data changes."} />,
        document.getElementById('blog-container')
    );
    
    </script>
    </html>
    
    

    Finally, here is how it will look like using React DOM library without JSX.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Sample Blog Post</title>
    <style>
    .blog-title {
        font: bold 25px Georgia, serif;
        text-transform: uppercase;
    }
    .blog-description {
        font: 15px arial, sans-serif;
    }
    </style>
    
    </head>
    <body>
    <div id="blog-container"></div>
    </body>
    <script src="https://fb.me/react-0.14.6.js"></script>
    <script src="https://fb.me/react-dom-0.14.6.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel">
    
    var title = React.createElement('span', {className: 'blog-title'}, 'Introduction to React Js');
    var description = React.createElement('div', {className: 'blog-description'}, 'React is a javascript library for creating user interfaces of large applications in which data changes with time. In MVC (Model-View-Controller) terms, it just takes care of View part. Infact, its name also comes from reactive updates it makes to view as data changes.');
    var root = React.createElement('div', {className: 'blog'}, title, description);
    
    ReactDOM.render( root, document.getElementById('blog-container'));
    
    </script>
    </html>
    
    
    References

    Thank you for reading through the tutorial. In case of any feedback/questions/concerns, you can communicate same to us through your comments and we shall get back to you as soon as possible.

    Published on: 17th January 2016

    Comment Form is loading comments...