JSX
JSX is a JavaScript syntax extension for expressing user-interface elements with XML-like or HTML-like markup that is transformed into JavaScript.
React Quickly, Second Edition
JSX is a JavaScript syntax extension that expresses React elements with HTML-like notation and is compiled into JavaScript.
- How it is used
- Uses HTML-like notation to write readable React elements and components inside JavaScript.
- How deep it goes
- Works through element creation and syntax pitfalls while leaving manual transpiler configuration optional.
- Examples
- Compares nested JSX with React.createElement and builds greetings, links, and dynamic component content.
- What you can do after
- Apply it via Create React App to compose components with dynamic content without configuring JSX transpilation.
Essential TypeScript 5, Third Edition
A JSX class is a class whose implementation contains JSX elements that are transformed into standard JavaScript.
- How it is used
- Uses JSX to generate web-application content without assembling every HTML element through DOM API statements.
- How deep it goes
- Works through compiler transformation, a minimal DOM factory, and class composition; distinguishes that factory from framework handling of dynamic content.
- Examples
- Shows a product-count heading, a DOM-backed factory, and category buttons composed into a product list.
- What you can do after
- Build it from scratch with a minimal factory, then compose JSX classes and insert their returned elements into a page.
Read how Essential TypeScript 5, Third Edition explains JSX →
Building User-Friendly DSLs
A JavaScript syntax extension that permits XML-like markup to be embedded in JavaScript expressions.
- How it is used
- Uses JSX to render an editable-looking projection of DSL AST content for domain experts.
- How deep it goes
- Explains syntax, attributes, embedded expressions, mapping, recursion, and concept dispatch, but defers broader React and DOM details.
- Examples
- Uses Projection components, Rental record types, AST attributes, embedded expressions, CSS classes, and recursive array mapping.
- What you can do after
- Builds a React JSX projection that renders AST data and passes nested values through component attributes.
React Hooks in Action: With Suspense and Concurrent Mode
JSX is a JavaScript syntax extension for describing user-interface elements with an HTML-like notation.
- How it is used
- Describes React interfaces by combining HTML-like UI structure with JavaScript and reusable components.
- How deep it goes
- Defines JSX and its preprocessing, then explicitly defers further exploration.
- Examples
- Uses a quiz interface with reusable TextToggle components for questions and answers.
- What you can do after
- Apply it via Babel to describe reusable React interfaces with component props.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains JSX →
Build a Frontend Web Framework (From Scratch)
A JavaScript syntax extension that allows markup-like expressions to be written in JavaScript code.
- How it is used
- Uses JavaScript-based markup expressions to define component views and conditional interface content.
- How deep it goes
- Defines JSX as a JavaScript extension and demonstrates conditional syntax, but stops short of explaining its compilation internals.
- Examples
- Uses a hasDiscount expression that conditionally renders a paragraph.
- What you can do after
- Evaluate JSX as a component-view syntax and recognize its conditional-rendering pattern.
Read how Build a Frontend Web Framework (From Scratch) explains JSX →
D3.js in Action, Third Edition
JSX is a JavaScript syntax extension for expressing user-interface markup within JavaScript code.
- How it is used
- Expresses React component markup and connects application state to visible interface output.
- How deep it goes
- Defines functional-component returns, conditional expressions, and props, but does not explain JSX implementation internals.
- Examples
- Demonstrates App.js rendering Loading... conditionally, then rendering Charts with fetched data.
- What you can do after
- Build it from scratch by writing a React component that conditionally renders interface elements and passes data through props.
Related concepts
- JavaScriptkind of · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
- Reactused by · React is an open-source JavaScript library for building user interfaces from declarative, reusable components.
- Babelused by · Babel is a JavaScript compiler and transformation tool that converts modern JavaScript syntax and related extensions into code compatible with specified environments.
- HTMLproduces · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
- childuses · A child is an entity or content directly contained within, nested in, or subordinate to a parent in a hierarchical or compositional structure.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.