progressing

versioned_docs/version-0.0.7/references/rsx.md

@@ -0,0 +1,82 @@
+---
+title: RSX
+---
+
+This macro is the recommended way to describe a ui, it is a div that holds multiple elements
+```rust
+fn app() -> Element {
+    rsx! {
+        button { "click me" }
+        text { "This is some text" }
+    }
+}
+```
+
+> :::info `rsx!` is really just a div, so you can just do something like
+> ```rust
+> rsx! {
+>     id: "root", class: "root",
+>
+>     button { "click me" }
+>     text { "This is some text" }
+> }
+> ```
+
+## Child values
+If you want to add more children to values then just simply express it like a `rsx!`
+```rust
+fn app() -> Element {
+    let x = 69;
+    rsx! {
+        div {
+            text { "the number is {x}, Nice!" }
+        }
+    }
+}
+```
+
+## Formatted text
+```rust
+fn app() -> Element {
+    let x = 69;
+    rsx! {
+        text { "the number is {x}, Nice!" }
+    }
+}
+```
+> :::info You can also do expressions after the string
+```rust
+text { "the number is {}, Nice!", x }
+```
+
+## For loops
+```rust
+fn app() -> Element {
+    rsx! {
+        for (i in 0..5) { // () are required
+            text { "{i}" }
+        }
+    }
+}
+```
+
+## Attribute
+You can change the element's struct fields by just providing some attributes before the children
+```rust
+fn app() -> Element {
+    rsx! {
+        text { class: "my_text" }
+    }
+}
+```
+
+## Type assignment
+In special elements like `data_holder` You can specify what `type` the element holds. It would act like `my_fn::<Type>()`
+```rust
+fn app() -> Element {
+    rsx! {
+        // assign the type u32
+        data_holder as u32 { id: "count" }
+    }
+}
+```