Lesson 7 of 8

Your First SwiftUI App

Build a simple counter app with SwiftUI. You describe screens as structs, and SwiftUI updates them when @State values change.

Swift

// In Xcode: File -> New -> Project -> iOS App (SwiftUI)
import SwiftUI

struct ContentView: View {
    // @State: when this changes, the view re-renders.
    @State private var count = 0

    var body: some View {
        VStack(spacing: 16) {
            Text("Count: \(count)")
                .font(.largeTitle)
                .bold()

            Button("Tap me") {
                count += 1
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

body describes what the screen looks like for the current state — you never manually update views. Change count, and SwiftUI diffs and redraws. VStack vertically, HStack horizontally, and modifiers like .font() chain to style anything.

Swift

// Lists and navigation — the skeleton of most iOS apps:
struct Student: Identifiable {
    let id = UUID()
    let name: String
    let grade: Int
}

struct StudentListView: View {
    let students = [
        Student(name: "Ada", grade: 95),
        Student(name: "Alan", grade: 88),
        Student(name: "Grace", grade: 92),
    ]

    var body: some View {
        NavigationStack {
            List(students) { student in
                NavigationLink(student.name) {
                    VStack {
                        Text(student.name).font(.title)
                        Text("Grade: \(student.grade)%")
                            .foregroundStyle(.secondary)
                    }
                }
            }
            .navigationTitle("Students")
        }
    }
}

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.