Project design
- React Native course
- Beginner
- Lesson 19/116
- 6 min
Design the structure of the counter app and write the skeleton code.
Project: Counter app
In this project we will build a counter app. The user will be able to increase and decrease a number; the screen will show the current value.
We will build it step by step over five lessons. First we will write the basic skeleton, then add state with useState, then wire up increment and decrement functions with TouchableOpacity buttons.
In the end we will have a working, real mini app.
Initial skeleton
For now there is no useState; we will write the number as a constant 0. In the next lessons we will turn this into state. It is important to see a working screen first.
The skeleton has these parts: import View and Text from react-native; declare export default function App(); inside a <View> place <Text>Counter: 0</Text>.
This skeleton is the foundation on which the rest of the project is built.
Practice Write the initial skeleton
Import View and Text from react-native. Write export default function App(); it should return <View> containing <Text>Counter: 0</Text>.
Starter code
// Import View and Text from react-native
// export default function App() {...}
function App() {
return null;
}Sample solution
import { View, Text } from 'react-native';
export default function App() {
return (
<View>
<Text>Counter: 0</Text>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What will the counter app do?
- Upload images
- Increase and decrease a number Correct answer
- Show location
- Send messages
Explanation: A counter increases and decreases a number.
2 Match the counter parts
| Term | Meaning |
|---|---|
Counter |
Number display |
Increase |
Add one |
Decrease |
Subtract one |
useState |
State management |
3 Import line
import { View, ____ } from 'react-native';import { View, Text } from 'react-native';Explanation: The Text component comes from react-native.