If you know JavaScript and want to get started with React, why not spend a little time seeing how your HTML can be transformed into vanilla JavaScript, and from JavaScript into comparable React code?

Let's start with a simple HTML page that renders an image and heading.


    

        
        
John Smith

Simple enough. Now, how would you render that same <div> using vanilla JavaScript (i.e. no additional libraries)?

let img = document.createElement("img");
img.src = "./avatar.jpg";

let h2 = document.createElement("h1");
h1.innerText = "John Smith";

let div = document.createElement("div");
div.appendChild(img);
div.appendChild(h2);

document.body.appendChild(div);

Not something you'd want to do everyday, but you could do it if you needed to. Since we have to create elements, then apply attributes and append children, let's see if we can make a flexible version of createElement that could do all of this for us.

function createElement(tagName, attributes, ...children) {
    let element = document.createElement(tagName);

    // Attributes for the element are passed as a JavaScript object
    // where the properties represent the element's attributes.
    for (attributeName in attributes) {
        element.setAttribute(attributeName, attributes[attributeName]);
    }

    // Everything after the attributes is gathered into an array
    // using the rest operator. Strings will create simple text nodes
    // and anything else is assumed to be an HTML DOM element.
    for (child of children) {
        if (typeof (child) === "string") {
            element.append(document.createTextNode(child));
        } else {
            element.append(child);
        }
    }

    return element;
}

let newElement = createElement("div", { "class": "profile" },
                               createElement("img", { "src": "./avatar.jpg" }),
                               createElement("h2", null, "John Smith")));

With our flexible version of createElement, we can build an entire tree of elements, each with its own attributes and children - which is exactly what happens when you render content using React (with a slight change for the "class" attribute to avoid collision with JavaScript's class keyword).

let newElement = React.createElement("div", { className: "profile" },
                                     React.createElement("img", { src: "./avatar.jpg" }),
                                     React.createElement("h2", null, "John Smith")));

Of course, React.createElement does much more than our simple function, but, conceptually, you can begin to make the transition from using vanilla JavaScript to React when building a UI programmatically. React is creating elements just as we would do with vanilla JavaScript.

You might wonder, "But that's not what I see when I look at React code." And you would be correct. What you typically see is something like this:

let newElement = 

        
        
John Smith

The HTML-like syntax is React's JSX - a markup that can be mixed with JavaScript and converted into pure JavaScript that uses React.createElement to build DOM elements. You can see this conversion using the online Babel transpiler tool. It converts different types of source inputs (such as JSX) into JavaScript code.

React does a lot more than simply build your DOM elements, but if you have been confused by seeing React sample code, at least now you can gain some understanding into what it's actually doing.