Web

Crie aplicativos de página única (SPA) que são executados no navegador com o Dioxus. Para rodar na Web, seu aplicativo deve ser compilado para WebAssembly e utilizar a crate dioxus com o recurso web ativado.

Uma compilação do Dioxus para a web será aproximadamente equivalente ao tamanho de uma compilação do React (70kb vs 65kb), mas carregará significativamente mais rápido devido ao StreamingCompile do WebAssembly.

Exemplos:

[Exemplo de TodoMVC](https://github.com/DioxusLabs/example-projects/blob/master /todomvc)

Nota: Devido às limitações do Wasm, nem todos as crates funcionarão com seus aplicativos da web, portanto, você precisará certificar-se de que suas crates funcionem sem chamadas de sistema nativas (temporizadores, IO, etc.).

Suporte

A Web é a plataforma de destino com melhor suporte para Dioxus.

Ferramentas

Para desenvolver seu aplicativo Dioxus para a web, você precisará de uma ferramenta para construir e servir seus itens. Recomendamos usar trunk que inclui um sistema de compilação, otimização Wasm, um servidor dev e suporte para SASS/CSS:

cargo install trunk

Certifique-se de que o destino wasm32-unknown-unknown esteja instalado:

rustup target add wasm32-unknown-unknown

Criando um Projeto

Crie uma nova caixa:

cargo new --bin demo
cd demo

Adicione o Dioxus como uma dependência com o recurso web:

cargo add dioxus
cargo add dioxus-web

Adicione um index.html para o Trunk usar. Certifique-se de que seu elemento "mount point" tenha um ID de "main":

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

Edite seu main.rs:

#![allow(non_snake_case)]
// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
use dioxus::prelude::*;

fn main() {
    // launch the web app
    dioxus_web::launch(App);
}

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

E para servir nosso aplicativo:

trunk serve