React Native
Project design
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.
Exercise Set up the App skeleton
Write an App component. Hold a metrics state with useState({}). The component returns <Text>Dashboard</Text>.
Show example solution
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>Dashboard</Text>
</View>
);
}
Test yourself
-
What is at the heart of this project?
function App() { /* ... */ }
- An animation
- An image
- The metrics state
- A game score
Show answer
The metrics state — The metrics state is the heart of the project.
-
useState call
const [metrics, setMetrics] = ____({});
Show answer
const [metrics, setMetrics] = useState({});
-
Match each piece to its role
- metrics
- Dashboard data
- setMetrics
- State updater
- App
- Root component
- Text
- Shows title
Next lesson: New architecture
