From React to SwiftUI

• Property Wrappers vs React Hooks
  • @State vs useState

Stacks

• HStack vs VStack vs ZStack

Design Systems

• colors assets vs theme-ui vs css vars, etc

Color("primary")

• Spacer components vs margins/css box model

Components

• Component modifiers (like padding)

HStack {
  ...
}
.padding(20)

• CMD+Click => "Extract subview"
• props on custom components that are required/have default values/etc

struct MyComponent: View {
    // a required prop named title
    var title: String
}

Frames (vs CSS box model/overflow/etc)

.frame(width: 200, height: 100, alignment: .top)

React Hot-loader/fast-refresh/Blocks/etc

xcode continuously recompiles, so when you make changes it just works.

• XCode Previews
• Command+Click on code shows edit menus
• Cmd+Shift+l to insert new components

Animation

• framer motion/react-spring/etc vs swiftui animations

• Attaching event handlers

State management

@State var x = 0
@Binding var showThing = Bool

• App state
• view state
• app settings state

Icons

• SFSymbols app
• vs using react-icons, etc

HStack(spacing: 10) {
    Image(systemName: "gear")
        .font(.system(size: 16, weight: .bold, design: .default))
        .frame(width: 16, height: 16)
    Text("Some Label")
        .font(.system(size: 16, weight: .bold, design: .default))
}

Previews

• Identifiable type
• PreviewProvider

Misc

• .backgrounds in SwiftUI are Views. Color.white, LinearGradient, any View.
• frames are kinda like divs
• indent a section of code with C-i
• How to add a font to an XCode project

ViewModifier

Definition:

struct FontModified: ViewModifier {
  func body(content: Content) -> some View {
    content
        .font(.system(.body, design: .rounded))
  }
}

Usage

Text("Some thing here").modifier(FontModifier())