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-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?
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.