Built.io Blog

It's Time to React

,

What is React?

React is a JavaScript user interface (UI) library developed by the Facebook development team which is useful for creatiing interactive and reusable UI components.

It's used in production for the Facebook wall, and Instagram.com is written entirely in React. Why is React so different than other available JavaScript libraries? React not only performs on the client side, but it can also be rendered on the server side, and the client and server can work together to render a view.

React views are the state machines, and as soon as the state changes, it creates Virtual DOM.

What is Virtual DOM?

Virtual DOM is a concept used by React developers which actually renders the sub-tree of DOM when the state changes.

How does React work?

Imagine you have an object which reflects your car's properties. This object would consist of all general properties which cars have, and clone the car's current state. This is basically what React does with the DOM. Now, think about if you took that object and made some changes; maybe added some accessories. In React, when we apply changes, the following two things occur:

  1. React runs a "diffing" algorithm, which identifies what has changed.
  2. Reconciliation, where it updates the DOM with the results of diff.

Rather than taking the real car and rebuilding from the scratch , it would only change the part of it that has changed.

When you get started with React you will receive a basic stater kit from Facebook.

"Hello World"

Please create a "hello-world.html" file at the root folder of the starter kit and paste in the following code snippet:

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="hello-world"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('hello-world')
      );
    </script>
  </body>
</html>

Notice that this snipppet requires JSXTransformer.js which is actually a transform code:

<script type="text/jsx"> 
   /** @jsx React.DOM */ 
  .
  . 
</script>

Just run that HTML file from your browser and it will return: Hello, world!

What is JSX?

React uses JSX to render a view. JSX stands for JavaScript Syntax Extension, which looks similar to XML. While creating the React component, we have the option to use JSX or to use plain JavaScript. Experts recommends using JSX because it is a concise and familiar syntax for defining tree structures with attributes. In our code snippet, did you notice the /* @jsx React.DOM / at the top of our script? This is important because it tells React that we are using JSX and that this markup needs to be transformed, so you need to include it when using JSX syntax.

What are components?

React’s basic building blocks are called components. We can use React's createClass method to create custom component classes. Lets try above hello world example with Component:

var MyFirstComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});
React.renderComponent(
    <MyFirstComponent/>,
    document.getElementById('hello-world')
);

Now, we have to render this component. React provides a renderComponent method to render components. Please copy the above code and replace with what we have in hello-world.html:

<script type="text/jsx">
..
<script>

You will experience the same result as you did without using components.

During creation of a component we can use properties, state, lifecycle methods, and specifications provided by React.

Props

When we use our defined components, we can add properties. These properties or attributes are available in our component as this.props and can be used in our render method to render dynamic data:

var MyFirstComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
});
React.renderComponent(<MyFirstComponent name="Harshal" />, document.getElementById('hello-world'));

React provides some methods to apply during life cycle of component.

Life cycle methods

  • componentWillMount This method invokes only once, on both client & server before rendering occurs.
  • componentDidUpdate This method invokes immediately after updating occurs
  • componentDidMount This method invokes only once, only on the client, after rendering occurs.
  • componentWillUpdate This method invokes immediately before rendering when new props or state are being received.
  • shouldComponentUpdate Return value(boolean) of this method determines whether component should update.
  • componentWillUnmount This method invokes prior to unmounting component.

Specs

  • getInitialState Return value is the initial value for state.
  • getDefaultProps Sets fallback props values if props aren’t supplied.
  • mixins – An array of objects, used to extend the current component’s functionality.

To learn more, check out the tutorial hosted on React's official site.

Subscribe to our blog