Home | About

ReactJS

React is javascript framework created by Facebook and Instagram. I would say React as Javascript library which can be used as V in MVC. It has been designed by thinking performance in mind. React is getting more popular these days and big companies such as Facebook, Instagram, Yahoo, even WhatsApp’s newly launched whatsapp web uses react components in production. So let us get into it.

Main concepts

User Interface

It is easier to create components in react.js and it can be used in almost any web application. Let’s create a simple component using Javascript syntax extention shortly JSX. If you don’t know what is JSX, it’s simple which uses XML-like syntax to write Javascript and later converts it to actual Javascript using JSX Compiler.

//Using jsx syntax
var hello = React.createClass({
  //render method takes input data and returns what to display
  render: function () {
    //since we will be using jsx, so don't worry about syntax
    return (<h1>Hello World!!</h1>); //h1 tag
  }
});

Below is the same code which is written in actual Javascript.

//Using actual JS
var hello = React.createClass({displayName: "hello",
  //render method takes input data and returns what to display
  render: function () {
    return (React.createElement("h1", null, "Hello World!!")); //h1 tag
 }
});

As you can see, writing components in react.js using JSX is very easy and efficient. Many developers who uses react.js uses JSX. Know more about JSX here.

Virtual DOM

React uses Virtual DOM and it is nothing but the mimics of the actual DOM tree. Doing a DOM operations can be very expensive and keeping track of previous DOM states are very hard. In react, each component has states. Virtual DOM allows you to update a view whenever a state is changed using Diff algorithm.

Data Flow

Unlike many popular frameworks like AngularJS, EmberJS. React offer unidirectional data flow which is easier to maintain according to the developer who created react.js. In future, Ember.js is moving from two way binding to one way binding as well.

Let’s create a Hello World application with React.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hello World in React</title>
</head>
<body>
  <!-- CDN for react core libary -->
  <script src="http://fb.me/react-0.12.2.js"></script>
  <!-- JSX transformer to support XML syntax for JS -->
  <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
  <!-- react component file -->
  <script type="text/jsx">
  </script>
</body>
</html>

React component using JSX syntax

/** @jsx React.DOM */

//Syntax for creatClass(object specification)
var HelloWorld = React.createClass({
  //render method takes input data and returns what to display
  render: function () {
    return (<h1>Hello World!!</h1>); //h1 tag
  }
});

React.createClass() accepts an object and a specification. /** @jsx React.DOM */ is used to avoid syntax error from the JS compiler in the browser. In the above example, we have used the render method which returns a HTML h1 tag. Which in turn compiled to actual JS by JSX compiler.

Compiled components file

/** @jsx React.DOM */

//After JSX file is compiled
var HelloWorld = React.createClass({displayName: "hello",
  //render method takes input data and returns what to display
  render: function () {
    return (React.createElement("h1", null, "Hello World!!")); //h1 tag
  }
});

After creating a component, we have instructed the page to use the newly created component. See the below code.

/** @jsx React.DOM */

React.render(
  <HelloWorld />,
  document.body
);

Full Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hello world in React.js</title>
</head>
<body>

  <script src="http://fb.me/react-0.12.2.js"></script>
  <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
  <script type="text/jsx">
    /** @jsx React.DOM */

    var HelloWorld = React.createClass({
      render: function() {
        return (<p>Hello, world!</p>);
      }
    });

    //Instruct the page to use above component
    React.render(
      <HelloWorld />,
      document.body
    );
  </script>
</body>
</html>

React also offers developer tool for chrome browser to debug the react application. Click here to install.

DEMO

Conclusions

This article provides an overview of ReactJS. And I hope you liked my article and helped you to understand a brief about what is React.js. I will try to post more about react.js in future. For any doubts please comment below.

Share my post using the below link.

Thanks!!