Mounting creates the DOM nodes represented by a virtual DOM tree and inserts them inside a parent element. In a single-page application, this is the initial rendering step: the browser loads mostly empty HTML, then framework JavaScript creates the view programmatically. section 4.3 section 1.3.2
A small renderer can divide the work into these responsibilities:
- Call the view function to obtain the application’s virtual DOM. section 7.3
- Convert each virtual node into a real DOM node with mounting logic. section 4.3
- Insert the created nodes into the selected parent element. section 4.3
- Keep mounting separate from patching and unmounting; call mount() only once for an application instance. section 7.3
Creating a DOM node directly
const paragraph = document.createElement('p') paragraph.textContent = 'Hello, World!' document.append(paragraph) This produces a paragraph in the document. A virtual-DOM renderer performs the same kind of browser operation programmatically, but derives the nodes from a virtual tree. section 1.3.2 section 4.3
Figure 1.7 The framework creates the application’s view using the Document API.
Use the rendering-flow diagram to see how framework JavaScript creates the application view after the browser loads the initial HTML. section 1.3.2
