Project design
- React Native course
- Expert
- Lesson 43/47
- 6 min
Design the skeleton of the expert final mini app.
Project: Monitoring Dashboard
In this project you will build a Monitoring Dashboard app. We will go step by step over five lessons; each lesson adds a piece on top of the previous solution. The result: new architecture (Fabric) components, performance profiling for optimization, monorepo structure for shared packages.
The first lesson sets up the skeleton: an App component, a metrics state and a title text. Then we add a new architecture component. We wire a Profiler for performance. We import a monorepo package. Finally we integrate all parts. This final brings your expert React Native knowledge together.
A five lesson roadmap
Our roadmap has five lessons. First lesson: skeleton — App, metrics state, title. Second lesson: new architecture — Fabric component. Third lesson: performance — Profiler and memo. Fourth lesson: monorepo — shared package. Fifth lesson: integration — wiring all layers.
Each lesson ends with a code step. The next lesson's starting code contains the previous lesson's solution. This way every step you take is permanent; it is not erased. This cumulative structure shows how a real project grows. In the last lesson all parts come together and a complete app emerges.
Practice Set up the App skeleton
Write an App component. Hold a metrics state with useState({}). The component returns <Text>Dashboard</Text>.
Starter code
import React, { useState } from 'react';
import { Text, View } from 'react-native';
// Add the App component and metrics state hereSample solution
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>Dashboard</Text>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is at the heart of this project?
function App() { /* ... */ }- An animation
- An image
- The metrics state Correct answer
- A game score
Explanation: The metrics state is the heart of the project.
2 useState call
const [metrics, setMetrics] = ____({});const [metrics, setMetrics] = useState({});Explanation: useState initializes the metrics state.
3 Match each piece to its role
| Term | Meaning |
|---|---|
metrics |
Dashboard data |
setMetrics |
State updater |
App |
Root component |
Text |
Shows title |