Blog: Compose for React devs

[pavi2410]

What is Jetpack Compose?

Jetpack Compose is a brand-new declarative UI framework for Android development.

Declarative UIs everywhere

The advent of declarative UI has changed how we design UI for apps and websites. It has made it a lot easier for anyone to develop a beautiful, responsive UI without any specialized tools.

Components

@Composable
fun Counter() {
  val counter by remember { mutableStateOf(0) }

  Column {
    Text("count is $count")

    Button(onClick = { counter++ }) {
      Text("+1")
    }
  }
}

In Jetpack Compose, we create a component using the @Composable annotation. To see a preview of the component right in the IDE, we just need to add a @Preview annotation to any 0-arg @Composable functions. In Contrast to React, a @Composable function doesn't have to return the component. You just call the function in a structured manner.

Let's convert the above code to React:

function Counter() {
  const [counter, setCounter] = useState(0)

  return (
    <Column>
      <Text>"count is $count"</Text>
      <Button onClick={ () => setCounter(counter++) }>
        +1
      </Button>
    </Column>
  )
}

Notice the similarity? It's almost identical, except the language and the library differences! This is where the power of declarative UIs come into play. The knowledge is transferable to any platform, and very intuitive to learn and replicate.

Hooks

[pavi2410]

• https://www.freecodecamp.org/news/react-beginner-handbook/
• https://developer.android.com/jetpack/compose
• https://www.jetbrains.com/lp/compose-mpp/

[pavi2410]

Todo

• [ ] Knowledge transfer
• [ ] Ecosystem
• [ ] Why Compose? (It's native, doesn't "return" elements)