Hello React #2: Smallest Example in React

Table of contents

Reading Time: 2 minutes

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.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Hello React</title>
	</head>
	<body>
	<div id="root">
	</div>
	<script src="https://unpkg.com/react@15/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>
	<script type = "text/babel">
	ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('root')
	);
	</script>
	</body>
	</html>

view raw hello-react.html hosted with ❤ by GitHub

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

	<script src="https://unpkg.com/react@15/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>
	<script type = "text/babel">
	ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('root')
	);
	</script>

view raw sample-react.html hosted with ❤ by GitHub

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.