Exploring React with vanilla Javascript — part 1

Arseniy Tomkevich
Aug 31, 2018 · 5 min read

Just a few years ago, I wish there was somebody who would tell me what React was without introducing me to ES6, JSFX, Redux, Flux or Saga. After all, at that point I was a Javascript ninja. I have built the most complicated applications in my generation. I knew my OOP, prototypes; and I thought I could pick things up rather quickly, but I was instantly overwhelmed when I started learning React.

React is a library for building user interfaces.

Its important to understand how to follow a structure, but more important to understand the fundamentals of the technology. Luckily for you, that’s exactly what we are going to do in this article.

Also, with the same fervor I have written on Redux:

But in the next few minutes we’ll use React & vanilla Javascript to build a simple Javascript application.


First things first, lets create an HTML document for the application. Its important that the HTML document has these things:

  • The document body must contain a div element for the app.
  • It should also include React & React DOM libraries at the end of the body. You’ll find the latest links at https://reactjs.org/docs/cdn-links.html
  • The last should be a <script> tag where we’ll be writing our React logic.

Our first React application will be a calculator.

The calculator is really just a grid with 5 rows. The first row contains display screen. Every other row contains a set of buttons.

This is what a DOM structure of a calculator would look like if we were to create it with HTML. I broke it down into a table of multiple rows.


At its core, React is a tool for rendering HTML with Javascript. React has a Virtual DOM, which is more efficient in updating the view of your web application. Virtual DOM is simply an abstraction of the HTML DOM underneath. Its a “virtual” representation of the “real”.

Under the hood React uses an efficient diff algorithm that finds modified objects in its Virtual DOM. It then batches its update operations, reducing calls to HTML DOM and re-renders it.


So how would we create the HTML structure above with React?

Step 1.

React has a ReactElement object which describes what to render. React.createElement is a method that creates the ReactElement object. It takes three parameters.

createElement(type, props, children …)

  • type argument specifies the HTML element type
  • props is an object and defines the HTML attributes of the HTML element
  • children… a spread, specifies that any argument after props is a child object. Each child argument is either a ReactElement object or a string.

Step 2.

After creating the Virtual DOM structure of ReactElement objects, we’ll need to use ReactDOM.render to associate and render them in HTML DOM.

Here is what it looks like:

Ok, so we are getting the idea, but code itself looks terrible. Nobody would in their right mind code like that. There are too many nested React.createElement calls! Well, at least now you understand why JSFX became part of the React experience. But anyway…


Lets clean this up and restructure a bit.

Step 1.

Lets make it look prettier; get rid of the React.createElement call in the code and replace it with a substitute function $() that has the same arguments as React.createElement. Our code will look like a lot of JQuery calls, which doesn’t look too bad.

Step 2.

Then, I moved all the code into a render function, renderApp(). This is useful, because now all we have to do is execute renderApp to re-render our application. This becomes a “main” entrance point in our application. We can call it from anywhere in the application.


The code is looking much better. Lets continue.

Step 1.

We’ll have to add callbacks to our buttons to make the calculator function properly. Just add onClick method to every button’s attribute object. In turn, React will bind the onClick event onto the DOM element when it renders it.

Step 2.

Added state to the application, as the calculatorState [Line 7], a global object, which describes the latest calculator state.

{output:0, variable1:0, operator:null};

  • output is what’s being rendered in the calculator output window
  • variable1 — first variable of the arithmetic operation
  • operator which was used in the last arithmetic operation

Step 3.

Added the click handler for every calculator button [Line 21, 28, 35…]. Each handler mutates the calculator state (calculatorState) and passes it into the renderApp function, which reads the state and makes appropriate changes within Virtual DOM.

At this point our application architecture looks simple and our usage of React is up to current standards. We can conclude the exercise a success.

Please don’t forget to follow me. In the next React article I will come back to this example. We will further restructure the application, breaking down the functionality into React Components.

Check out my other articles

Arseniy Tomkevich

Written by

I have no special talents. I am only passionately curious for Computer Science, Visual Arts & Cybernetics. linkedin.com/in/atomkevi

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade