What is JSX?

Learn JSX syntax and HTML-like writing in JavaScript.

What is JSX?

JSX is a way to embed HTML-like syntax inside JavaScript. It is used in React Native to describe screens. A <View> tag actually compiles to a function call.

In JSX, tags start with a capital letter (View, Text); lowercase ones are treated as HTML and do not work in React Native.

Every opening tag must have a closing tag, or be self-closing like <View />.

JSX rules

When writing JSX, you should remember three principles. First: a component must return a single root tag. If you have multiple parallel tags, you wrap them in a <View>.

Second: every opening tag must have a closing tag. Third: component names always start with a capital letter; this lets React tell them apart from HTML tags.

These three principles form the foundation of JSX.

Exercise Write your first JSX

Write an App component; inside a <View> root tag return <Text>Hello JSX</Text>.

Show example solution

function App() {
  return (
    <View>
      <Text>Hello JSX</Text>
    </View>
  );
}

Test yourself

Which is valid JSX?
- <view><text>Hello</text></view>
- <View><Text>Hello</Text></View>
- <View><Text>Hello</View></Text>
- <View Text=Hello />
Show answer

<View Text=Hello /> — Tags must be capitalized and properly nested.
Match the JSX principles

Single root

One top tag
Closing

Every opening needs one
Capital letter

For component names
Curly braces

To embed expressions

Text opening tag

<View>
  ____>Hello</Text>
</View>

Show answer

<View>
  <Text>Hello</Text>
</View>

Next lesson: Expressions

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies