Your First Component

Before You Start

Make sure you have the project set up as per Project Setup.

Putting Something on the Screen

Let's put an <input> on the screen!

	// src/lib.rs

    use async_ui_web::html::Input; // 👈 import the Input component

    // 👇 this should be the same `app` function in `src/lib.rs` from the project setup
    async fn app() {
        let my_input = Input::new();
        my_input.render().await;
    }

Now run the application again (wasm-pack build --dev --target web && microserver, as described in the Project Setup), you should see an empty input field.

Extracting it into a Component

Let's extract that single input field into a component. We'll make the simplest form of component possible: an async function.

	// src/lib.rs

    // 👇 This is your first component 💯
    async fn my_input_field() {
        let my_input = Input::new();
        my_input.render().await;
    }

    async fn app() {
        my_input_field().await; // 👈 use the component you made
    }