Sycamore Component with Conditional and Loop Combined - Sycamore-rust Typing CST Test
Loading…
Sycamore Component with Conditional and Loop Combined — Sycamore-rust Code
Displays different lists based on a toggle signal.
# sycamore/demo/conditional_loop.rs
use sycamore::prelude::*;
fn app<G: Html>() -> View<G> {
let show_first = create_signal(true);
let list1 = vec!["A", "B", "C"];
let list2 = vec!["X", "Y", "Z"];
view! {
div {
button(on:click=move |_| show_first.set(!*show_first.get())) {"Toggle"}
(if *show_first.get() {
view! { Keyed(list1, |i| i.clone(), |i| view! { p { (i) } }) }
} else {
view! { Keyed(list2, |i| i.clone(), |i| view! { p { (i) } }) }
})
}
}
}
fn main() {
sycamore::render(app);
}Sycamore-rust Language Guide
Sycamore is a reactive, component-based web framework for Rust that allows developers to build fast, type-safe web applications with a declarative approach similar to React or Solid.js.
Primary Use Cases
- ▸Single-page applications (SPAs) with Rust
- ▸Web apps requiring fine-grained reactivity and state management
- ▸Performance-critical front-end applications
- ▸Porting Rust logic directly to the client via WebAssembly
- ▸Replacing JS frameworks in Rust-centric full-stack projects
Notable Features
- ▸Fine-grained reactive state system
- ▸Component-based architecture with declarative syntax
- ▸Integration with Rust’s type system and borrow checker
- ▸Efficient updates with virtual DOM diffing
- ▸Support for server-side rendering (SSR) and hydration
Origin & Creator
Sycamore was created by Austin Donnelly and contributors, inspired by modern reactive JavaScript frameworks but designed for Rust and WebAssembly.
Industrial Note
Sycamore is ideal for Rust developers who want high-performance, type-safe web apps without leaving the Rust ecosystem, and for projects where predictable memory management and performance are critical.
More Sycamore-rust Typing Exercises
Simple Sycamore ComponentSycamore Component with Button ClickSycamore Component with Input BindingSycamore Component with Conditional RenderingSycamore Component with LoopSycamore Component with Nested ComponentsSycamore Component with TimerSycamore Component with FormSycamore Component with Child Props