@ -20,11 +20,39 @@ JSX is a syntax extension for JavaScript that lets you write HTML-like markup in
The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
<DiagramGroup>
<Diagramname="writing_jsx_html"height={237}width={325}alt="HTML markup with purple background and a div with two child tags: p and form. ">
HTML
</Diagram>
<Diagramname="writing_jsx_js"height={237}width={325}alt="Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.">
JavaScript
</Diagram>
</DiagramGroup>
But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components!**
But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components!**
<DiagramGroup>
<Diagramname="writing_jsx_sidebar"height={330}width={325}alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
Sidebar.js
</Diagram>
<Diagramname="writing_jsx_form"height={330}width={325}alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
Form.js
</Diagram>
</DiagramGroup>
Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
Ricky
3 years ago
GitHub
