liveBook · Manning

JSX

As explained in Build a Frontend Web Framework (From Scratch)

A JavaScript syntax extension that allows markup-like expressions to be written in JavaScript code.

JSX is a JavaScript syntax extension used by React and Preact to write markup-like expressions in component code instead of writing HTML directly. section 1.3.1

JSX fits into frontend component development by:

  • Keeping view structure and JavaScript behavior together in a component. section 1.3.1
  • Requiring a build step before frontend code is bundled, minified, and shipped to browsers. section 1.3.1
{hasDiscount && <p>You get a discount!</p>}

Compare JSX conditional rendering with template directives and block syntax used by other frontend frameworks. section 1.3.1

How Build a Frontend Web Framework (From Scratch) covers it

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 it assumes
Assumes familiarity with JavaScript and introduces JSX as an alternative to writing HTML directly.
What you can do after
Evaluate JSX as a component-view syntax and recognize its conditional-rendering pattern.
How it connects
Connects JSX with JavaScript, React, Preact, components, HTML templates, conditional rendering, and frontend building.
Cover of Build a Frontend Web Framework (From Scratch)
liveBookmanning.com
Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

Also explained in

Compare how 6 books explain JSX →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.