Building a Simple Counter Application with Yew.rs 🦀
Empowering Rust: From Command Line to Web Frontend with Yew.rs
Introduction
Rust, known for its robustness in system programming, is making waves in the world of web development through frameworks like Yew.rs. In this tutorial, we’ll walk through building a basic counter application using Yew.rs, showcasing how Rust can be leveraged for frontend development.
Prerequisites
Ensure you have Rust and Cargo installed on your system.
Creating the Project
Let’s start by setting up our project. Open your terminal and create a new Cargo project:
cargo new yew-app
cd yew-app
Updating Cargo.toml:
Add Yew to the list of dependencies in your Cargo.toml
:
[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
Step by Step Explanation
1. Imports
use yew::prelude::*;
We import the necessary modules from Yew.rs to build our application.
2. Component Definition
#[function_component]
fn App() -> Html {
The App
function defines our main component using the #[function_component]
macro. It returns HTML (Html
) and represents the root of our application.
3. State Management
let counter = use_state(|| 0);
We use the use_state
hook to create a state variable counter
initialized to 0. This hook returns a tuple containing the state variable and a function to update it
4. Event Handlers
let increment = {
let counter = counter.clone();
move |_| {
let value = *counter + 1;
counter.set(value);
}
};
let decrement = {
let counter = counter.clone();
move |_| {
let value = *counter - 1;
counter.set(value);
}
};
Two event handler functions, increment
and decrement
, are defined to handle the logic for increasing and decreasing the counter value, respectively. These functions are closures that capture the counter
state variable and update it accordingly.
5. HTML Structure
html! {
<div style="text-align: center; margin-top: 50px;">
<button style="padding: 10px 20px; font-size: 18px; margin-right: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px;" onclick={increment}>{ "+1" }</button>
<button style="padding: 10px 20px; font-size: 18px; background-color: #f44336; color: white; border: none; border-radius: 5px;" onclick={decrement}>{ "-1" }</button>
<p style="font-size: 24px; margin-top: 20px;">{ *counter }</p>
</div>
}
Inside the html!
macro, we define the structure of our UI. It consists of two buttons for incrementing and decrementing the counter, along with a paragraph to display the current counter value. Event handlers are attached to the buttons using the onclick
attribute.
6. Rendering
fn main() {
yew::Renderer::<App>::new().render();
}
In the main
function, we create a new instance of the Renderer
for our App
component and call the render
method to render the component on the web page.
7. Final Code with Explanation
use yew::prelude::*;
#[function_component]
fn App() -> Html {
let counter = use_state(|| 0);
let increment = {
let counter = counter.clone();
move |_| {
let value = *counter + 1;
counter.set(value);
}
};
let decrement = {
let counter = counter.clone();
move |_| {
let value = *counter - 1;
counter.set(value);
}
};
html! {
<div style="text-align: center; margin-top: 50px;">
<button style="padding: 10px 20px; font-size: 18px; margin-right: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px;" onclick={increment}>{ "+1" }</button>
<button style="padding: 10px 20px; font-size: 18px; background-color: #f44336; color: white; border: none; border-radius: 5px;" onclick={decrement}>{ "-1" }</button>
<p style="font-size: 24px; margin-top: 20px;">{ *counter }</p>
</div>
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
This code creates a simple counter application using Yew.rs, demonstrating how Rust can be utilized for frontend web development. It showcases the power of Rust’s expressive syntax and strong type system in building robust web applications.
Viewing Your Web Application
trunk serve --open
This command will open your default browser to view the application. Trunk will automatically rebuild your application if you modify any source code files.
Conclusion
Congratulations! You've successfully set up your Yew development environment and built your first web application using Rust. Dive deeper into Yew's capabilities and explore more examples to enhance your understanding and skills in Rust-based frontend development.