Components

Just like you wouldn't want to write a complex program in a single, long, main function, you shouldn't build a complex UI in a single App function. Instead, you should break down the functionality of an app in logical parts called components.

A component is a Rust function, named in UpperCamelCase, that takes a Scope parameter and returns an Element describing the UI it wants to render. In fact, our App function is a component!

// define a component that renders a div with the text "Hello, world!"
fn App(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            "Hello, world!"
        }
    })
}

You'll probably want to add #![allow(non_snake_case)] to the top of your crate to avoid warnings about UpperCamelCase component names

A Component is responsible for some rendering task – typically, rendering an isolated part of the user interface. For example, you could have an About component that renders a short description of Dioxus Labs:

pub fn About(cx: Scope) -> Element {
    cx.render(rsx!(p {
        b {"Dioxus Labs"}
        " An Open Source project dedicated to making Rust UI wonderful."
    }))
}

Then, you can render your component in another component, similarly to how elements are rendered:

fn App(cx: Scope) -> Element {
    cx.render(rsx! {
        About {},
        About {},
    })
}

At this point, it might seem like components are nothing more than functions. However, as you learn more about the features of Dioxus, you'll see that they are actually more powerful!