HTML structures the document that web applications display and manipulate. Modern React applications define that structure inside JavaScript through JSX rather than maintaining HTML as an entirely separate artifact. section 7.1
Treat HTML as part of an interconnected application surface:
- Classic web development keeps HTML, CSS, and JavaScript largely independent. section 7.1
- React places HTML-like structure inside JavaScript with JSX, keeping document structure and application logic synchronized. section 7.1
- Changing HTML without updating its CSS can produce visual defects or unusable interfaces, motivating component-oriented styling approaches. section 7.1
HTML inside a React component
A React component can define its document structure with JSX and keep related behavior in the same JavaScript application. CSS-in-JS extends this consolidation by colocating styling with the component when separate HTML, CSS, and JavaScript workflows create friction. section 7.1
Figure 7.1 In classic web development, the three technologies are developed more or less independently. But in modern web development, either HTML alone or HTML and CSS gets bundled with the JavaScript, as the JavaScript is the main protagonist of our web application narratives.
Compare independent HTML, CSS, and JavaScript development with modern applications that bundle HTML, or HTML and CSS, into JavaScript. section 7.1
