Web developer diary

Getting started with React in easy language

Disclaimer: This post is directly copied from this Blog.So that i will not loose this.

Getting Started and Learn Concepts of ReactJS

photo Resources-to-Get-You-Started-with-ReactJS.jpg

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.

Getting Started

photo maxresdefault_2.jpg
Getting started with React is as simple as downloading their provided starter kit:

React Starter Kit

You can also fork a JSFiddle they have provided:

React JSFiddle

Page Setup

When setting up your page, you want to include react.js and JSXTransformer.js, and then write your component in a script node with type set to text/jsx:

<!DOCTYPE html> 

<html> 

  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="mount-point"></div>
    <script type="text/jsx">
      // React Code Goes Here
    </script>
  </body>
</html>

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.

The Basics

React’s basic building blocks are called components. Lets write one: 

<script type="text/jsx"> 

    /** @jsx React.DOM */
    React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('myDiv')
    );
</script>

If you haven’t seen one of these before, you are probably wondering what Javascript/HTML chimera sorcery is taking place right now.

JSX

it's called JSX and it's a javascript syntax transform. JSX let you write some kind of HTML tag in javascript. I say "some kind of HTML" because there are a couple gotchas. You are really just writing XML based object representations.

For regular html tags, the class attribute is className and the for attribute is htmlFor in JSX because these are reserved words in Javascript. More differences can be Found here.

Now you didn't need to use JSX, here is what the syntax looks like without it: 

/** @jsx React.DOM */ 

React.render( 

  React.DOM.h1(null, 'Hello, world!'),
  document.getElementById('myDiv')
);

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.

Components

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 :

var MyComponent = React.createClass({ 

    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

After creating a class we can render it to our document like so: 

React.render( 

    <MyComponent/>,
    document.getElementById('myDiv')
);

Awsome, right?

Props

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:

var MyComponent = React.createClass({ 

    render: function(){
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
});



React.render(<MyComponent name="Handsome" />, document.getElementById('myDiv'));


Specs, Lifecycle & State

The 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.

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 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.
.

There are several more specs & lifecycle methods that you can read about here.

State

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:

var MyComponent = React.createClass({ 

    getInitialState: function(){
        return {
            count: 5
        }
    },
    render: function(){
        return (
            <h1>{this.state.count}</h1>
        )
    }
});

Events

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:

/** @jsx React.DOM */



var Counter = React.createClass({ 

  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  getInitialState: function(){
     return {
       count: 0
     }
  },
  render: function(){
    return (
      <div class="my-component">
        <h1>Count: {this.state.count}</h1>
        <button type="button" onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});



React.render(<Counter/>, document.getElementById('mount-point'));


Unidirectional Data Flow

In React, application data flows unidirectionally via the state and 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.props.

this is the example that shows this concept in practice: 

/** @jsx React.DOM */



var FilteredList = React.createClass({ 

  filterList: function(event){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
  },
  getInitialState: function(){
     return {
       initialItems: [
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ],
       items: []
     }
  },
  componentWillMount: function(){
    this.setState({items: this.state.initialItems})
  },
  render: function(){
    return (
      <div className="filter-list">
        <input type="text" placeholder="Search" onChange={this.filterList}/>
      <List items={this.state.items}/>
      </div>
    );
  }
});



var List = React.createClass({ 

  render: function(){
    return (
      <ul>
      {
        this.props.items.map(function(item) {
          return <li key={item}>{item}</li>
        })
       }
      </ul>
    ) 

  }
});



React.render(<FilteredList/>, document.getElementById('mount-point'));

Conclusion

Now that we have reviewed some React basics, take some time to check out the React API and read up a bit on JSX.

</article>

Posted on Jul 18, 2015