Try improve crash course

docs/tut/crash-course/15-concepts.md

@@ -0,0 +1,132 @@
+# Concepts Summary
+
+A summary of all the concepts covered during the crash course.
+
+## Source
+
+A source of data.
+
+Stores a single value that can be updated by the user.
+
+## Effect
+
+Anything that happens in reponse to a source update.
+
+Vide has built-in functions to create effects such as
+
+- `effect()` - runs arbitrary user code on source update
+- `derive()` - updates a derived source on source update
+
+## Reactive Scope
+
+A scope created by certain Vide functions where source updates can be tracked,
+and cleanups queued.
+
+When a source used inside a reactive scope is updated, the reactive scope will
+rerun.
+
+Reactive scopes are created by functions such as
+
+- `root()`
+- `effect()`
+- `derive()`
+
+## Owner
+
+A reactive scope created within an outer reactive scope, is *owned* by the outer
+reactive scope.
+
+When a reactive scope is re-ran or destroyed, all reactive scopes owned by it
+are also destroyed.
+
+Vide does not let you create reactive scopes without owners.
+
+## Root Reactive Scope
+
+A top-level reactive scope. These scopes are an exception to the owner rule.
+
+Created by `root()`, which `mount()` uses internally.
+
+A root reactive scope can be created on its own. It allows other reactive scopes
+to be created with an owner.
+
+Root reactive scopes must be destroyed manually by the user, a function to do
+this is given by `root()`.
+
+A root reactive scope can be created within another reactive scope and it will
+not automatically be owned by that scope.
+
+## Cleanup
+
+Cleans up the result from an effect.
+
+Unneeded in most cases, a cleanup is arbitrary code that can be ran before
+a reactive scope is rerun or destroyed, so that the result from the previous
+run can be cleaned up. A cleanup can be queued by using `cleanup()` within
+a reactive scope.
+
+## Tracking
+
+Reactive scopes are tracking by default, meaning sources read from within scope
+will be tracked.
+
+A reactive scope can be made temporarily non-tracking within `untrack()`, so
+that any source used will be ignored. The only function that creates a
+nontracking reactive scope by default is `root()`.
+
+## Reactive Graph
+
+The combination of reactive scopes can viewed graphically, called a
+*reactive graph*. This can be a more intuitive way to think of the
+relationships between effects and the sources they depend on.
+
+### Code
+
+```lua
+local count = source(0)
+
+root(function()
+    local text = derive(function()
+        return "count: " .. text()
+    end)
+
+    effect(function()
+        print(text())
+    end)
+end)
+```
+
+### Graph resulting from code
+
+```mermaid
+%%{init: {
+    "theme": "base",
+    "themeVariables": {
+        "primaryColor": "#1B1B1F",
+        "primaryTextColor": "#fff",
+        "primaryBorderColor": "#1B1B1F",
+        "lineColor": "#79B8FF",
+        "tertiaryColor": "#161618",
+        "tertiaryBorderColor": "#1C1C1F"
+    }
+}}%%
+
+graph LR
+
+subgraph root
+    text --> effect
+end
+
+count --> text
+```
+
+Notes:
+
+- Since `count` is a source, not an effect, it can exist
+  outside of a root reactive scope.
+- An update to `count` will cause `text` to rerun, which
+  then causes `effect` to rerun.
+- When the root reactive scope is destroyed, `text` and
+  `effect` will be destroyed alongside it, since they are
+  owned by it. `count` will be untouched and future updates
+  to `count` will have no effect.