Skip to main content

Tutorial 3. Data and State

Add an API client​

Create services/api/ and keep all HTTP work there.

export async function fetchGuides(): Promise<Guide[]> {
  const response = await fetch(`${BASE_URL}/guides`);
  if (!response.ok) {
    throw new Error('Failed to load guides');
  }
  return response.json();
}

Separate state classes​

  • local UI state: modal visibility, selected filters
  • server state: guides list and detail data
  • app-wide state: signed-in user summary
  • persisted state: theme preference or onboarding completion

Build the first real screen​

The guide list screen should include:

  • loading state
  • error state
  • empty state
  • list rendering with stable keys
  • navigation into detail

Continue to Native Capabilities and Observability.