Introduction to 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.
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.
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 Impressive, isn’t it !
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.
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.
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.
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
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
Unidirectional Data flow
As the name suggests, in React the application data flows unidirectionally through the
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
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.
<script type=“text/jsx"> to your script tag.
There are 2 ways to kickoff and start using React in your application.
with this you can also include the
JSXTransformer.js if required.
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
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.
In this method you can simply download the updated StarterKit provided by Facebook from here which will have all the necessary files included.
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