Rework Guide (#486)

* Move getting started to Guide

* Clean up summary and getting started

* Shorten intro by moving stuff to individual platform docs

* Make intro even shorter, summarize features

* Further cleanup; move development-related docs to separate section

* Make `guide` a crate. Turn code samples into examples so that we can check if they compile

* Rewrite "Describing the UI":

* Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language

* Move some "special attribute" samples to the `examples` directory

* Simplify introduction to components

* Simplify introduction to component props

* Document Prop features; add code samples

* Simplify component children docs

* Interactivity: better introduction to events

* Hooks: better introduction

* Remove outdated doc

* Introducs use_ref

* Simplify User Input chapter

* Document event handler props

* Meme editor example

* Meme editor walkthrough

* Add dark mode example

* Guide for context; dark mode example

* Guide: custom hooks

* Guide: conditional rendering

* Guide: rendering lists

* Guide: rendering lists + keys

* Move remaining infor from Reference to guide

* Delete reference book

docs/guide/examples/use_future.rs

@@ -0,0 +1,60 @@
+#![allow(non_snake_case, unused)]
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(App);
+}
+
+#[derive(serde::Deserialize, Debug)]
+struct ApiResponse {
+    #[serde(rename = "message")]
+    image_url: String,
+}
+
+fn App(cx: Scope) -> Element {
+    // ANCHOR: use_future
+    let future = use_future(&cx, (), |_| async move {
+        reqwest::get("https://dog.ceo/api/breeds/image/random")
+            .await
+            .unwrap()
+            .json::<ApiResponse>()
+            .await
+    });
+    // ANCHOR_END: use_future
+
+    // ANCHOR: render
+    cx.render(match future.value() {
+        Some(Ok(response)) => rsx! {
+            button {
+                onclick: move |_| future.restart(),
+                "Click to fetch another doggo"
+            }
+            div {
+                img {
+                    max_width: "500px",
+                    max_height: "500px",
+                    src: "{response.image_url}",
+                }
+            }
+        },
+        Some(Err(_)) => rsx! { div { "Loading dogs failed" } },
+        None => rsx! { div { "Loading dogs..." } },
+    })
+    // ANCHOR_END: render
+}
+
+#[inline_props]
+fn RandomDog(cx: Scope, breed: String) -> Element {
+    // ANCHOR: dependency
+    let future = use_future(&cx, (breed,), |(breed,)| async move {
+        reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
+            .await
+            .unwrap()
+            .json::<ApiResponse>()
+            .await
+    });
+    // ANCHOR_END: dependency
+
+    None
+}