Today we are going to learn new js platform called react.js, It is gaining popularity because it developed in facebook lab.

So time to say hello to react.js

What is facebook react.js

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

You can study more about react.js from here https://facebook.github.io/react/index.html

That’s why last night i was studying about react.js and created a counter program in react.js and want to share with you guys.

First download facebook react.js library from https://facebook.github.io/react/index.html

extract downloaded folder and copy build folder and paste it to your newly created reactjs-counter folder.

Create index.html page and paste below code

index.html

  
    
    
    
    
  
  
    

        
Simple counter program using facebook react.js
        

    
   
  

Where

are libraries which you have download from react.js official website.

And

is our counter component which we are going to create
Note: for calling react.js controller you must have to use script type =”text/jsx” because it build on jsx
You can study more about jsx from https://jsx.github.io/

Now time to create our counter component
Create counter.js file under src folder and paste below code.

src/counter.js

/*
* Author: Rohit Kumar
* Date: 08-07-2015
* Website: iamrohit.in
* App Name: React.js-Counter
* Description: Simple counter program using facebook react.js
*/

 var CounterComponent = React.createClass({

    //initialize variables
     getInitialState : function() {
        return {
            count : 0,
            btnLabel : 'Start Counter'
        }
     },

     counter : function() {
         if(this.state.btnLabel == 'Start Counter') {
             this.setState({btnLabel : 'Stop Counter'});
             return this.startCounter();
         } else {
            this.setState({btnLabel : 'Start Counter'});
            return this.stopCounter();
         }
     },
     
     // start counter function
     startCounter : function() {
       this.intervalId = setInterval(this.counterIncrement, 1000); 
     },

     // stop counter function
     stopCounter : function() {
        clearInterval(this.intervalId);
     },

     // reset counter  from 0
     resetCounter : function() {
         this.setState({btnLabel : 'Start Counter'});
         this.setState({count : 0});
         return this.stopCounter();
     },
      
     // add +1 after 1 second, counter increment program.
     counterIncrement : function() {
         this.setState({
           count : this.state.count + 1
         })
     },
     
     // render counter html 
     render : function() {
        return (
{this.state.count}
{this.state.btnLabel}Reset Counter
)
     }
 });


 React.render(
       ,   // call counter component
        document.getElementById('counter')
      );

and save it.

Your directory structure will be..

Then, translate your src/counter.js file to plain JavaScript:
For doing this npm should installed in your system now install npm package “react-tools”
use below command to install this in your machine

$ sudo npm install -g react-tools
 

after successful installation go to your react-js counter directory and run below command to convert your counter jsx component into plain javascript

$ jsx --watch src/ build/

It will create another js file under build folder, You can use both file in your program src/counter.js and bulid/counter.js
but better to choose build/counter.js for good rendering you can see the little difference on both file rendering part

bulid/counter.js

 // render counter html 
     render : function() {
        return (React.createElement("div", {id: "counterBody"}, React.createElement("h1", null, this.state.count), React.createElement("button", {id: "btn", onClick: this.counter}, this.state.btnLabel), React.createElement("button", {onClick: this.resetCounter}, "Reset Counter")))
     }
 });

 React.render(
       React.createElement(CounterComponent, null),   // call counter component
        document.getElementById('counter')
      );

src/counter.js

// render counter html 
     render : function() {
        return (
{this.state.count}
{this.state.btnLabel}Reset Counter
)
     }
 });

 React.render(
       ,   // call counter component
        document.getElementById('counter')
      );

Finally update your index.html page

To

Now time to play with react.js run your reactjs-counter program

Hope this simple counter program will help you to start your journey with facebook react.js. 🙂

If you like this post please don’t forget to subscribe My Public Notebook for more useful stuff.
Click here to subscribe