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 />)

src/exercise/05.md renamed to exercises/05.dom-side-effects/README.mdx

@@ -1,11 +1,5 @@
 # DOM Side-Effects
 
-## 📝 Your Notes
-
-Elaborate on your learnings here in `src/exercise/05.md`
-
-## Background
-
 Often when working with React you'll need to interact with the DOM directly. You
 may need to use a vanilla-js (non-framework-specific) library that needs to
 interact with directly with the DOM. Often to make a UI accessible you need to
@@ -69,57 +63,3 @@ state if you're unsure and then move to a ref if you decide you don't want a
 rerender when it's updated. We'll dive deeper into non-DOM refs in future
 workshops.
 
-## Exercise
-
-Production deploys:
-
-- [Exercise](https://react-hooks-next.netlify.app/isolated/exercise/05.tsx)
-- [Final](https://react-hooks-next.netlify.app/isolated/final/05.tsx)
-
-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.
-
-## Extra Credit
-
-### 1. 💯 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.
-
-## 🦉 Feedback
-
-Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Hooks%20%F0%9F%8E%A3&e=05%3A%20useRef%20and%20useEffect%3A%20DOM%20interaction&em=).

public/vanilla-tilt.styles.css

@@ -0,0 +1,31 @@
+/*
+Taken from the vanilla-tilt.js demo site:
+https://micku7zu.github.io/vanilla-tilt.js/index.html
+*/
+.tilt-root {
+  height: 150px;
+  background-color: red;
+  width: 200px;
+  background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
+  background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
+  transform-style: preserve-3d;
+  will-change: transform;
+  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
+}
+.tilt-child {
+  position: absolute;
+  width: 50%;
+  height: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translateZ(30px) translateX(-50%) translateY(-50%);
+  box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.3);
+  background-color: white;
+}
+.totally-centered {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/styles.css

@@ -2,38 +2,6 @@
   color: red;
 }
 
-/*
-Taken from the vanilla-tilt.js demo site:
-https://micku7zu.github.io/vanilla-tilt.js/index.html
-*/
-.tilt-root {
-  height: 150px;
-  background-color: red;
-  width: 200px;
-  background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
-  background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
-  transform-style: preserve-3d;
-  will-change: transform;
-  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
-}
-.tilt-child {
-  position: absolute;
-  width: 50%;
-  height: 50%;
-  top: 50%;
-  left: 50%;
-  transform: translateZ(30px) translateX(-50%) translateY(-50%);
-  box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.3);
-  background-color: white;
-}
-.totally-centered {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 /* For exercise 6, we're handling errors with an error boundary */
 body[class*='6'] :not(.render-container) > iframe,
 body[class*='6'] > iframe {