add taco button class component example

src/components/taco-component.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react'
+
+class TacoComponent extends Component {
+    constructor(props) {
+        super()
+        this.tacoTopping = props.topping || ''
+    }
+    getTacos() {
+        if (window) {
+            window.alert(`TACOS! 🌮${this.tacoTopping}`)
+        }
+    }
+    // lifecycle methods here
+    render () {
+        return (
+            <div style={{padding: '1em'}}>
+                <button
+                    onClick={() => { this.getTacos()}}
+                    style={{fontSize: '1.5em'}}>
+                    Get tacos
+                </button>
+            </div>
+        )
+    }
+}
+
+export default TacoComponent

src/slides/index.mdx

@@ -587,38 +587,50 @@ export default () => {
 
 ---
 
+import TacoComponent from '../components/taco-component'
+
 <Slide>
 
-# We still love u, class components
+# Class components
 
 <CodeBlock side="left">
 
 ```jsx
 import React, {Component} from 'react'
 
-class MyComponent extends Component {
-    constructor() {
+class TacoComponent extends Component {
+    constructor(props) {
         super()
+        this.tacoTopping = props.topping
+    }
+    getTacos() {
+        if (window)
+            window.alert(`TACOS! 🌮${this.tacoTopping}`)
     }
-    // lifecycle methods here
-    render {
+    render () {
         return (
-            <div>
-                {/* UI stuff here */}
-            </div>
+            <button onClick={() => { this.getTacos()}}>
+                Get tacos
+            </button>
         )
     }
 }
-export default MyComponent
+export default TacoComponent
 ```
 
 </CodeBlock>
 
-</Slide>
+<CodeBlock side="right">
 
----
+```jsx
+<TacoComponent topping="🌶" />
+```
+
+<TacoComponent topping="🌶" />
 
-<img src="../chrome-devtools-component-tree.png" alt="Rendered HTML tree in Chrome devTools" style="max-height: 100vh" />
+</CodeBlock>
+
+</Slide>
 
 ---