Learn React JS

In this blog you will learn about React JS.

Introduction

 

React js framework was developed by Facebook.

 

To include react in our HTML application.

<scriptsrc="https://fb.me/react-0.12.2.js"></script>
<scriptsrc="https://fb.me/JSXTransformer-0.12.2.js"></script>

To write the code we need to create .jsx file instead of .js files.

 

Create one main.jsx file and include that file in your index.html page.

<scripttype="text/jsx"src="main.jsx">
</script>

Open main.jsx file and add below code:

React.render(
   <h1>hello World 1234</h1>,
   document.body
);

React.render method is having two parameters. First one is HTML content or we can create user defined tag which is known as component in react terms and the second value is rendering with html tag.

 

React.CreateClass using this way we can create new components in react. Find below syntax to create new component.

var Hello = React.createClass({
   render: function() {
      return<p>Hello, world!</p>;
   }
});

After adding this code we need to do one small modification in React.render method.

React.render(
   <Hello>,
   document.body
);

Or

React.render(
   newHello(),
   document.body
);

What are Props and States?

 

Props: When we need to pass the data to class then it is known as props or we need to pass the data in HTML page.

 

States: When we need to read the data from HTML page.

 

Please find below example.

 

Props

var Hello = React.createClass({
   render: function() {
      return<p>{this.props.message}</p>;
   }
});

React.render(
   newHelloWorld({ message: "Hi, Hello World" }),
   document.body
);

We are passing data through property message and binding that with html tags. This is the actual use of props.

var Counter = React.createClass({
     getInitialState: function() {
          return {
               count: 0
          };
     },
     increment: function() {
          this.setState({
               count: this.state.counter + 1
          });
     },
     render: function() {
          return <div>
     <div>
          {
          this.state.count
          } </div> <buttononClick={ this.increment }> Click me </button> </div>;
     }
});
React.render(new Counter(), document.body);

Count is the property that is bound with html page but that can be read from the application and reused and again displayed on the application this can be achieved using state only.

 

Creating a nested class: Here we have created two classes. One is Hello and second is nestedHello.

 

The class nestedHello is returning Hello class. And finally rendering Hello() to html body.

var Hello = React.createClass(
{
    render: function()
    {
        return <p > hello nested class application < /p>;
    }
});
varnestedHello = React.createClass(
{
    render: function()
    {
        return <Hello /> ;
    }
});
React.render(
    new Hello(),
    document.body
);