SwiftUI Basics

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand SwiftUI Basics, without any of the intimidation
Get hands-on running Xcode/SwiftUI code yourself
Apply this concept immediately in a real project

Let's think about this for a moment

iOS UI used to be written with UIKit (imperative — 'update this view like this') or with Storyboard (visual drag-and-drop). SwiftUI, on the other hand, is a declarative UI framework — you write Swift code directly inside a struct conforming to the `View` protocol to describe 'what the UI should look like,' and whenever the data changes, SwiftUI automatically re-renders the UI — this maps closely to Android's Jetpack Compose concept (if you've read this site's Android tutorial, it'll feel immediately familiar).

Let's connect this to a real-world scenario

If you write `struct Greeting: View { let name: String; var body: some View { Text("Hello, \(name)!") } }`, calling `Greeting(name: "Aye Aye")` displays the text 'Hello, Aye Aye!' on screen. Add Xcode's `#Preview` macro and you can view the UI instantly without needing to run the Simulator.

SwiftUI = Apple's modern declarative UI framework (no UIKit-style imperative code needed)
View protocol = a struct that describes a UI component
When data changes, SwiftUI automatically re-renders the UI

Let's look at it together

swift

import SwiftUI

struct Greeting: View {
    let name: String

    var body: some View {
        Text("Hello, \(name)!")
    }
}

#Preview {
    Greeting(name: "Aye Aye")
}

You should see

You should immediately see the text 'Hello, Aye Aye!' in the Xcode Preview panel, without needing to run the Simulator.

Try it in 5 minutes

Write your own `Greeting` View and check it in the `#Preview` panel — try changing the name parameter and confirm that the preview auto-updates.

A quick word of caution

`#Preview` is meant for a quick look at your UI layout — interactive behavior like button taps and navigation can only really be tested on the Simulator (or a physical device).

Easy traps

Leaving out `var body: some View { ... }` — this fails to fulfill the View protocol's requirement, so you'll get a compile error
Trying to write a SwiftUI View in the old UIKit-era imperative style (manually updating a view reference) — you should follow SwiftUI's declarative pattern instead

Now try it yourself

Write your own `Greeting` View and check it in the `#Preview` panel — try changing the name parameter and confirm that the preview auto-updates.

You'll know it worked when: You should immediately see the text 'Hello, Aye Aye!' in the Xcode Preview panel, without needing to run the Simulator.