Hello React #2: Smallest Example in React

Hello Folks,

In our previous blog post – Hello React #1: Creating a Single Page Application with React, we saw how to create a SPA with React. But, we didn’t got into its details. Here is the link for a quick recap.

Before we start building production grade applications with React, lets create a small example in React which would give us an idea, as to how to create a simple “Hello World!” program with React.

For that, lets code a simple HTML page which will render “Hello, world!” using React.

Here we can see that most of the code is usual HTML code, except for the following part:

So, let’s understand it line by line. The first 2 lines of script tag are obvious, as we are doing nothing but adding react.js and react-dom.js in our HTML page. But the third line is unusual, right ? I mean what is babel.js and why do we need it here?

Babel is a compiler for writing next generation JavaScript, specifically JSX which browsers don’t understand. So, we need to add the transpiler babel to our HTML code. But, if you want to pre-compile your project scripts say transforming from ES6 to ES5, plus browser compatible JSX without needing babel in the browser, you can checkout babel packages on npm using NodeJs (see an example GitHub project) or see this link babeljs.io/repl to convert your JSX React code to browser readable format.

Now, we know what all needs to be added into our HTML code to include React, so, we just need to create a React DOM element, containing “Hello, world!” text and the element id to which it will be render to, i.e., the ReactDOM.render() part in above code.

At last, we just have to save our HTML code and open it up in a browser to see our “Hello, world!” example in React working.

So, this was the smallest example in React that we can build within minutes and start learning React. But, there are still many things to learn about React, so, stay tuned.


This entry was posted in HTML, JavaScript, React, ReactJS and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s