Forward Advance Learning

React Vanilla Hello World

React is a DOM manipulation library. It contains methods that allow us to create virtual DOM nodes, then render them to the real DOM so they appear on our web page.

A minimal React index.html page looks like this:

<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="app.js"></script>
</body>
</html>

We have a div with an id of app, then we have three script tags, two of which belong to React, and one of which (app.js) contains our code.

Creating virtual DOM nodes

To use React, we create virtual DOM nodes, like so:

var el = React.createElement('h1', null, "Hello, world!");

The parameters are:

  1. The type of element we want.
  2. A JSON object which will be used to make attributes (we call them props).
  3. The content of the element. This might be an array of other elements.

Rendering

Creating this DOM node does nothing visible, because it's not attached to the DOM.

If we want to take these changes and slap them onto the real DOM, we have to 'render'. We do this using ReactDOM, which is the second dependency of our app.

Here

ReactDOM.render(
el,
document.getElementById('app'));

Here's that in context:

See the Pen React Hello World by Nicholas Johnson (@superluminary) on CodePen.

Try and change the hello world app to a goodbye world app.

React-DOM gives us shortcuts

Typing React.createElement all the time is going to get stale quite quickly. React gives us helper methods for common html DOM nodes. Say we want an h1, we can call:

React.DOM.h1(null, "Hello, world!");

This is fully equivalent to:

React.createElement('h1', null, "Hello, world!");

Here's that in context:

See the Pen React Hello World by Nicholas Johnson (@superluminary) on CodePen.

Try and make an h2

Exercise - Hello React

In this course, we'll be working in code pens some of the time, and sometimes directly in the browser.

In this exercise, we're just going to get a React Hello World running in a browser, without pens, or tooling, or ESNext, or any other fancy shmancy stuff that we'll get to later. Just plain, workmanlike, ES5 and HTML.

Make an index.html file using the above as a guide. Now make an app.js file. Open the index.html file in your browser. Try and get a halfway decent little hello world running.

Note: Don't do copy-pasting. No-one learns from copy-pasting code. Try to do it from memory without referring to the notes.