Create A React Element From Scratch

Create A React Element From Scratch

In this tutorial we are going to create a React Element from scratch. This will show us a little bit about why we first import React and ReactDOM as well as how a JSX expression gets converted to an Object for the Browser to use. We are making use of the Create React App, however we will delete the welcome component and start at the beginning. We are going to write some React code from scratch so the first thing we need to do is delete everything in the src folder. Here goes!

react from scratch

The next thing to do is to add a blank index.js file in the src folder like so.
index js in react app

With that, we have this exciting blank slate from which to begin coding.
fresh index js file

Importing React and ReactDOM

The first thing we want to do is to import a couple of modules at the top of the file. We are to import React and ReactDOM using these two lines.

import React from 'react';
import ReactDOM from 'react-dom';

Defining An Element In React

The next step is to define an element using the const keyword. We’ll assign a JSX expression to the constant below. The highlighted line contains the JSX which is sent through the Babel compiler to be converted to pure JavaScript for Browsers to read. The resulting JavaScript will have calls to the React.createElement() function. This is why we see the import statement of React at the top of the file. Even though we don’t see calls to React.createElement() in the code we write, there will be calls to React.createElement() once Babel does its work and that is why we need to import React the way that we do.

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h2>Hello React!</h2>;

Inspecting Our Element

Now let’s log out that element which contains the JSX expression from above.

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h2>Hello React!</h2>;

Here we can begin to understand how JSX converts to an Object in JavaScript. In Chrome developer tools let’s look at the console tab and see this object.
JSX object in memory
What we see is an Object. This object is the result of the JSX expression once it has been compiled down by Babel for use in the Browser. It is a React Element. This brings us to the virtual dom. The virtual dom is a lightweight, in-memory version of the real user interface. So this Object we see here is part of the virtual dom. Any time the state of this object changes, React will get a new React Element and compare the two in order to determine any changes. Once this is complete, the real DOM (the UI), gets updated automatically. This all happens in a split second.

Rendering To The Real DOM

Now we can render this React Element to the real DOM. This is the purpose of importing ReactDOM the way we did on-line 2. To render our element, we use this code highlighted here.

import React from "react";
import ReactDOM from "react-dom";

const element = <h2>Hello React!</h2>;
ReactDOM.render(element, document.getElementById("root"));

The first argument to the ReactDOM.render() function is the element that we want to render. The second argument is the location in the real DOM where we want the element to be rendered. Now, we did delete all of the files in the src folder but we did not delete the contents of the public folder. In that public folder is an index.html file that has the root element of a react application. We can see it here.
react root div element

The div with the id of root is the container for the react application. Hence, this is where our element is going to be rendered. In fact, let’s look at the browser now and see our new element!
hello react

We can look inside of developer tools to look a little more closely at how this react element is rendered to the browser. Notice the div with the id of root, and inside of that div is the element we created with JSX. We see the h2 element with the text set to Hello React!
react element inside the root div

Further Reading

Create A React Element From Scratch

Start by importing React and ReactDOM. The next step is to define an element and assign a JSX expression to that element. After this, add a call to the ReactDOM.render() function to insert the element into the real DOM. Take a look at your browser and developer tools and profit from your brand new React Element created from Scratch!