What is react.js?

React is an open-source JavaScript library created and maintained by Facebook & Instagram developers. Using react you can create user interfaces very fast.

Looks like another javascript framework.

No! React is not a framework, Its a javascript view library. So if you compare with Angular or Backbone or other MVC framework, you can refer to React as just the V in MVC.

Why should we use react?

React is very fast than Angular, Backbone, Vue or Ember because React uses Virtual DOM (Document object model) which makes react is very fast. It’s ideal for large scale single page applications.

Virtual DOM! what’s this ?

The structure of Html/Xml elements that makes a webpage using DOM (Document object model a sets of rules/Convention to represent Html/Xml in different platforms). Using javaScript objects, React creates DOM tree in the web page which are actually virtual DOM. javascript objects are faster than DOM objects. So virtual DOM rendering speed is far better than normal DOM. React never reads from normal DOM. React only to normal/real DOM when needed. React never update the whole DOM Every time unlike another framework like Angular Or Backbone.

Virtual DOM > Normal DOM

Can you give a React “Hello World” Example?

React libarry can be downloaded from here.

You can also add through bower . If you are not comfortable with bower, have look this simple article.

bower install –save react

And here is hello world code. Copy-paste in your editor and run in any browser.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>
        <script src="bower_components/react/react.js"></script>
    </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
       React.render(
        React.createElement('p', null, 'Hello World!'),
        document.getElementById('container')
    );
    </script>
  </body>
</html>

OMG! old school Javascript syntax?

You can replace all this complex syntax to plain html using an external library JSX Transformer. JSX is simply an alternate JavaScript syntax, which lets you write HTML/XML like syntax.

Now we’ll write above hello world example with JSX.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>
        <script src="bower_components/react/react.js"></script>
        <script src="bower_components/react/JSXTransformer.js"></script>
    </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
       React.render(
        <p>Hello World</p>,
        document.getElementById('container')
    );
    </script>
  </body>
</html>

Code is not working! There is an error in console.

Oh! I forgot to replace type=”text/javascript” by type=”text/jsx” as Its a JSX syntax.

So every time we have to keep JSX transformer library along with react library in our application?

No. Just pre-compile JSX code into plain javascript before pushing into your production server and remove JSX library from your application.

when you’ll use JSX library in your application you’ll get a suggestion in console.

You are using the in-browser JSX transformer. Be sure to precompile your JSX for production – http://facebook.github.io/react/docs/tooling-integration.html#jsx

Okay. I got basic React. Can you show another example?

Sure, we’ll create a prototype, where we’ll show a list of posts and search through the list from input text search box. Here is the live demo. For basic css, we have used bootstrap.

Here is the full code:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="en">
<head>
    <title>Reacting with react.js</title>
    <link  href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container" id="container"></div>
</body>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
    <script type="text/jsx">
        var PostTitle = React.createClass({
            render: function() {
                return (
                        <li className="list-group-item">{this.props.post.title}</li>
                );
            }
        });
 
        var BlogList = React.createClass({
            render: function() {
              var props = this.props;
              var rows = props.posts
                .filter(function(post){
                  return post.title.toLowerCase().indexOf(props.filterText.toLowerCase()) > -1;
                })
                .map(function(post){
                  return <PostTitle key={post.title} post={post} />;
                });
 
              return (
                  <ul className="list-group">{rows}</ul>
              );
            }
        });
 
        var SearchBox = React.createClass({
            handleChange: function() {
                this.props.onUserInput(
                    this.refs.filterTextInput.getDOMNode().value
                );
            },
            render: function() {
                return (
                <div className="form-group">
                <input ref="filterTextInput" value={this.props.filterText} onChange={this.handleChange} type="search" className="form-control" placeholder="Search for post" />
            </div>
                );
            }
        });
 
        var BlogContainer = React.createClass({
            getInitialState: function() {
                return {
                    filterText: ''
                };
            },
 
            handleUserInput: function(filterText) {
                this.setState({
                    filterText: filterText
                });
            },
 
            render: function() {
                return (
            <div className="row">
                <h2>Blog</h2>
                 <SearchBox onUserInput={this.handleUserInput} filterText={this.state.filterText} />
                <ul className="list-group">
                    <BlogList filterText={this.state.filterText} posts={this.props.posts} />
                </ul>
            </div>
                );
            }
        });
     
        var posts = [{
              title : "What’s New in Bootstrap 4",
          },{
              title : "Frontend package and dependency management with Bower",
          },{
              title : "RESTful API in Lumen, A Laravel Micro Framework",
          },{
              title : "DataTable demo (Server side) in Php,Mysql and Ajax",
          },{
              title : "What a web developer needs to know about http/2?",
          },{
              title : "Composer easy tutorial - php dependency management tool",
          },{
              title : "Parallax Behind The Scene",
          }
        ];
 
        React.render(<BlogContainer posts={posts} />, document.getElementById('container'));
 
        </script>
</html>  

React

As you can see in the picture that we have divided the whole application into different components.
The wrapper component is BlogContainer. BlogContainer has more 3 nested components BlogList, SearchBox and PostTitle.
React.createClass(spec) returns a component.

After generating components we have rendered through React.render() in the DOM.
React.render() render an element into the DOM and return a reference to the component. It tells React that how the DOM should look like. It doesn’t produce a real DOM!

Conclusion

These questions arise when I was going through React first time, So I put all those here and keep the article simple as possible. Comments are open and I’m waiting to reply those bullets.