migrate: exercise 05 to kcd-workshop format

Author: chantastic

exercises/05.dom-side-effects/01.problem/README.mdx

@@ -0,0 +1,11 @@
+# DOM Side-Effects
+
+For this extra credit we're going to auto-focus on the username input if there's
+an error after submitting. This is a common practice for accessibility purposes
+(to focus on the first input that has an error after a form submission).
+
+So for this exercise you're going to use `useRef`. The example above should be
+enough to get you working. You'll pass the ref you create to the input and then
+in a `useEffect` you'll call `.focus()` on the input element whenever the error
+is displayed.
+

src/exercise/05.tsx renamed to exercises/05.dom-side-effects/01.problem/index.tsx

@@ -1,8 +1,6 @@
-// DOM Side-Effects
-// http://localhost:3000/isolated/final/02.extra-4.tsx
-
 import * as React from 'react'
-import {useLocalStorageState} from '../utils'
+import * as ReactDOM from 'react-dom/client'
+import {useLocalStorageState} from '~/shared/utils'
 
 function UsernameForm({
   initialUsername = '',
@@ -100,4 +98,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/05.dom-side-effects/01.solution/README.mdx

@@ -0,0 +1 @@
+# DOM Side-Effects

src/final/05.tsx renamed to exercises/05.dom-side-effects/01.solution/index.tsx

@@ -1,8 +1,6 @@
-// DOM Side-Effects
-// http://localhost:3000/isolated/final/02.extra-4.tsx
-
 import * as React from 'react'
-import {useLocalStorageState} from '../utils'
+import * as ReactDOM from 'react-dom/client'
+import {useLocalStorageState} from '~/shared/utils'
 
 function UsernameForm({
   initialUsername = '',
@@ -92,4 +90,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/05.dom-side-effects/02.problem/README.mdx

@@ -0,0 +1,32 @@
+# Side-Effect Cleanup
+
+In this extra credit we're going to use a completely different example. We're
+going to make a `<Tilt />` component that renders a div and uses the
+`vanilla-tilt` library to make it super fancy.
+
+The thing is, `vanilla-tilt` works directly with DOM nodes to setup event
+handlers and stuff, so we need access to the DOM node. But because we're not the
+one calling `document.createElement` (React does) we need React to give it to
+us.
+
+So in this exercise we're going to use a `ref` so React can give us the DOM node
+and then we can pass that on to `vanilla-tilt`.
+
+Additionally, we'll need to clean up after ourselves if this component is
+unmounted. Otherwise we'll have event handlers dangling around on DOM nodes that
+are no longer in the document which can cause a memory leak.
+
+To be clear about the memory leak, just imagine what would happen if we mount a
+tilt element, then unmount it (without cleaning up). Those DOM nodes hang around
+because the event listeners are still listening to events on them (even though
+they're no longer in the document). Then let's say we mount a new one and
+unmount that again. Now we have two sets of DOM nodes that are still in memory,
+but not being used. We keep doing this over and over again and eventually our
+computer is just keeping track of all these DOM nodes we don't need it to.
+That's what's called a memory leak. So it's really important we clean up after
+ourselves to avoid the performance problems associated with memory leaks.
+
+NOTE: Because this extra credit is a completely different example, you've got
+another starting point file in: `src/exercise/05.extra-1.tsx`. 🐨 and 💰 will be
+there to help you get that working.
+

exercises/05.dom-side-effects/02.problem/index.css

@@ -0,0 +1 @@
+@import "/vanilla-tilt.styles.css"

src/exercise/05.extra-1.tsx renamed to exercises/05.dom-side-effects/02.problem/index.tsx

@@ -1,8 +1,5 @@
-// DOM Side-Effects
-// 💯 Side-effect cleanup
-// http://localhost:3000/isolated/exercise/05.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import VanillaTilt from 'vanilla-tilt'
 
 function Tilt({children}: {children: React.ReactNode}) {
@@ -43,7 +40,9 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)
 
 /*
 eslint

exercises/05.dom-side-effects/02.solution/README.mdx

@@ -0,0 +1 @@
+# Side-Effect Cleanup

exercises/05.dom-side-effects/02.solution/index.css

@@ -0,0 +1 @@
+@import "/vanilla-tilt.styles.css"

src/final/05.extra-1.tsx renamed to exercises/05.dom-side-effects/02.solution/index.tsx

@@ -1,8 +1,5 @@
-// DOM Side-Effects
-// 💯 Side-effect cleanup
-// http://localhost:3000/isolated/final/05.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import VanillaTilt from 'vanilla-tilt'
 
 interface HTMLVanillaTiltElement extends HTMLDivElement {
@@ -40,4 +37,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)