What is Facebook React.js, Getting started with React.js

by Posted on

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


 
 var CounterComponent = React.createClass({
 
    
     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();
         }
     },
 
     
     startCounter : function() {
       this.intervalId = setInterval(this.counterIncrement, 1000); 
     },
 
     
     stopCounter : function() {
        clearInterval(this.intervalId);
     },
 
     
     resetCounter : function() {
         this.setState({btnLabel : 'Start Counter'});
         this.setState({count : 0});
         return this.stopCounter();
     },
 
     
     counterIncrement : function() {
         this.setState({
           count : this.state.count + 1
         })
     },
 
     
     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/>,   
        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 : 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),   
        document.getElementById('counter')
      );

src/counter.js


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

Published by admin