1. Composable Functions

These are the building blocks of your UI. They're regular Kotlin functions with @Composable annotation.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

What makes them special:

• They describe UI, not create it
• They can call other composable functions
• They're super fast because Compose only redraws what changed

2. Recomposition

This is Compose's "magic" - automatically updating the UI.

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Count: $count")  // This updates automatically!
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

When count changes:

• Compose reruns only the parts that depend on count
• The Text showing count gets updated
• The Button doesn't rerun (it doesn't use count)

3. State

State is data that can change over time. When state changes, UI recomposes.

// Without state - UI never changes
@Composable
fun StaticText() {
    val message = "Hello"
    Text(message)  // Always shows "Hello"
}

// With state - UI updates when state changes
@Composable
fun DynamicText() {
    var message by remember { mutableStateOf("Hello") }
    Column {
        Text(message)  // Updates when message changes
        Button(onClick = { message = "Clicked!" }) {
            Text("Change")
        }
    }
}

remember: Keeps the state alive across recompositions (otherwise it resets every time)

4. Modifiers

Modifiers let you decorate or customize composables - like adding CSS to HTML.

@Composable
fun StyledButton() {
    Button(
        onClick = { /* do something */ },
        modifier = Modifier
            .fillMaxWidth()           // Take full width
            .padding(16.dp)           // Add spacing
            .background(Color.Blue)   // Background color
            .clip(RoundedCornerShape(8.dp))  // Rounded corners
    ) {
        Text("Click Me")
    }
}

Modifiers chain together - order matters!

5. Layouts

Compose has simple layouts to arrange your UI:

Column - Stack items vertically (top to bottom)

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row - Place items horizontally (left to right)

Row {
    Text("A")
    Text("B")
    Text("C")
}

Box - Stack items on top of each other

Box {
    Image(...)           // Background
    Text("On top")       // On top of image
}