What is JSX?

On This Page

What JSX Becomes

Why JSX Exists

JSX Is Not HTML

In a React Native file, you describe the screen with tags that look like HTML, and those tags sit directly inside your JavaScript code. This syntax is called JSX. The name is usually expanded as JavaScript XML, and JSX is an extension of JavaScript rather than a separate language.

Every lesson in this chapter works on one small screen, a profile card for a learner named Sara. It starts with a single greeting:

import { Text, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello, Sara!</Text>
    </View>
  );
}

View is a container, and Text displays text. The tags show the structure of the screen in the same shape it will have on the phone: the text sits inside the container, both on the screen and in the code.

What JSX Becomes

A JavaScript engine cannot read tags. If Hermes received <View>, it would report a syntax error, so something must rewrite the tags before the code reaches the engine. That tool is Babel, the compiler from the project structure lesson. Metro runs it for you whenever it bundles your code.

Here is the App function after Babel has processed it, simplified by removing the generated import bookkeeping:

function App() {
  return jsx(View, {
    children: jsx(Text, { children: 'Hello, Sara!' }),
  });
}

Each tag became a call to a function named jsx, which React provides in react/jsx-runtime. The tag name became the first argument, and whatever sat between the tags became a property called children. You may see the name jsxs in compiled code as well, which React uses when a tag has several children.

Calling jsx does not draw anything. It returns a plain JavaScript object called an element, which only describes what you want. Printing the fields of the Text element gives this result:

type is Text: true
props: {"children":"Hello, Sara!"}
key: null

React reads these element objects to learn what the screen should contain, and React Native then creates the native views. In our test, the hand-written jsx calls and the tags produced exactly the same rendered tree:

View
  Text: Hello, Sara!

One Text tag passes through Babel, a jsx call, and an element object before React Native creates a native view.

Why JSX Exists

The compiled version above shows the reason. You could write those jsx calls by hand, and the application would run the same way. With two tags, the calls are still readable, but with twenty tags nested five levels deep, the structure of the screen disappears inside brackets and commas. JSX keeps that structure visible, which makes the code easier to read and mistakes easier to spot.

You may also notice that this code does not contain import React from 'react'. Older code needs that line, because its tags compile to React.createElement. Babel adds an import of react/jsx-runtime to the compiled file automatically, which is the bookkeeping left out of the version above, so you do not need the line. It is harmless if you meet it in existing code.

JSX Is Not HTML

JSX looks like HTML, but React Native has no browser and no HTML. If you come from web development, three differences matter from the first day.

The element names are different. React Native does not have div, p, h1, img, or input. Instead, it provides its own components, which you must import from react-native.

Attribute names follow JavaScript rules. The attributes of a tag become property names on an object, so they use camelCase, as in numberOfLines and onPress. React calls these attributes props.

Some React web props do not apply. React on the web replaces the HTML attribute class with className and onclick with onClick. Neither one works that way in React Native. A className on a Text is ignored, so the text receives no styling from it. A finger press on a Text calls its onPress and does not call its onClick. The React Native source does contain an onClick prop, but it serves other input, such as a hardware keyboard on Android and experimental pointer events that are off by default.

React Native gives you no error in either case, so these mistakes are easy to miss. To style an element, use the style prop. To respond to a press, use onPress.

On the web	In React Native
`div`	`View`
`p`, `h1`, `span`	`Text`
`img`	`Image`
`input`	`TextInput`
`className`	`style`
`onClick`	`onPress`

Mark as Completed

Reading Progress

Vote for new content

On This Page

What JSX Becomes

Why JSX Exists

JSX Is Not HTML