3bk-dev

Dioxus: A Fullstack App Framework for All Platforms 🌐🚀

Table of Contents

• Overview
• Features
• Installation
• Getting Started
• Core Concepts
• Topics
• Examples
• Contributing
• License
• Contact

Overview

Dioxus is a versatile fullstack app framework designed for web, desktop, and mobile applications. It enables developers to create rich user interfaces with ease. Built with Rust, Dioxus leverages the power of modern technologies like React, Virtual DOM, and WebAssembly (Wasm) to deliver high-performance applications.

Whether you are targeting Android, iOS, or desktop environments, Dioxus provides a unified experience that simplifies the development process.

For the latest releases, visit Dioxus Releases.

Features

• Cross-Platform Support: Build applications for web, desktop, and mobile using a single codebase.
• High Performance: Leverage Rust’s speed and safety for efficient applications.
• React-like Syntax: Enjoy a familiar development experience with a component-based architecture.
• Server-Side Rendering (SSR): Enhance performance and SEO with SSR capabilities.
• Rich UI Components: Access a library of pre-built components to accelerate development.
• Virtual DOM: Optimize rendering and improve application responsiveness.
• WebAssembly (Wasm) Integration: Utilize Wasm for performance-critical tasks.

Installation

To get started with Dioxus, follow these steps:

1. Ensure you have Rust installed. If not, download it from rustup.rs.

2. Clone the repository:

   git clone https://github.com/3bk-dev/dioxus.git
   cd dioxus
   

3. Install the dependencies:

   cargo build
   

4. Run the application:

   cargo run
   

For more detailed installation instructions, refer to the Releases section.

Getting Started

Once you have installed Dioxus, you can start building your application. Here’s a simple example to create a basic application:

use dioxus::prelude::*;

fn main() {
    dioxus::desktop::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            h1 { "Welcome to Dioxus!" }
            p { "This is your first Dioxus application." }
        }
    })
}

Running the Example

1. Create a new file named main.rs in the src directory.
2. Copy the example code into main.rs.
3. Run the application again using cargo run.

Core Concepts

Components

Dioxus uses components to build user interfaces. Each component can manage its own state and lifecycle. You can create functional components using the fn keyword.

Props

Props are used to pass data to components. They are similar to function arguments and allow for dynamic rendering based on the input data.

State Management

Dioxus provides a simple way to manage state within components. You can use hooks like use_state to create and manage state.

Routing

Dioxus supports routing for navigation within your application. You can define routes and link between different components seamlessly.

Topics

Dioxus covers a range of topics to enhance your development experience:

• Android: Build native Android applications.
• CSS: Style your applications with ease.
• Desktop: Create desktop applications with a rich user interface.
• HTML: Utilize standard HTML for structure.
• iOS: Develop native iOS applications.
• Native: Leverage native capabilities for performance.
• React: Familiar component-based architecture.
• Rust: Benefit from Rust’s performance and safety.
• SSR: Improve loading times and SEO.
• UI: Access a variety of UI components.
• Virtual DOM: Optimize rendering performance.
• Wasm: Use WebAssembly for high-performance tasks.
• Web: Target web applications with ease.

Examples

Explore various examples to understand how to use Dioxus effectively. Here are a few common use cases:

Creating a Simple Counter

use dioxus::prelude::*;

fn main() {
    dioxus::desktop::launch(app);
}

fn app(cx: Scope) -> Element {
    let count = use_state(cx, || 0);

    cx.render(rsx! {
        div {
            h1 { "Counter: {count}" }
            button { onclick: move |_| count.set(*count + 1), "Increment" }
        }
    })
}

Fetching Data from an API

use dioxus::prelude::*;
use reqwest;

fn main() {
    dioxus::desktop::launch(app);
}

async fn fetch_data() -> String {
    let response = reqwest::get("https://api.example.com/data").await.unwrap();
    response.text().await.unwrap()
}

fn app(cx: Scope) -> Element {
    let data = use_state(cx, || String::new());

    use_effect(cx, (), {
        let data = data.clone();
        async move {
            let result = fetch_data().await;
            data.set(result);
        }
    });

    cx.render(rsx! {
        div {
            h1 { "Fetched Data" }
            p { "{data}" }
        }
    })
}

Contributing

We welcome contributions to Dioxus! If you want to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your changes to your fork.
5. Create a pull request to the main repository.

For more detailed guidelines, please refer to the CONTRIBUTING.md.

License

Dioxus is licensed under the MIT License. See the LICENSE file for more details.

Contact

For questions or feedback, reach out to us through the GitHub issues or contact us directly via email at support@dioxus.dev.

For the latest updates and releases, check out Dioxus Releases.