JSX is a JavaScript syntax extension for writing XML-like markup inside JavaScript expressions. It resembles HTML, but React requires attribute names to be valid JavaScript identifiers. JSX produces the React DOM that is rendered as an HTML DOM. section 4.0
A JSX element can call a React component as though it were an HTML element. Component attributes pass values as an object, which the component can destructure. section 4.1
Use JSX to build a projection from AST data:
- Return markup directly from a component, such as a span containing placeholder text. section 4.1
- Embed JavaScript expressions in braces to insert values extracted from an AST object. section 4.2.1
- Use className rather than an HTML-style attribute name when applying CSS classes. section 4.0 section 4.2.1
- Render repeated AST children with map and pass each child to a component, supplying a key for the rendered item. section 4.2.1
Projecting a record type
A Projection component can render a record name and recursively render its attributes: <span className="value">{astObject.settings["name"]}</span> and {astObject.settings["attributes"].map((attribute, index) => <Projection astObject={attribute} key={index} />)}. A switch on astObject.concept selects the JSX structure for each AST concept. section 4.2.1
Listing 4.2 src/frontend/index.jsx—using Projection
import React from "react"
import { createRoot } from "react-dom/client"
require("./styling.css")
import rental from "../ch03/rental-AST"
import { Projection } from "./projection" #1
createRoot(document.getElementById("root"))
.render(
<Projection /> #2
)
Shows a JSX component import and its use as the element rendered by React. section 4.1
