Componentes

Assim como você não gostaria de escrever um programa complexo em uma única e longa função main, você não deve construir uma interface complexa em uma única função App. Em vez disso, seria melhor dividir a funcionalidade de um aplicativo em partes lógicas chamadas componentes.

Um componente é uma função Rust, nomeada em UpperCammelCase, que recebe um parâmetro Scope e retorna um Element descrevendo a interface do usuário que deseja renderizar. Na verdade, nossa função App é um componente!

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

Você provavelmente desejará adicionar #![allow(non_snake_case)] no topo de sua caixa para evitar avisos sobre o nome da função

Um Componente é responsável por alguma tarefa de renderização – normalmente, renderizando uma parte isolada da interface do usuário. Por exemplo, você pode ter um componente About que renderiza uma breve descrição do Dioxus Labs:

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

Em seguida, você pode renderizar seu componente em outro componente, da mesma forma que os elementos são renderizados:

#![allow(unused)]
fn main() {
fn App(cx: Scope) -> Element {
    cx.render(rsx! {
        About {},
        About {},
    })
}
}

Neste ponto, pode parecer que os componentes nada mais são do que funções. No entanto, à medida que você aprende mais sobre os recursos do Dioxus, verá que eles são realmente mais poderosos!