70 %

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
swift
Color("primary")
  • Spacer components vs margins/css box model

Components

  • Component modifiers (like padding)
swift
HStack {
...
}
.padding(20)
  • CMD+Click => "Extract subview"
  • props on custom components that are required/have default values/etc
swift
struct MyComponent: View {
// a required prop named title
var title: String
}

Frames (vs CSS box model/overflow/etc)

swift
.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

swift
@State var x = 0
@Binding var showThing = Bool
  • App state
  • view state
  • app settings state

Icons

swift
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:

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

Usage

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