🌗🚀 Dioxus
A concurrent, functional, virtual DOM for Rust
> This crate implements dioxus-lib which is a renderer-free version of Dioxus. This crate is intended to be used by library authors who need a stable core verison of dioxus withuot pulling in renderer-related dependencies on accident.
# Resources
This overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:
- [Getting Started](https://dioxuslabs.com/learn/0.5/getting_started)
- [Book (0.5)](https://dioxuslabs.com/learn/0.5)
- [Examples](https://github.com/DioxusLabs/example-projects)
# Overview and Goals
Dioxus makes it easy to quickly build complex user interfaces with Rust. Any Dioxus app can run in the web browser,
as a desktop app, as a mobile app, or anywhere else provided you build the right renderer.
Dioxus is heavily inspired by React, supporting many of the same concepts:
- Hooks for state
- VirtualDom & diffing
- Concurrency, fibers, and asynchronous rendering
- JSX-like templating syntax
If you know React, then you know Dioxus.
Dioxus is _substantially_ more performant than many of the other Rust UI libraries (Yew/Percy) and is _significantly_ more performant
than React—roughly competitive with InfernoJS.
Remember: Dioxus is a library for declaring interactive user interfaces—it is not a dedicated renderer. Most 1st party renderers for Dioxus currently only support web technologies.
## Brief Overview
All Dioxus apps are built by composing functions that return an `Element`.
To launch an app, we use the `launch` method and use features in ``Cargo.toml`` to specify which renderer we want to use. In the launch function, we pass the app's root `Component`.
```rust
use dioxus::prelude::*;
fn main() {
launch(App);
}
// The #[component] attribute streamlines component creation.
// It's not required, but highly recommended. For example, UpperCamelCase components will not generate a warning.
#[component]
fn App() -> Element {
rsx! { "hello world!" }
}
```
## Elements & your first component
To assemble UI trees with Dioxus, you need to use the `render` function on
something called `LazyNodes`. To produce `LazyNodes`, you can use the `rsx!`
macro or the NodeFactory API. For the most part, you want to use the `rsx!`
macro.
Any element in `rsx!` can have attributes, listeners, and children. For
consistency, we force all attributes and listeners to be listed _before_
children.
```rust, ignore
let value = "123";
rsx! {
div {
class: "my-class {value}", // <--- attribute
onclick: move |_| info!("clicked!"), // <--- listener
h1 { "hello world" }, // <--- child
}
}
```
The `rsx!` macro accepts attributes in "struct form". Any rust expression contained within curly braces that implements `IntoIterator