Summary - JSX
- React Native course
- Beginner
- Lesson 12/116
- 5 min
Combine expressions, nested components and conditional rendering to write a profile card.
Summary - JSX
In this group you learned what JSX is, how to embed expressions in curly braces, the nested component tree, self-closing tags, and conditional rendering methods.
You can now compute and show variables in a component's return, and display different text based on conditions.
Let us combine all these concepts in a single app.
Practice Expression and nesting
Define a variable productName (const productName = 'Coffee';). The App component should return an outer <View> containing a second <View>, and inside that <Text>Item: {productName}</Text>.
Starter code
// Define productName
// Write the App component
function App() {
return null;
}Sample solution
const productName = 'Coffee';
function App() {
return (
<View>
<View>
<Text>Item: {productName}</Text>
</View>
</View>
);
}Practice Conditional welcome
Define a variable isLoggedIn (const isLoggedIn = false;). The App component should use a ternary inside a <View>: if true show <Text>Welcome</Text>, if false show <Text>Please sign in</Text>.
Starter code
// Define isLoggedIn
// Write App with ternary
function App() {
return null;
}Sample solution
const isLoggedIn = false;
function App() {
return (
<View>
{isLoggedIn ? <Text>Welcome</Text> : <Text>Please sign in</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></view>
- <View><Text></View></Text>
- <View><Text /></View> Correct answer
- <View text=hello />
Explanation: Self-closing Text is used correctly inside View.
2 Match the JSX tools
| Term | Meaning |
|---|---|
{ } |
Embed expression |
<View /> |
Self-closing |
&& |
Conditional and |
? : |
Ternary |