The missing introduction of React.js
Recently I’ve started learning React.js
with my limited knowledge of the front-end, I stumbled upon React.js
official site, and it presented me like this.

Followed the instruction and Iwas greeted with “Hello, World!”. Awesome isn’t that something we can do directly in HTML ? What react do ?
I asked “Google” and here are few Terminology that were thrown at my face.
reusable components, stateful components, virtual dom.
Having limited knowledge of the front-end and not used any front-end framework or library before, I completed the official tutorial but all the rich information at the official documentation or any other great article out on Internet was more difficult to understand for me, and there was few questions that i kept asking myself again and again
- What led to the need for front-end pages to be componentized ?
- What kind of problems non component front-end code face and how the React.js solves these problems ?
This post is my attempt to present that missing part of React.js
with these two question in mind to novice like me in autodidact way.
All of the engineering marvels has came out of need so to understand the use of react.js
lets present our-self with an problem.
How would we implement a simple upvote and downvote functionality like this ?

Even with my limited knowledge i can write HTML for this. Check the Result tab.
How cool, But how would be go on and use this functionality inside different page ? Now we have a problem and to solve this we have to copy the whole button
structure inside the another page. That what we have been doing traditionally.
Can we do a better job than copying the whole structure again and again. Lets try to rewrite it in a way to make it reusable. We can write a class that returns a string representation of the HTML structure, and using this class to build button instance and insert them into the DOM
.
But now our event listener to the button are dead, as our class UpVoteButton
and DownVoteButton
are simply a string, and we can’t add events to a string. To add event we need DOM
structure. Lets modify our class to create a DOM
structure from string using the DOM API
.
Now we can add event Listener, to our custom class
at the time of instantiation of our classes. But after the instantiation we have to track if the button has been upvoted or downvoted, and for that we need state
in our class that keeps track of all the state variable that our class instance depends upon, and a method
that can update the state based on the event when the button has been clicked.
let’s put that state
in our constructor to be accessible to all method and a method named changeUpVotedText
to update the state based on events. Check the Result Tab.
If we carefully look at our two methodchangeUpVotedText
and changeDownVotedText
containing the DOM operations. Right now these DOM operations are done on the one state, and with the change of state these methods are directly manipulating the DOM to update new content on the page.
Imagine if our components depends on a lot of state, this manual managing the relationship between data and DOM
can lead to poor maintainability and error-prone code. As The full implications of element.innerHTML=x are enormous. Rough overview:
- parse x as HTML
- ask browser extensions for permission
- destroy existing child nodes of element
- create child nodes
- recompute styles which are defined in terms of parent-child relationships
- recompute physical dimensions of page elements
- notify browser extensions of the change
- update Javascript variables which are handles to real DOM nodes
So we can imagine why doing this could be a performance disaster if the element we’re updating happens to have a few thousand children. And also we don’t have any single place that manages the response to change in state and then apply this change back to DOM
. If we need another function that also responds to event and manipulate the DOM
directly, their is high percentage of chance that we could have a race
condition or our DOM
becomes out of sync
.
Can we do better ? Let’s Think this way Once the state is changed, build a new DOM element by calling render method again and Update the Page. This way we don’t have to maintain the relationship manually, and we get a single piece of code in our application, that deals with DOM API
based on state.
In our case we name this method setState
that is solely responsible for changing the state
of the object and re-rendering the DOM
element again.
With that in place whenever user clicks on the button
an click
event will fire up and that in turn will call changeUpVotedText
and it will build a new state
objects, through call to the setState
method that in turn will build the new DOM Object
based on the new State.
Now how does one re-insert new DOM ?
Because the new element that we have created in the setState
method is a instance of DOM element
, but setState
doesn’t have any way to communicate with the “Top Level API of DOM
” which actually instructs our document (HTML Page) to make the necessary change in place. We have to somehow communicate from our setState
method to DOM API
(outside our Component) and tell them to re-insert new DOM
, in place of old DOM
.
In our code, we are dealing with the DOM
API directly with wrapper
object representing the first element in the document that matches the specified set of CSS selectors.
const wrapper = document.querySelector(".wrapper");
const upVoteButton = new UpVoteButton();
wrapper.appendChild(upVoteButton.render());
As our wrapper
element is handling the DOM
API, we can attach a function to upVoteButton
instance that is aware of the DOM
element where our new DOM
element created in the setState
method needs to be updated and calls the respective DOM
API. All we have to do is call that function from our setState
method.
With that in place let’s check our working model.
It’s seems so clear that our setState
right now add
and delete
DOM elements, causing the browser to do a lot of rearrangement, that seriously affect the performance.
This is where the React.js uses their strategy called
Virtual-DOM
.
But setting a method onStateChange
like this on every instance that we have created is troublesome process. Let’s write a function called componentMount
that will help us to automate this process of ours.
Now all we have to do is pass the created component and container to the DOM.
const wrapper = document.querySelector(".wrapper");
const upVoteButton = new UpVoteButton();
const downVoteButton = new DownVoteButton();
componentMount(upVoteButton, wrapper);
componentMount(downVoteButton, wrapper);
Improving further we can abstract few things into a Component
class that our custom component
can inherits and make our life simpler.
Here we are tracking just onClick
event-handler, but we get the idea we can add method for different kind of event handler.
Let’s refactor our UpVoteButton
What if we want to pass some custom configuration data to our custom class. We can add props
as configuration parameter in Component class and subclass so that when extended we get access to props using this.props
.
With that we have created our very own component system and learn’t how with Component based system we have solved some of the problem of re-usability in front-end. Every Component has its own DOM
structure and its behavior and display style is determined by its own state and props. So when data changes the Component will automatically re-render the new Content.
Conclusion
Well, with that hopefully you now have an answer to questions and a good overview of what kind of problem React.js
component is fundamentally trying to solve, but in an extreme efficient way.

Disclaimer: This post is a summary of my knowledge that about React.js behavior that has came through my own learning, and must not be mistaken for “Oh so this is how React.js works under the hood”
There may inevitably be many error, here, and hope that everyone who find the error can help me with it. You can find the entire source code here.
Please Send me Pull request if you feel the source needs to be or can still be improved, both in term of explanation and structure.
Time for me to head over to reactjs.org and learn React again with new enlightenment. 😅
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.