From JavaScript to React

Rendering User Interfaces

To understand how React works, we first need a basic understanding of how browsers interpret your code to create interactive user interfaces (UI).

When a user visits a web page, the server returns an HTML file to the browser that may look like this:

The browser then reads the HTML and constructs the Document Object Model (DOM).

What is the DOM?

The DOM is an object representation of the HTML elements. It acts as a bridge between your code and the user interface, and has a tree-like structure with parent and child relationships.

You can use DOM methods and a programming language, such as JavaScript, to listen to user events and manipulate the DOM by selecting, adding, updating, and deleting specific elements in the user interface. DOM manipulation allows you to not only target specific elements, but also change their style and content.

Let’s see how you can use JavaScript and DOM methods in the next section.

True or False: You can update the page content by manipulating the DOM.

Additional Resources: