add context optimization exercises

exercises/01.composition/01.problem.reuse/README.mdx

@@ -0,0 +1 @@
+# Reusing Elements

exercises/01.composition/01.problem.reuse/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+function Footer() {
+	return <footer>I am the footer</footer>
+}
+
+// 🐨 assign a <Footer /> to a footer variable here
+
+function App() {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(c => c + 1)
+	return (
+		<div>
+			<button onClick={increment}>The count is {count}</button>
+			{/* 🐨 change this to an interpolation and interpolate the footer */}
+			<Footer />
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/01.composition/01.problem.reuse/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+  }
+}

exercises/01.composition/01.solution.reuse/README.mdx

@@ -0,0 +1 @@
+# Reusing Elements

exercises/01.composition/01.solution.reuse/index.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+function Footer() {
+	return <footer>I am the footer</footer>
+}
+
+const footer = <Footer />
+
+function App() {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(c => c + 1)
+	return (
+		<div>
+			<button onClick={increment}>The count is {count}</button>
+			{footer}
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/01.composition/01.solution.reuse/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+  }
+}

exercises/01.composition/02.problem.props/README.mdx

@@ -0,0 +1 @@
+# Element Props

exercises/01.composition/02.problem.props/index.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+function Footer({ color }: { color: string }) {
+	return <footer style={{ color }}>I am the ({color}) footer</footer>
+}
+
+// 💣 delete this variable
+const footer = <Footer color="black" />
+
+// 🐨 make the Main component accept a footer prop
+function Main() {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(c => c + 1)
+	return (
+		<div>
+			<button onClick={increment}>The count is {count}</button>
+			{footer}
+		</div>
+	)
+}
+
+function App() {
+	const [color, setColor] = useState('black')
+	return (
+		<div>
+			<div>
+				<p>Set the footer color:</p>
+				<div style={{ display: 'flex', gap: 4 }}>
+					<button onClick={() => setColor('black')}>Black</button>
+					<button onClick={() => setColor('blue')}>Blue</button>
+					<button onClick={() => setColor('green')}>Green</button>
+				</div>
+			</div>
+			{/* 🐨 pass the footer prop so you can dynamically determine the color */}
+			<Main />
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)
+
+/*
+eslint
+	@typescript-eslint/no-unused-vars: "off",
+*/

exercises/01.composition/02.problem.props/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+  }
+}

exercises/01.composition/02.solution.props/README.mdx

@@ -0,0 +1 @@
+# Element Props

exercises/01.composition/02.solution.props/index.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+function Footer({ color }: { color: string }) {
+	return <footer style={{ color }}>I am the ({color}) footer</footer>
+}
+
+function Main({ footer }: { footer: React.ReactNode }) {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(c => c + 1)
+	return (
+		<div>
+			<button onClick={increment}>The count is {count}</button>
+			{footer}
+		</div>
+	)
+}
+
+function App() {
+	const [color, setColor] = useState('black')
+	return (
+		<div>
+			<div>
+				<p>Set the footer color:</p>
+				<div style={{ display: 'flex', gap: 4 }}>
+					<button onClick={() => setColor('black')}>Black</button>
+					<button onClick={() => setColor('blue')}>Blue</button>
+					<button onClick={() => setColor('green')}>Green</button>
+				</div>
+			</div>
+			<Main footer={<Footer color={color} />} />
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/01.composition/02.solution.props/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+  }
+}

exercises/01.composition/03.problem.context/README.mdx

@@ -0,0 +1 @@
+# Context

exercises/01.composition/03.problem.context/index.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+// 🐨 create a ColorContext
+
+// 🐨 remove the prop
+function Footer({ color }: { color: string }) {
+	// 🐨 get the color from the ColorContext
+	return <footer style={{ color }}>I am the ({color}) footer</footer>
+}
+
+function Main({ footer }: { footer: React.ReactNode }) {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(c => c + 1)
+	return (
+		<div>
+			<button onClick={increment}>The count is {count}</button>
+			{footer}
+		</div>
+	)
+}
+
+// 🐨 create the <Footer /> out here and assign it to a footer variable
+
+function App() {
+	const [color, setColor] = useState('black')
+	const [appCount, setAppCount] = useState(0)
+	// 🐨 wrap all this with the ColorContext provider and pass the color
+	return (
+		<div>
+			<div>
+				<p>Set the footer color:</p>
+				<div style={{ display: 'flex', gap: 4 }}>
+					<button onClick={() => setColor('black')}>Black</button>
+					<button onClick={() => setColor('blue')}>Blue</button>
+					<button onClick={() => setColor('green')}>Green</button>
+				</div>
+			</div>
+			<button onClick={() => setAppCount(c => c + 1)}>
+				The app count is {appCount}
+			</button>
+			{/* 🐨 remove the color prop and move this outside the component again */}
+			<Main footer={<Footer color={color} />} />
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/01.composition/03.problem.context/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+  }
+}

exercises/01.composition/03.solution.context/README.mdx

@@ -0,0 +1 @@
+# Context

exercises/01.composition/03.solution.context/index.tsx

@@ -0,0 +1,55 @@
+import { createContext, use, useState } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+const ColorContext = createContext<string | null>(null)
+
+function useColor() {
+	const color = use(ColorContext)
+	if (!color) throw new Error('ColorContext not found')
+	return color
+}
+
+function Footer() {
+	const color = useColor()
+	return <footer style={{ color }}>I am the ({color}) footer</footer>
+}
+
+function Main({ footer }: { footer: React.ReactNode }) {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(c => c + 1)
+	return (
+		<div>
+			<button onClick={increment}>The count is {count}</button>
+			{footer}
+		</div>
+	)
+}
+
+const footer = <Footer />
+
+function App() {
+	const [color, setColor] = useState('black')
+	const [appCount, setAppCount] = useState(0)
+	return (
+		<ColorContext.Provider value={color}>
+			<div>
+				<div>
+					<p>Set the footer color:</p>
+					<div style={{ display: 'flex', gap: 4 }}>
+						<button onClick={() => setColor('black')}>Black</button>
+						<button onClick={() => setColor('blue')}>Blue</button>
+						<button onClick={() => setColor('green')}>Green</button>
+					</div>
+				</div>
+				<button onClick={() => setAppCount(c => c + 1)}>
+					The app count is {appCount}
+				</button>
+				<Main footer={footer} />
+			</div>
+		</ColorContext.Provider>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/01.composition/03.solution.context/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+  }
+}

exercises/01.composition/04.problem.use-memo/README.mdx

@@ -0,0 +1 @@
+# Memoize Elements