ReactJS Getting Start With Hello World

ReactJS Getting Start with Hello World

React is built around the concept of components. This is in contrast to frameworks like Angular and Ember, which use two-way data bindings to update the HTML of the page. In my opinion React is easier to learn than Angular and Ember – it is much smaller and plays nicely with jQuery and other frameworks. It is also extremely fast, because it uses a virtual DOM, and syncs only the changed parts with the underlying page.

How to use?
To start using the ReactJS library, you need to download a single javascript file from Facebook Starter Kit and include in header tag: 

1

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

The ReactJS library can also be used directly from the Facebook CDN to increase the performance of the page load by including the link below in header tag: 

1

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>

Hello World
Create a helloworld.html file with the following contents:

helloworld.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var App = React.createClass({
        render: function() {
          return React.createElement("h1", null, "Hello World")
        }
      });

      React.render(React.createElement(App), document.body);
    </script>
  </body>
</html>

The primary type in React is the ReactElement. It has four properties: type, props, key and ref. It has no methods and nothing on the prototype. We can create a element through React.createElement.

To render a new tree into the DOM, we create ReactElements and pass them to React.render along with a regular DOM Element.

In codes above we create a h1 element in App component and render it in body DOM.

Hello World - Separate File
Create a helloworld.js file with the following contents:

helloworld.js 
1
2
3
4
5
6
7

var App = React.createClass({
  render: function() {
    return React.createElement("h1", null, "Hello World")
  }
});

React.render(React.createElement(App), document.body);

And update HTML file as below:

helloworld.html 
1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.js"></script>
  </head>
  <body>
    <script src="helloworld.js"></script>
  </body>
</html>

So far so good, That’s it!!! See ya!!! :)