What is JSX?
- React Native course
- Beginner
- Lesson 7/116
- 4 min
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.
Practice Write your first JSX
Write an App component; inside a <View> root tag return <Text>Hello JSX</Text>.
Starter code
// Write the App component
function App() {
return null;
}Sample solution
function App() {
return (
<View>
<Text>Hello JSX</Text>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is valid JSX?
- <view><text>Hello</text></view>
- <View><Text>Hello</Text></View>
- <View><Text>Hello</View></Text>
- <View Text=Hello /> Correct answer
Explanation: Tags must be capitalized and properly nested.
2 Match the JSX principles
| Term | Meaning |
|---|---|
Single root |
One top tag |
Closing |
Every opening needs one |
Capital letter |
For component names |
Curly braces |
To embed expressions |
3 Text opening tag
<View>
____>Hello</Text>
</View><View>
<Text>Hello</Text>
</View>Explanation: The Text tag starts with <Text.