Getting Started
I encourage you to first learn about Dioxus, when you are done you can continue here. Also make sure you have the followed the Setup guide.
Now, let's start by creating a hello world project.
Creating the project
mkdir freya-app
cd freya-app
cargo init
Cargo.toml
Make sure to add Freya and Dioxus as dependencies:
[package]
name = "freya-app"
version = "0.1.0"
edition = "2021"
[dependencies]
freya = "0.2"
dioxus = { version = "0.5", features = ["macro", "hooks"], default-features = false }
src/main.rs
In Freya, you run your app by calling a launch
method and passing it your root Component:
#![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] use freya::prelude::*; fn main() { launch(app); // This will block the main thread }
Let's define our root component, called app
:
#![allow(unused)] fn main() { fn app() -> Element { rsx!( label { "Hello, World!" } ) } }
Components in Freya/Dioxus are simply functions that return an Element
and might receive some properties as arguments.
Let's make it stateful by using Dioxus Signals:
#![allow(unused)] fn main() { fn app() -> Element { // `use_signal` takes a callback that initializes the state let mut state = use_signal(|| 0); // Because signals are copy, we can move them into closures let onclick = move |_| { // Signals provide some shortcuts for certain types state += 1; // But we could do as well *state.write() += 1; }; // You can subscribe to a signal, by calling it (`signal()`), // calling the `signal.read()` method, or just embedding it into the RSX. // Everytime the signal is mutated the component function will rerun // because it has been subscribed, and thus producing a // new Element with the updated counter. println!("{}", state()); rsx!( label { onclick, "State is {state}" } ) } }
Running
Simply run with cargo
:
cargo run
Nice! You have created your first Freya app.
You can learn more with the examples in the repository.