What is the DOM?

The DOM stands for Document Object Model that represents the HTML document in the form of an object model which is in the tree-like structure as in the diagram below where each node acts as an object that represents a section of the document. As explained about DOM is the output of the HTML parser.

Javascript Engine Execution Process

HTML file contains the JS file references. Once the references are figured out, the browser will download the JS file and handover the same to the JS engine for the execution. The JS engine now directly executes the JS file. JS main advantage is to change the DOM dynamically that too on the real DOM. Though it’s an advantage, the same is considered as a disadvantage.

Because whenever there is a change in the DOM, the modified tree is supposed to go through the layout and painting process at least to refresh the latest change on the browser screen.

Drawbacks

Reflow & Repaint: When the Document Object Model (DOM) is altered, the browser might have to reflow (compute the new layout) and repaint (redraw the elements). This process can be demanding on performance if it happens often, particularly for intricate pages.
Inefficiency: Manipulating the DOM directly can result in performance problems, particularly when numerous updates occur. Every modification can cause the responsiveness of the UI.

Now we have enough understanding of the browsers functionality.

Prerequisites

Before learning with React.js, you must have some basic knowledge in HTML, CSS, Javascript fundamentals and ES6.

HTML (Hypertext Markup Language)

Why is HTML important? React is largely dependent on the structure of HTML.

These are the key concepts we need to learn:

Basic tags (
,
,
, etc.)
Forms and inputs
Semantic HTML (
,
,
)
Links and images
Lists and tables
HTML5 features (like video/audio, local storage, etc.)

CSS (Cascading Styling Sheets)

Why is CSS important? React components require styling, and although React offers its own styling methods, understanding CSS is crucial for layout and design.

Below is the list of components we need to know from CSS:

Basic selectors (.class, #id, element)
Box model (margin, padding, borders, content)
Flexbox and CSS Grid for layout
Responsive design (media queries, mobile-first approach)
CSS specificity and inheritance
Positioning and z-index
CSS transitions and animations (optional, but useful)

Javascript

Understanding the core Javascript feature is very important before getting started with React as it is relies on modern Javascript (ES6+)

Below is the list of components we need to know:

Variables and data types: let, const, var, numbers, strings, arrays, objects
Functions: Regular functions, arrow functions, function expressions
Loops and conditionals: for, forEach, map, if, switch
Arrays: Methods like .map(), .filter(), .reduce(), .find()
Objects: Accessing properties, object literals, destructuring

ES6+ features

Arrow functions (() => {})
Template literals (`Hello ${name}`)
Destructuring (const { name, age } = person;)
Spread/rest operator (…)
Default parameters
Classes and modules (optional, useful for React class components)
Promises and Async/Await for asynchronous code
Modules and imports/exports

ECMAScript6 (ES6)

ES6 introduced several significant enhancements to JavaScript, modernising the language, increasing its capabilities, and simplifying its use. Among the most notable advancements were block-scoped variables, arrow functions, classes, modules, promises, and template literals. These features enable developers to create cleaner, more maintainable code and enhance the performance of contemporary web applications.

If you are still working with older JavaScript syntax or patterns, moving to ES6 can significantly boost your productivity and improve the quality of your code!

It’s important to be familiar with the new features of JavaScript that were introduced in ECMAScript6 (ES6); you’ll explore these concepts in the upcoming article.

Conclusion

That’s all about the basics we are supposed to understand before getting deeper into the React world. So, let’s start understanding in the next article about how React solves the rendering problem.

Request more information

What is the DOM?