As is customary, we will start with a Hello World example, something that is a bare minimum application that uses MERN. The main purpose of any Hello World exercise is to create the environment that has most of the technology of the stack.
In the Hello World exercise, we’ll use React to render a simple page and use Node.js and Express to serve that page from a web server. This will also give you some insight into nvm, npm, and JSX transformation, some tools that you’ll need to get used to as you go along.
Server-Less Hello World
To quickly get off the ground, let’s write a simple piece of code in a single HTML file that uses React to display a simple page on the browser. No installations, no downloads, no server!
Open up your favorite editor and create an HTML file with a head and body, like Listing 2-1.
Listing 2-1. index.html: Server-less Hello World
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Pro MERN Stack</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
Chapter 2 ■ hello World
<body>
<div id="contents"></div><!-- this is where our component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('contents');
var component = <h1>Hello World!</h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the component inside the content Node
</script>
</body>
</html>
It’s very likely that you will copy/paste this code rather than type it yourself, despite my advice that typing it in is better. OK just this once, but only because you’re in a hurry to get it to work! But do compare the code line by line, and make sure it has been pasted correctly.
Save it as index.html anywhere on your file system. Open it in your browser and check it out. It may take a few seconds to load, but you should see the browser displaying the caption, as seen in Figure 2-1.
Now, let’s analyze the code and see what happened here. The first thing to look at is the following line inside the inline script:
...
ReactDOM.render(component, contentNode);
...
ReactDOM, as you probably guessed, is defined in the included script, react-dom.js.
The above line asks the ReactDOM library to render the component within the content node.
In this case, the content node is the one with the ID contents.
Figure 2-1. Hello World written in React
Chapter 2 ■ hello World
19 But the component is a little more interesting. Look at this line:
...
var component = <h1>Hello World!</h1>;
...
This is probably familiar to you; it looks like HTML. But it should immediately strike you that the component is not a string that’s being used as an innerHTML. That’s because it’s not enclosed in quotes. It’s not even valid JavaScript! How did it even parse?
It is, instead, a special HTML-like language called JSX. It, in fact, gets transformed into JavaScript code that generates an element in React’s virtual DOM. After
transformation, this is what the code that is generated will look like:
...
var component = React.createElement('h1', null, 'Hello World!');
...
This essentially creates a React <h1> element (which is not the same as the HTML
<h1> element, but very similar). How and when did the code get compiled into the React.createElement call? Well, there are two lines that are responsible for this transformation. The first is the inclusion of the following script:
...
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
...
The babel library is a JSX transformer. I will not go into the details of how this is done, because soon we will stop using the browser-based transformer, and instead have a build step during the development, which will create a pre-transformed JavaScript file that we can include in the HTML. The browser-based compiler is not intended for use in production; it is just a try-me-out tool.
Then, there is the type of the script that you specify in the wrapping <script> tags around the JSX code:
...
<script type="text/babel">
var contentNode = document.getElementById('contents');
...
The browser-based JSX compiler looks for all inline scripts of type “text/babel” and compiles the contents into the corresponding JavaScript. The other two scripts, react.js and react-dom.js, are the core React libraries that handle react component creation and rendering.
At this point in time, you should play around with the code and try a few things to appreciate and understand what is happening under the hood.
Chapter 2 ■ hello World