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

@@ -5,7 +5,10 @@ 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 [Button.lua]
+```lua [Button.luau]
+local vide = require(vide)
+local create = vide.create
+
 local function Button(props: {
     Position: UDim2,
     Text: string,
@@ -24,7 +27,10 @@ end
 return Button
 ```
 
-```lua [App.lua]
+```lua [App.luau]
+local vide = require(vide)
+local create = vide.create
+
 local Button = require(Button)
 
 local function App()
@@ -34,7 +40,7 @@ local function App()
             Text = "click me!",
 
             Activated = function()
-                print "clickeD"
+                print "clicked"
             end
         }
     }
@@ -43,27 +49,17 @@ end
 root(App).Parent = game.StarterGui
 ```
 
-Above is a simple example of a button component with its background color set to
-a dark grey and with a fixed size.
+Above is a simple example of a button component with a set color and size,
+being reused across files.
 
 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!",
-
-    Activated = function()
-        print "clicked"
-    end
-}
-```
 
 Components allow you to *encapsulate* behavior. You can only modify the
 component in ways that you allow in the component.
 
 This also promotes code reusability. Anytime you want a new button all you do
 is call `Button {}` instead of creating and setting every property each time.
+When changing the button in future, any changes to the button file will be
+reflected anywhere the button is used throughout your app.
 
 This can be extended to much more complicated UI.