A transpiler is a program that converts source code from one programming language or syntax level into another, typically within the same broad programming domain.
Transpilation converts source written in one language or syntax level into another. JSX is transpiled into standard JavaScript before a browser can run a React application. section 3.1.2
Turning JSX into JavaScript
A JSX expression such as `const title = <h1>Hello</h1>;` is transformed into JavaScript using React.createElement calls. The browser executes the generated JavaScript rather than the JSX source. section 3.1.2
Transpilation matters because:
JSX is not part of the ECMAScript specification and cannot be processed directly by an ordinary JavaScript compiler. section 3.1.2
Transpiling changes syntax; a later compiler interprets or executes the resulting JavaScript. section 3.1.2
Tools such as Babel perform the required transformation, usually without developers needing to manage it directly. section 3.7
How React Quickly, Second Edition covers it
How deep it goes
Defines syntax conversion, explains generated React.createElement calls, and stops short of detailed transformer internals.
Examples
Shows `<h1>Hello</h1>` becoming a React.createElement-based JavaScript expression.
What it assumes
Assumes basic JavaScript familiarity while clarifying that JSX is separate from standard JavaScript.
What you can do after
Understand why JSX must be transformed before browsers can execute React applications.
How it connects
Connects JSX with React, JavaScript, ECMAScript, React.createElement, browsers, and Babel.
Web Components in ActionTranspilation is the source-to-source transformation of code from one readable programming language or language version into another.
Babelused by · Babel is a JavaScript compiler and transformation tool that converts modern JavaScript syntax and related extensions into code compatible with specified environments.
JSXuses · JSX is a JavaScript syntax extension for expressing user-interface elements with XML-like or HTML-like markup that is transformed into JavaScript.
JavaScriptproduces · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
deployment pipelineused by · A sequence of automated or manual stages that builds, tests or validates, packages, and delivers software or models toward deployment.
This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.
