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/rendering_lists.rs

@@ -0,0 +1,60 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(App);
+}
+
+#[derive(PartialEq, Clone)]
+struct Comment {
+    content: String,
+    id: usize,
+}
+
+pub fn App(cx: Scope) -> Element {
+    // ANCHOR: render_list
+    let comment_field = use_state(&cx, || String::new());
+    let mut next_id = use_state(&cx, || 0);
+    let comments = use_ref(&cx, || Vec::<Comment>::new());
+
+    let comments_lock = comments.read();
+    let comments_rendered = comments_lock.iter().map(|comment| {
+        cx.render(rsx!(CommentComponent {
+            key: "{comment.id}",
+            comment: comment.clone(),
+        }))
+    });
+
+    cx.render(rsx!(
+        form {
+            onsubmit: move |_| {
+                comments.write().push(Comment {
+                    content: comment_field.get().clone(),
+                    id: *next_id.get(),
+                });
+                next_id += 1;
+
+                comment_field.set(String::new());
+            },
+            input {
+                value: "{comment_field}",
+                oninput: |event| comment_field.set(event.value.clone()),
+            }
+            input {
+                r#type: "submit",
+            }
+        },
+        comments_rendered,
+    ))
+    // ANCHOR_END: render_list
+}
+
+#[inline_props]
+fn CommentComponent(cx: Scope, comment: Comment) -> Element {
+    cx.render(rsx!(div {
+        "Comment by anon:",
+        p { "{comment.content}" }
+        button { "Reply" },
+    }))
+}