Disclaimer: This post is directly copied from this Blog.So that i will not loose this.
Getting Started and Learn Concepts of ReactJS
Today we kick off the first of a new series of tutorials, learn react, which on becoming proficient and effective with Facebook’s React library.
Before you start to build something meaningful, it is important to cover some basics first,
then lets get this party started!
What is React?
React is a library of user interface developed in Facebook to facilitate the creation of interactive components, state and reusable user interface. used in Facebook in production, and Instagram.com is written entirely in React.
One of its unique selling points is that not only run on the client, but can also be displayed on the server, and can work together inter-operably.
It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.
How does the Virtual DOM work?
imagine you had an object that you modeled around a person. It had every relevant property a person could possibly have, and mirrored the persons current state.
This is basically what React does with the DOM.
Now think about if you took that object and made some changes. Added a mustache, some sweet biceps and Steve Buscemi eyes.
In React-land, when we apply these changes, two things take place. First, React runs a “diffing” algorithm, which identifies what has changed.
The second step is reconciliation, where it updates the DOM with the results of diff.
React forming the works, instead of taking the real person and rebuild from scratch, just change the face and arms. This means that if you have a text in an input and a render took place, as long as the parent node entry was not scheduled for reconciliation, the text would remain undisturbed.
Because React is using a fake DOM and not a real one, it also opens up a fun new possibility. We can render that fake DOM on the server, and voila, server side React views.
When setting up your page, you want to include
JSXTransformer.js, and then write your component in a script node with type set to
In React, components mount to an element, so in this example we can use the div
mount-point as it’s parent container.
Although this is the easiest way to start, when its time to actually build something, it's probably a good idea to use Browserify or webpack and determine the components in separate files.
React’s basic building blocks are called components. Lets write one:
For regular html tags, the
class attribute is
className and the
for attribute is
Now you didn't need to use JSX, here is what the syntax looks like without it:
You can read more about element support here.
I our first snippet, you noticed the
/** @jsx React.DOM */ at the top of the script. This is important, because it tells React that we using JSX. that this markup needs to be transformed, so u need it when using JSX syntax.
when we using the
render method above, our first argument is the component we want to render, and the second is the DOM node it should mount to.
we can use the method of
createClass to create custom component classes. It takes an object of specifications as it’s argument. Lets create one now :
After creating a class we can render it to our document like so:
When we use our defined components, we can add attributes named props. These attributes are available in our component as
this.props and can be used in our method of procedure for render dynamic data:
Specs, Lifecycle & State
render method is the only specifications required for the creation of a component, but there are several methods and the technical specifications of the life cycle we can use that are helpful when you really want to brave the component to do anything.
- 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 unmounting 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.
There are several more specs & lifecycle methods that you can read about here.
Every component has a
state object and a
props object. State is set using the
setState method. Calling
setState triggers UI updates and is the bread and butter of React’s interactivity. If we want to set an initial state before any interaction occurs we can use the
getInitialState method. Below, see how we can set our component’s state:
React has also incorporated a system of events cross browser. The events are attached as component properties and can trigger methods. We will do our count increase using events:
Unidirectional Data Flow
In React, application data flows unidirectionally via the
props objects, as opposed to the two-way binding of libraries like Angular.
This means that, in a hierarchy of several components, a common component of the parents should manage the state and clean the chain through support.
Your state should be updated using the
setState method to ensure that a UI refresh will occur, if necessary. The resulting values should be passed down to child components using attributes that are accessible in said children via
this is the example that shows this concept in practice: