How can a URL change and show a new view without loading another page? In a single-page application (SPA), the browser loads one HTML file. JavaScript creates the view, then updates it as the application state or route changes. The browser does not reload the page for each route. section 1.3.2 section 1.4
The work happens in a few steps:
- The server returns a mostly empty HTML file containing references to JavaScript and CSS bundles. section 1.3.2
- The browser loads those files. Framework code uses the Document API to create the first view; this is called mounting. section 1.3.2
- When the route changes, a router updates the address bar and the view instead of reloading the application. section 1.3.2
Creating part of a view
Starting with an empty HTML body, JavaScript can create a paragraph, set its text to “Hello, World!”, and append it to the document. Mounting an SPA uses the same Document API principle to create its view from components. section 1.3.2
const paragraph = document.createElement('p')
paragraph.textContent = 'Hello, World!'
document.append(paragraph)
This small listing shows the element creation and text-setting operations behind the paragraph example. section 1.3.2
The HTML file is only the starting point, not a separate page for every view. A build can bundle application code, third-party code, and CSS into files the browser loads; the framework then updates the displayed HTML as needed. section 1.3.1 section 1.4
