Improve docs

docs/tut/crash-course/2-creation.md

@@ -67,4 +67,4 @@ create "Frame" {
 
 When a property is assigned a table, Vide will inspect the type of the property
 being assigned to, and call that type's default `new()` constructor with the
-values from the unpacked table.
+unpacked values from the assigned table.

docs/tut/crash-course/3-components.md

@@ -13,14 +13,22 @@ local function Button(props: {
 })
     return create "TextButton" {
         BackgroundColor3 = Color3.fromRGB(50, 50, 50),
-        Size = UDim2.fromOffset(400, 250),
+        Size = UDim2.fromOffset(200, 150),
 
         Position = props.Position,
         Text = props.Text,
         Activated = props.Activated
     }
 end
+```
 
+Above is a simple example of a button component with its background color set to
+a dark grey and with a fixed size.
+
+A single parameter `props` is used to pass properties to the component.
+Creating instances of this button component is as simple as doing the below:
+
+```lua
 local button = Button {
     Position = UDim2.new(),
     Text = "Click me!",
@@ -31,11 +39,6 @@ local button = Button {
 }
 ```
 
-Above is a simple example of a button component with its background color set to
-a dark grey and with a fixed size.
-
-A single parameter `props` is used to pass properties to the component.
-
 Components allow you to *encapsulate* behavior. You can only modify the
 component in ways that you allow in the component.
 

docs/tut/crash-course/4-source.md

@@ -25,10 +25,13 @@ count(count() + 1) -- increment source by 1
 Below is an example of a stateful counter component.
 
 ```lua
-local function Counter()
+local function Counter(props: { Position: UDim2 })
     local count = source(0)
 
     return create "TextButton" {
+        Position = props.Position,
+        Size = UDim2.new(200, 50),
+
         Text = count,
 
         Activated = function()
@@ -38,21 +41,22 @@ local function Counter()
 end
 ```
 
+Each call of `Counter {}` will create a new counter element, each with their own
+independent count.
+
 Vide detects when you assign a function to a property. This is known
 as *binding* and doing so will cause the property to *automatically* update
 whenever a source in that function is updated, by rerunning the function and
 assigning its return value. You can only bind non-event
 properties, otherwise the function is connected as the event callback.
 
-You as the programmer do not have to worry about manually updating variables or
+This allows you as the programmer to not need to manually update GUI as the state
-UI instances, you can just focus on defining how the data maps to UI and
+of your program changes. You just define how the data maps to UI, and Vide's
-everything will update when changes occur.
+reactive system will surgically update any properties depending on sources that
+are changed.
 
-Each call of `Counter {}` will create a new counter element, each with their own
+Since sources are just functions, you can also pass external sources to
-independent count.
+components like so:
-
-Since sources are just functions, you can pass an external source to a component
-like so:
 
 ```lua
 local function Text(p: {

docs/tut/crash-course/7-nested-properties.md

@@ -82,8 +82,8 @@ type Children = {
 
 local function List(props: Children & Layout)
     return create "Frame" {
-        props.Layout,
         props.Children,
+        props.Layout,
         create "UIListLayout" {}
     }
 end
@@ -104,17 +104,16 @@ Deeper nested properties are guaranteed to be set after shallower nested
 properties, this can be used to create overridable default properties.
 
 ```lua
-local function CenteredList(props: Children & Layout)
+local function List(props: Children & Layout)
-    return List {
+    return create "Frame" {
-        Layout = {
+        props.Children,
-            props.Layout,
 
+        props.Layout,
         -- can be overriden by `props.Layout`
         AnchorPoint = Vector2.new(0.5, 0),
-            Position = UDim2.fromScale(0.5, 0)
+        Position = UDim2.fromScale(0.5, 0),
-        },
 
-        Children = props.Children
+        create "UIListLayout" {}
     }
 end
 ```

docs/tut/crash-course/8-actions.md

@@ -20,9 +20,6 @@ create "TextLabel" {
 -- will print "test"
 ```
 
-Actions take precedence over property and child assignment, just like property
-nesting.
-
 Actions can be wrapped with functions to re-use specific behaviors. Below is
 an example of an action used to listen for property changes: