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

reactjs-cointer-1

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

<!DOCTYPE html>
<html>
  <head>
    <title>Simple counter program using facebook react.js</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <style>
      #content {
        margin:0 auto;
        text-align:center;
      }
       #counterBody {
        border:1px solid;
        width:20%;
        height:130px;
        background-color: green;
        text-align:center;
        color: #ffffff;
         margin:0 auto;
 
       }
    </style>
  </head>
  <body>
    <div id = "content">
        <h3>Simple counter program using facebook react.js</h3>
        <div id="counter"></div>
    </div>
   <script type="text/jsx" src="src/counter.js"></script>
  </body>
</html>

Where

<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>

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

And

  <script type="text/jsx" src="src/counter.js"></script>

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 (<div id="counterBody"><h1>{this.state.count}</h1><button id="btn" onClick={this.counter} >{this.state.btnLabel}</button><button onClick={this.resetCounter}>Reset Counter</button></div>)
     }
 });
 
 
 React.render(
       <CounterComponent/>,   // call counter component
        document.getElementById('counter')
      );

and save it.

Your directory structure will be..
reactjs-counter

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 (<div id="counterBody"><h1>{this.state.count}</h1><button id="btn" onClick={this.counter} >{this.state.btnLabel}</button><button onClick={this.resetCounter}>Reset Counter</button></div>)
     }
 });
 
 React.render(
       <CounterComponent/>,   // call counter component
        document.getElementById('counter')
      );

Finally update your index.html page

<script type="text/jsx" src="src/counter.js"></script>

To

<script src="build/counter.js"></script>

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.