How to import a component in Yew?

In the Yew framework, using components involves two main steps: first, defining the component in Rust code, and then incorporating it into your parent or main component. Below is a detailed step-by-step guide with examples:

Step 1: Create the Component

Suppose we have a simple component named MyComponent. We define it in a Rust file, for example, my_component.rs.

rust
// src/components/my_component.rs

use yew::prelude::*;

pub struct MyComponent;

impl Component for MyComponent {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <div>
                {"This is my component!"}
            </div>
        }
    }
}

Step 2: Import and Use the Component

Next, import and use MyComponent within your parent component. For instance, the parent component is defined in app.rs.

rust
// src/app.rs

use yew::prelude::*;
use crate::components::my_component::MyComponent; // Ensure the path is correct

pub struct App;

impl Component for App {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <div>
                <h1>{"Welcome to the main application"}</h1>
                <MyComponent /> // Use MyComponent here
            </div>
        }
    }
}

Explanation

1. Component Definition: Every component must implement the Component trait, which includes defining the create and view functions.
2. Using Components: Within the view function, you can use Rust components just like HTML tags.
3. Module Structure: Be aware that Rust's module system (file paths and declarations in mod.rs or lib.rs) is essential for correctly importing components.

By following these steps, you can integrate multiple components flexibly into your Yew application, resulting in a more modular and maintainable project structure.