update the dioxus cratesio readme, add many more examples (#5501)

* update the dioxus cratesio readme

* fix example

* fix header

* add a bunch more examples

examples/02-building-ui/components.rs

@@ -0,0 +1,46 @@
+//! Defining and using components.
+//!
+//! A component is just a function annotated with `#[component]` that returns an `Element`.
+//! Its arguments are its props — Dioxus generates a builder so you can construct the
+//! component inside `rsx!` with a struct-like syntax.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        h1 { "Greetings" }
+        Greeting { name: "Alice" }
+        Greeting { name: "Bob", excited: true }
+        Greeting { name: "Charlie", excited: false }
+
+        h2 { "User cards" }
+        UserCard { name: "Ada Lovelace", role: "Mathematician" }
+        UserCard { name: "Grace Hopper", role: "Computer Scientist" }
+    }
+}
+
+// Components must start with an uppercase letter.
+// Props are taken as named arguments — `name` is required, and `excited` has a default.
+#[component]
+fn Greeting(name: String, #[props(default)] excited: bool) -> Element {
+    let punctuation = if excited { "!" } else { "." };
+    rsx! {
+        p { "Hello, {name}{punctuation}" }
+    }
+}
+
+// Components can take any Clone + PartialEq type as a prop.
+#[component]
+fn UserCard(name: String, role: String) -> Element {
+    rsx! {
+        div { border: "1px solid #ccc", padding: "8px", margin: "4px",
+            strong { "{name}" }
+            " — "
+            em { "{role}" }
+        }
+    }
+}