Hiprup

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

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 <View style={s}>...</View> 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 (<>...</>).

// JSX you write:
function Greeting({ name }) {
  return (
    <View style={styles.box}>
      <Text>Hello, {name}</Text>
    </View>
  );
}

// What Babel compiles it to (classic transform):
function Greeting({ name }) {
  return React.createElement(
    View,
    { style: styles.box },
    React.createElement(Text, null, 'Hello, ', name)
  );
}

// React 17+ new JSX transform (no `import React` needed):
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

function Greeting({ name }) {
  return _jsxs(View, {
    style: styles.box,
    children: [_jsx(Text, { children: ['Hello, ', name] })],
  });
}

JSX is syntactic sugar. The Babel JSX transform turns <View style={...}><Text>Hi</Text></View> into nested React.createElement(View, { style }, React.createElement(Text, null, 'Hi')) calls.

These return plain JS objects — React Elements — which React reads to build the component tree. The new JSX transform (React 17+) uses jsx/jsxs from react/jsx-runtime so you don't need to import React in every file.

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.

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