Update docs

docs/tut/crash-course/7-stateful-component.md

@@ -0,0 +1,69 @@
+# Stateful Components
+
+A stateful component is a component that stores and displays some data.
+
+Stateful components in Vide are created using sources and effects - sources to
+store the data, and effects to display the data.
+
+```lua
+local create = vide.create
+local source = vide.source
+local effect = vide.effect
+
+local function Counter()
+    local count = source(0)
+
+    local instance = create "TextButton" {
+        Activated = function()
+            count(count() + 1)
+        end
+    }
+
+    effect(function()
+        instance.Text = "count: " .. count()
+    end)
+
+    return instance
+end
+```
+
+Above is an example of a counter component, that when clicked, will increment
+its internal count, and automatically update its text to reflect that count.
+
+Making a property update based on a source is also called *property
+binding*.
+
+Each instance of `Counter()` will maintain its own independent count, since the
+count source is created inside the scope of the component.
+
+External sources can also be passed into components for them to use.
+
+```lua
+local function Counter(props: { count: () -> number })
+    local count = props.count
+
+    local instance = create "TextButton" {
+        Activated = function()
+            count(count() + 1)
+        end
+    }
+
+    effect(function()
+        instance.Text = "count: " .. count()
+    end)
+
+    return instance
+end
+
+local count = source(0)
+
+Counter {
+    count = count
+}
+
+count(1) -- the Counter component will update to display this count
+```
+
+Sources can be created internally or passed in from externally, there are no
+restrictions on how they are used as long as the effect is created within a
+reactive scope so that it can be tracked.