UTA DevHub
Guides

Getting Started with UTA

Complete setup guide for the UTA ecosystem - from installation to building your first feature in 30 minutes.

Getting Started with UTA

Overview

This comprehensive guide will take you from zero to shipping your first UTA-powered React Native app in 30 minutes. You'll set up the complete ecosystem, understand the architecture, and build your first feature following UTA patterns.

⏱️ Time to First Feature: ~30 minutes

By the end of this guide, you'll have:

  • A working UTA project with standardized architecture
  • Your first feature implemented using UTA patterns
  • Understanding of the three-layer architecture
  • Ready-to-extend codebase for your specific needs

Prerequisites

Before starting, ensure you have:

  • Node.js 18+ and npm/yarn installed
  • React Native development environment set up (React Native CLI setup)
  • Basic knowledge of React Native and TypeScript
  • iOS Simulator or Android Emulator running

First time with React Native? Complete the React Native Environment Setup first, then return to this guide.

Quick Start

Create Your UTA Project

Clone and set up the UTA template:

# Clone the UTA template
git clone https://github.com/your-org/react-native-uta.git MyUTAApp
cd MyUTAApp
 
# Install dependencies
npm install
 
# iOS setup (if on macOS)
cd ios && pod install && cd ..

Launch Your App

Start the development server and run your app:

# Start Metro bundler
npm start
 
# In a new terminal, run iOS
npm run ios

You should see the UTA welcome screen with example features.

Explore the Project Structure

Familiarize yourself with the UTA architecture:

src/
├── core/                    # Core systems (non-UI)
│   ├── auth/               # Authentication logic
│   ├── api/                # API clients and types
│   ├── state/              # Global state management
│   └── shared/             # Shared utilities
├── features/               # Feature modules
│   ├── auth/              # Authentication feature
│   ├── profile/           # User profile feature
│   └── dashboard/         # Dashboard feature
├── ui/                     # UI components (no business logic)
│   ├── foundation/        # Basic UI building blocks
│   ├── components/        # Complex UI components
│   └── patterns/          # Reusable UI patterns
└── navigation/            # Navigation configuration

UTA Philosophy: Every file has a clear purpose and location. No more "where should this go?" decisions!

Understand the Three-Layer Architecture

UTA uses a standardized three-layer architecture:

  1. Core Layer (/src/core/) - Business logic, state, API clients
  2. Features Layer (/src/features/) - Feature-specific implementations
  3. UI Layer (/src/ui/) - Reusable UI components

For detailed explanation, see the UI Architecture Overview.

Build Your First Feature

Now let's build a "Settings" feature to demonstrate UTA patterns:

Create the Feature Structure

Following UTA conventions, create your feature module:

# Create feature directory structure
mkdir -p src/features/settings/{components,screens,hooks}
src/features/settings/
├── components/           # Feature-specific components
├── screens/             # Screen components for navigation
├── hooks/               # Feature-specific hooks
└── index.ts            # Public API exports

Create a Settings Screen

Create your first screen using UTA patterns:

// src/features/settings/screens/SettingsScreen.tsx
import React from 'react';
import { ScrollView } from 'react-native';
import { ScreenContainer } from '@/ui/foundation/ScreenContainer';
import { Header } from '@/ui/components/Header';
import { SettingsList } from '../components/SettingsList';
 
export function SettingsScreen() {
  return (
    <ScreenContainer>
      <Header title="Settings" showBackButton />
      <ScrollView>
        <SettingsList />
      </ScrollView>
    </ScreenContainer>
  );
}

Create Feature Components

Build feature-specific components:

// src/features/settings/components/SettingsList.tsx
import React from 'react';
import { View } from 'react-native';
import { List } from '@/ui/components/List';
import { useSettingsData } from '../hooks/useSettingsData';
 
export function SettingsList() {
  const { settings, updateSetting } = useSettingsData();
 
  return (
    <View>
      <List
        data={settings}
        renderItem={({ item }) => (
          <List.Item
            title={item.title}
            subtitle={item.subtitle}
            trailing={item.component}
            onPress={() => updateSetting(item.key)}
          />
        )}
      />
    </View>
  );
}

Add Navigation

Register your screen in the navigation system:

// src/navigation/AppNavigator.tsx
import { SettingsScreen } from '@/features/settings/screens/SettingsScreen';
 
// Add to your navigator
<Stack.Screen 
  name="Settings" 
  component={SettingsScreen}
  options={{ title: 'Settings' }}
/>

Test Your Feature

Run your app and navigate to the Settings screen:

# Reload your app
npm start
 
# Navigate to Settings in your app
# You should see your new feature working!

Next Steps

Congratulations! 🎉 You've successfully set up UTA and built your first feature. Here's what to explore next:

UI Development

Learn to build components following UTA's three-layer architecture

State Management

Master Zustand patterns for client and server state

Authentication

Implement secure user authentication flows

API Integration

Connect to APIs using React Query patterns

Common First Steps

Adding a New Feature

Follow the Feature Implementation Decision Tree to determine the best approach for your specific feature.

Team Collaboration

Review the Team Onboarding Checklist to ensure all team members can contribute effectively.

Code Quality

Set up Code Review Templates to maintain UTA standards across your team.

Need Help?

Getting Stuck? Check the Common Pitfalls & Solutions guide for answers to frequently encountered issues.

Resources

Welcome to the UTA ecosystem! You're now ready to build React Native apps the standardized way. 🚀

Implementation Guides

Step-by-step instructions and practical tutorials for building React Native applications with UTA patterns and best practices.

Team Onboarding Checklist

Step-by-step onboarding process to ensure every team member writes consistent code

On this page