Your first component
- React Native course
- Beginner
- Lesson 3/116
- 4 min
Learn to write your first component with View and Text.
View and Text
View is the most basic container component in React Native. Think of it like a <div>; you put other components inside it. Text displays text on the screen, like a <p>.
Both are imported from the react-native package: import { View, Text } from 'react-native';.
Component names always start with a capital letter; this lets React tell them apart from HTML tags.
Nested components
In React Native, components can be nested. You can put another <View> or <Text> inside a <View>. This is the basis of the component tree.
Every opening tag must have a closing tag. An empty tag can be written in self-closing form like <View />.
Nested structures let you break the screen into logical pieces.
Practice Write nested components
Write an App component. Place two <Text> elements inside a <View>: the first says Title, the second says Description.
Starter code
// Write a View with two Text elements
function App() {
return null;
}Sample solution
function App() {
return (
<View>
<Text>Title</Text>
<Text>Description</Text>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Closing tag
<View>
<Text>Hello</Text>
____><View>
<Text>Hello</Text>
</View>Explanation: The View tag closes with </View>.
2 How do you place a Text inside a View?
- <Text><View>Hello</View></Text>
- <View><Text>Hello</Text></View>
- <View Text>Hello</View>
- <View><Text Hello /></View> Correct answer
Explanation: <View><Text>...</Text></View>. View is the container; Text sits inside.
3 Match the components
| Term | Meaning |
|---|---|
View |
Container |
Text |
Text |
import |
Bring in |
export |
Send out |