SwSwift · Lesson 7 of 8

Your First SwiftUI App

SwiftUI describes screens as structs, updates them automatically when @State changes, and previews live in Xcode as you type. A complete counter app fits on one screen.

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 stacks 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")
        }
    }
}

✦ Tip
Press ⌘R to run in the iOS Simulator — no iPhone needed. Apple's free 'Develop in Swift' tutorials and Hacking with Swift's 100 Days of SwiftUI are the two best next steps.