docs/tut/crash-course/1-introduction.md

@@ -24,3 +24,24 @@ Some of the main focuses behind Vide's design choices:
 - Independence from instance lifetimes.
 - A powerful reactive system that can surgically update properties as a result
   of state changes.
+
+## Structure Of A Vide App
+
+The entry point for all Vide apps is the `root()` function. This function
+sets up Vide's reactivity system and allows proper disposal of your app. It
+takes and calls a function that should create your entire app, then returns the
+result.
+
+In Vide, your app should be composed of functions, each function creates a
+specific part of your app, and can be reused if needed. These functions are
+called *components*.
+
+```lua
+local function App()
+    return create "ScreenGui" {
+        create "TextLabel" { Text = "hi" }
+    }
+end
+
+root(App).Parent = game.StarterGui
+```

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

@@ -1,4 +1,4 @@
-# Creating UI Elements
+# Creating UI
 
 Instances are created using [`create()`](../../api/creation.md#create).
 

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

@@ -5,7 +5,7 @@ Components are custom-made reusable pieces of UI made from other pieces of UI.
 By using components you can make your application more modular and better
 organized.
 
-```lua
+```lua [Button.lua]
 local function Button(props: {
     Position: UDim2,
     Text: string,
@@ -20,6 +20,27 @@ local function Button(props: {
         Activated = props.Activated
     }
 end
+
+return Button
+```
+
+```lua [App.lua]
+local Button = require(Button)
+
+local function App()
+    return create "ScreenGui" {
+        Button {
+            Position = UDim2.fromOffset(200, 200),
+            Text = "click me!",
+
+            Activated = function()
+                print "clickeD"
+            end
+        }
+    }
+end
+
+root(App).Parent = game.StarterGui
 ```
 
 Above is a simple example of a button component with its background color set to