Explain JSX. How does it map to `React.createElement(...)` calls?

Question

Accepted Answer

JSX is a syntax extension for JavaScript that lets you write XML-like tags inside JS. It is not HTML and not a template language — Babel compiles it to function calls. How JSX is transformed: Babel's JSX transform rewrites ... into React.createElement(View, { style: s }, ...) . The output is a plain JavaScript object — a React Element — with type , props , and children . React reads these elements to build the component tree, then reconciles diffs into native view operations. New JSX transform (React 17+): Uses jsx / jsxs from react/jsx-runtime directly. You no longer need import React from 'react' in every component file. Slightly smaller bundle and better tree-shaking. JSX rules to remember: Component names must be capitalized (lowercase = treated as host primitive). Expressions go in { } ; boolean attributes shorthand as disabled (= true). Adjacent JSX nodes need a wrapping parent or a Fragment ( <>... ). Don't say 'JSX is HTML' — it isn't. JSX is **a syntax for `React.createElement` calls** that returns plain JS objects (React Elements). On React Native there's nothing browser-y about it. Bonus points: knowing the **new JSX transform** (React 17+) means you don't need to `import React` in every file anymore.