Introduction To Reactjs

Introduction to ReactJS

ReactJS

This material covers the basic concepts of ReactJS assuming you are a novice to this framework, focuses on getting a good understanding of what this UI library is about and discuss its unique features, advantages and disadvantages over other sibling frameworks. We will also learn how to setup a development environment for the same. In this material I will resist showing any code implementation since my main intention is to first make you understand the framework before diving into the code structure details.

What is React ?


React is a UI library created by Facebook. It is used by Facebook themselves and Instagram too makes use of this powerful library. Don't be fooled by the “UI” part of it as it can perform not only on client side but also render on server side(using Virtual DOM)

How is it different ?


I will introduce few basic terms and concepts that stand out in React and are recommended to learn to get a better understanding of the framework.

'point_right' Concept of Components

This is a fairly new concept specific to React and also is considered one of the key concept in understanding this framework. Basically with React the only thing you will do is build components.These components we build make code reusable, encapsulated which in turn makes separation and testing easy.

'point_right' Virtual DOM

This too is a concept specific to React, where it maintains a virtual carbon copy (mirror image) of the entire original DOM and selectively renders only the part of the DOM that requires the change. Imagine a 2 layer DOM – The Upper original layer which is seen by the user and The Lower fake layer(created by React) where the React magic happens. Which means it does the least amount of DOM manipulation to keep the components updated. This in turn increases the speed of DOM interaction by a considerable amount.

This is done by a 2 step process. First, React will run something called a diffing algorithm to identify the elements that has changed and updates it on the Virtual DOM layer. Second, React sticks only the updated portion back to the original DOM layer leaving the rest of the DOM untouched.

This is what makes React unique and faster than its counterparts like AngularJS or EmberJS in terms of DOM manipulation time, in AngularJS for example the digest cycle watches over every angular bound element in the DOM and checks for any change in its value regularly, in other words if there are more than say 200 angular bound DOM elements in the same page, the speed gets hampered considerably. React however will never face such problem thanks to the Virtual DOM concept.

Additionally Since React uses a Virtual DOM which is nothing but a fake duplicate of the original upper level DOM, this Virtual DOM can also be rendered now on server side 'heart_eyes' Impressive, isn’t it !

'point_right' Props

Props are basically attributes that are available in our component as this.props and are used in the render method to render dynamic data onto the DOM.

'point_right' Specs, LifeCycle

The only mandatory spec to create a component is the render method.Below are some of the other more useful methods and their short description.

LifeCycle Methods


componentWillMount :- Invoked once, on both client & server before rendering occurs.

componentDidMount :- Invoked once, only on the client, after rendering occurs.

shouldComponentUpdate :- Return value determines whether component should update.

componentWillUnmount :- Invoked prior to un-mounting component.

Spec Methods


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.

More Spec & Lifecycle methods can be found here 'point_left'

'point_right' State

Every component has a state object and a props object. State is set using the setState method. Calling setState triggers DOM updates and is the most important feature of React’s interactivity. If we wish to initialize state before any interaction occurs we can use the getInitialState method.

'point_right' Unidirectional Data flow

As the name suggests, in React the application data flows unidirectionally through the state and props objects we discussed earlier. This is in contrast to other frameworks like Angular with its two-way binding.

Thats it for the Introduction part! Most of the important concepts should be clear by now. What are we waiting for…Next we shall see how to setup a Dev Environment for you to start coding in React.


Dev Environment Setup


Creating a Dev Environment for React is super simple. All you need is to include react.js and JSXTransformer.js(Optional) in your HTML page.

react.js to import all the React magic Facebook provides and JSXTransformer.js which is optional will be explained below.

Remember JSX is the recommended way to write React web application and not the only way. For those who are wondering what JSX is, the explanation below might help.

JSX

What is JSX ? Its a slightly advanced version of JavaScript that allows you to initialize React components by using an HTML-like syntax directly in your code. I say its HTML-like and not pure HTML because basically you will be writing XML based object representations inside JavaScript code and not your regular HTML. And ofcourse you need a separate script file where you will be writing your core React code which needs to be translated to vanilla JavaScript so that the browser can understand and to do that you need to add <script type=“text/jsx"> to your script tag.

Again as I said its the "recommended" way, which means you can also write React without JSX (plain JavaScript) but will turn out to be a little more complex.

There are 2 ways to kickoff and start using React in your application.

Method 1

Facebook provides a CDN that you can directly imbibe by including a single JavaScript file onto your page.

<script src=http://fb.me/react-0.10.0.min.js”></script>

with this you can also include the JSXTransformer.js if required.

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js”></script>

Post including the required CDN script files this is what a basic HTML page will look like –

<!DOCTYPE html>
<html>
  <head>
    <script src=“http://fb.me/react-0.10.0.min.js”></script>
    <script src=“https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js”></script>
  </head>
  <body>
    <div id="demo"></div>
    <script type="text/jsx">
      React.render(
        <h1>Demonstration!</h1>, document.getElementById('demo')
      );
    </script>
  </body>
</html>

In React components mount to a particular element(in this case the div with id demo). While using render method, the first argument is the content we want to render, and the second argument is the DOM node the content should mount to.

When you now run your page there should be a header title reading “Demonstration!” on your browser. Which means you are done with setting up a basic Dev Environment for React.

If you view your console, you can see a warning that says – 'you are using the in-browser JSX transformer' which is completely fine. If you wish to transform your JSX code offline you need to first install the command-line tools (requires npm)

npm install -g react-tools

Then, translate your source script file to plain JavaScript:

jsx --watch <source folder name>/ <destination folder name>/

This will autogenerate a JS equivalent file in the mentioned destination folder which needs to be again included in your HTML page replacing the previous React code.

Method 2

In this method you can simply download the updated StarterKit provided by Facebook from here 'point_left' which will have all the necessary files included.


Conclusion


React allows you to give clean structure to your application and promote code reuse. And thanks to its powerful Virtual DOM, the framework can speed up complex interfaces. React is suitable for rendering on the server side as well as the client, and makes it possible to build isomorphic apps that transition seamlessly between the client and the server.

More code examples of all the above mentioned concepts and terms will be integrated and explained in the next Chapter where we shall start with the basic code implementation of React. Additionally you can check out the React API here 'point_left'

Leave a Reply

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