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:
[](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 suascrates
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