JSX / Template Syntax
The HTML-looking syntax inside a component that declares what the UI should contain for the current data.
See it
What it is
JSX and framework template syntax let you declare UI with markup-shaped code instead of issuing DOM commands one at a time. JSX is a JavaScript syntax extension, introduced alongside React at Facebook in 2013, that compiles into element-creation calls. Vue single-file components and Svelte templates look similar but have their own directives and compilation rules.
Use the syntax to describe the output for the component's current data: embed expressions, branch between elements, and map collections into repeated children. The framework then handles creating or updating the corresponding DOM.
Gotcha: JSX resembles HTML but is not HTML. JavaScript expressions go inside braces, component names start with a capital letter, and React uses property-shaped names such as className and htmlFor. Values are escaped when rendered as text; bypassing that with dangerouslySetInnerHTML requires trusted, sanitized HTML.
Ask AI for it
Rewrite these document.createElement calls as accessible React JSX. Use semantic article, heading, ul, and button elements; put JavaScript expressions in braces; map records with stable record.id keys; use className and htmlFor; and render user text normally so React escapes it. Do not use dangerouslySetInnerHTML. Show the complete typed function component and three data-driven usages.