React Native
Project design
Design the skeleton of the intermediate final mini app.
Project: Tasks app
In this project you will build a Tasks app. We will go step by step over five lessons; each lesson adds a piece on top of the previous solution. The result: state sharing with Context, reusable logic with hooks, data loading with an API and a multi screen structure with navigation.
The first lesson sets up the skeleton: an App component, a tasks state and a title text. Then we will open this state to all components with Context. We will load tasks from an API. We will add two screens with tab navigation. Finally we will integrate all parts with a loading state. This is a final that brings your intermediate React Native knowledge together.
A five lesson roadmap
Our roadmap has five lessons. First lesson: skeleton — App, tasks state, title. Second lesson: Context — TasksContext and the useTasks hook. Third lesson: API — fetch with useEffect. Fourth lesson: navigation — two screens with Tab.Navigator. Fifth lesson: integration — loading state.
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 tasks state with useState([]). The component returns <Text>Tasks</Text>.
Show example solution
import { useState } from "react";
import { Text } from "react-native";
function App() {
const [tasks, setTasks] = useState([]);
return <Text>Tasks</Text>;
}
Test yourself
-
What is at the heart of this project?
function App() { /* ... */ }
- A game
- An image
- An animation
- The tasks context
Show answer
The tasks context — The tasks context is the heart of the project.
-
useState call
const [tasks, setTasks] = ____([]);
Show answer
const [tasks, setTasks] = useState([]);
-
Match each piece to its role
- tasks
- Tasks array
- setTasks
- State updater
- App
- Root component
- Text
- Shows title
Next lesson: Context and hooks
