',
20 | ).to.be.true
21 | })
22 |
--------------------------------------------------------------------------------
/exercises/07.forms/03.solution.types/README.mdx:
--------------------------------------------------------------------------------
1 | # Input Types
2 |
3 |
4 |
5 | 👨💼 Great! Now our users will have more fields available to them as they're
6 | filling out this form. But there's something weird going on with the form
7 | submission so let's look at that next.
8 |
9 | 🦉 While the web platform has a lot of really great input types, not all of them
10 | match the style you're going for in your app. And these can be difficult (or in
11 | some cases even impossible) to style. There are efforts in standards bodies to
12 | solve these problems, but until then, you should look into great UI libraries
13 | like [Radix-UI](https://www.radix-ui.com/) and
14 | [React Aria Components](https://react-spectrum.adobe.com/react-aria) which
15 | handle these issues and allow you to customize the style much more easily.
16 |
--------------------------------------------------------------------------------
/exercises/04.components/01.solution.function/index.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep } from '@epic-web/workshop-utils/test'
2 |
3 | const response = await fetch(location.href)
4 | const indexHtml = await response.text()
5 | const node = document.createElement('div')
6 | node.innerHTML = indexHtml
7 |
8 | const inlineScript = node.querySelector('script[type="text/babel"]')
9 | if (!inlineScript) {
10 | throw new Error('inlineScript not found')
11 | }
12 |
13 | await testStep('message function is created', async () => {
14 | const functionForm = inlineScript.textContent?.includes('function message')
15 | const declarationForm = inlineScript.textContent?.includes('const message = ')
16 | expect(functionForm || declarationForm, 'message function must be declared')
17 | .to.be.true
18 | })
19 |
20 | await testStep('message function is called', async () => {
21 | expect(inlineScript.textContent).to.include('message(')
22 | })
23 |
--------------------------------------------------------------------------------
/exercises/03.using-jsx/05.problem.fragments/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/exercises/04.components/03.solution.jsx/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/exercises/02.raw-react/02.problem.nesting/README.mdx:
--------------------------------------------------------------------------------
1 | # Nesting Elements
2 |
3 |
4 |
5 | 👨💼 See if you can figure out how to write the JavaScript + React code to
6 | generate this DOM output:
7 |
8 | ```html
9 |
10 | Hello
11 | World
12 |
13 | ```
14 |
15 | Hint: You can either use the `children` prop or additional arguments after the
16 | props. If you use the `children` prop, you will get a warning in the developer
17 | console about needing a "key" prop. We'll get to that later.
18 |
19 | Tip: You'll use `createElement` for the `span` elements, but to get the
20 | space between them, you'll need to use a string (`' '`) to tell React to create
21 | a [`textNode`](https://developer.mozilla.org/en-US/docs/Web/API/Text).
22 |
23 | - [📜 `createElement`](https://react.dev/reference/react/createElement#createelement)
24 |
--------------------------------------------------------------------------------
/exercises/06.styling/02.solution.component/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | export function Box({
4 | style = {},
5 | className = '',
6 | ...otherProps
7 | }: React.ComponentProps<'div'>) {
8 | return (
9 |
14 | )
15 | }
16 |
17 | function App() {
18 | return (
19 |
20 |
21 | small lightblue box
22 |
23 |
24 | medium pink box
25 |
26 |
27 | large orange box
28 |
29 | sizeless colorless box
30 |
31 | )
32 | }
33 |
34 | const rootEl = document.createElement('div')
35 | document.body.append(rootEl)
36 | createRoot(rootEl).render()
37 |
--------------------------------------------------------------------------------
/exercises/08.inputs/04.solution.hidden/README.mdx:
--------------------------------------------------------------------------------
1 | # Hidden Inputs
2 |
3 |
4 |
5 | 👨💼 Great! Now when the user submits the form, this extra information will be
6 | available in the submission without the user needing to supply it. Well done!
7 |
8 | 🦉 A common question here is whether you can supply complex data structures as
9 | hidden input values, and you definitely can. You can either provide multiple
10 | hidden inputs, or just stick JSON in your hidden input like so:
11 |
12 | ```tsx
13 |
18 | ```
19 |
20 | Then the backend could parse that JSON from the `order` form field. This can be
21 | very useful if you're using a library that doesn't render form elements, but you
22 | want to send the user's selections to the backend as a part of your form using
23 | your own form elements.
24 |
--------------------------------------------------------------------------------
/exercises/03.using-jsx/02.solution.interpolation/index.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep } from '@epic-web/workshop-utils/test'
2 |
3 | const response = await fetch(location.href)
4 | const indexHtml = await response.text()
5 | const node = document.createElement('div')
6 | node.innerHTML = indexHtml
7 |
8 | const inlineScript = node.querySelector('script[type="text/babel"]')
9 | if (!inlineScript) {
10 | throw new Error('inlineScript not found')
11 | }
12 |
13 | await testStep('className is interpolated', async () => {
14 | expect(inlineScript.textContent).to.include('className={')
15 | expect(inlineScript.textContent).not.to.include('className="')
16 | })
17 |
18 | await testStep('children is interpolated', async () => {
19 | expect(
20 | inlineScript.textContent,
21 | 'children should be interpolated',
22 | ).not.to.include('>Hello World<')
23 | expect(
24 | inlineScript.textContent,
25 | 'expected script to include { children }',
26 | ).to.match(/{\s*children\s*}/)
27 | })
28 |
--------------------------------------------------------------------------------
/exercises/03.using-jsx/04.problem.nesting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/exercises/03.using-jsx/03.problem.spread/README.mdx:
--------------------------------------------------------------------------------
1 | # Spread props
2 |
3 |
4 |
5 | What if I have an object of props that I want applied to the `div` like this:
6 |
7 | ```tsx
8 | const children = 'Hello World'
9 | const className = 'container'
10 | const props = { children, className }
11 | const element = // how do I apply props to this div?
12 | ```
13 |
14 | If we were doing raw React APIs it would be:
15 |
16 | ```tsx
17 | const element = createElement('div', props)
18 | ```
19 |
20 | Or, it could be written like this:
21 |
22 | ```tsx
23 | const element = createElement('div', { ...props })
24 | ```
25 |
26 | 👨💼 See if you can figure out how to make that work with JSX. Take an object of
27 | props, and apply those props to a React element.
28 |
29 | 📜
30 | [Forwarding props with the JSX spread syntax](https://react.dev/learn/passing-props-to-a-component#forwarding-props-with-the-jsx-spread-syntax)
31 |
--------------------------------------------------------------------------------
/epicshop/playwright.config.js:
--------------------------------------------------------------------------------
1 | import os from 'os'
2 | import path from 'path'
3 | import { defineConfig, devices } from '@playwright/test'
4 |
5 | const PORT = process.env.PORT || '5639'
6 | const tmpDir = path.join(
7 | os.tmpdir(),
8 | 'epicshop-playwright',
9 | path.basename(new URL('../', import.meta.url).pathname),
10 | )
11 |
12 | export default defineConfig({
13 | outputDir: path.join(tmpDir, 'playwright-test-output'),
14 | reporter: [
15 | [
16 | 'html',
17 | { open: 'never', outputFolder: path.join(tmpDir, 'playwright-report') },
18 | ],
19 | ],
20 | use: {
21 | baseURL: `http://localhost:${PORT}/`,
22 | trace: 'retain-on-failure',
23 | },
24 |
25 | projects: [
26 | {
27 | name: 'chromium',
28 | use: { ...devices['Desktop Chrome'] },
29 | },
30 | ],
31 |
32 | webServer: {
33 | command: 'cd .. && npm start',
34 | port: Number(PORT),
35 | reuseExistingServer: !process.env.CI,
36 | stdout: 'pipe',
37 | stderr: 'pipe',
38 | env: { PORT },
39 | },
40 | })
41 |
--------------------------------------------------------------------------------
/exercises/04.components/01.solution.function/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/epicshop/setup-custom.js:
--------------------------------------------------------------------------------
1 | import path from 'node:path'
2 | import {
3 | getApps,
4 | isProblemApp,
5 | setPlayground,
6 | } from '@epic-web/workshop-utils/apps.server'
7 | import { warm } from 'epicshop/warm'
8 | import fsExtra from 'fs-extra'
9 |
10 | await warm()
11 |
12 | const allApps = await getApps()
13 | const problemApps = allApps.filter(isProblemApp)
14 |
15 | if (!process.env.SKIP_PLAYGROUND) {
16 | const firstProblemApp = problemApps[0]
17 | if (firstProblemApp) {
18 | console.log('🛝 setting up the first problem app...')
19 | const playgroundPath = path.join(process.cwd(), 'playground')
20 | if (await fsExtra.exists(playgroundPath)) {
21 | console.log('🗑 deleting existing playground app')
22 | await fsExtra.remove(playgroundPath)
23 | }
24 | await setPlayground(firstProblemApp.fullPath).then(
25 | () => {
26 | console.log('✅ first problem app set up')
27 | },
28 | (error) => {
29 | console.error(error)
30 | throw new Error('❌ first problem app setup failed')
31 | },
32 | )
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/exercises/04.components/02.solution.raw/content.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 |
3 | await testStep('Proper elements are rendered to the DOM', async () => {
4 | const rootElement = document.getElementById('root')
5 | expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
6 | if (!rootElement) return
7 |
8 | const element = await dtl.waitFor(
9 | () => {
10 | const element = rootElement!.querySelector('.container')
11 | expect(element, 'container element not found').to.be.instanceOf(
12 | HTMLElement,
13 | )
14 | return element
15 | },
16 | { timeout: 5000 },
17 | )
18 |
19 | if (!element) return
20 |
21 | const messages = Array.from(element.querySelectorAll('.message'))
22 | expect(messages, 'messages not found').to.have.length(2)
23 | const [helloMessage, goodbyeMessage] = messages
24 | expect(helloMessage?.textContent?.toLowerCase()).to.equal('hello world')
25 | expect(goodbyeMessage?.textContent?.toLowerCase()).to.equal('goodbye world')
26 | })
27 |
--------------------------------------------------------------------------------
/exercises/04.components/03.solution.jsx/content.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 |
3 | await testStep('Proper elements are rendered to the DOM', async () => {
4 | const rootElement = document.getElementById('root')
5 | expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
6 | if (!rootElement) return
7 |
8 | const element = await dtl.waitFor(
9 | () => {
10 | const element = rootElement!.querySelector('.container')
11 | expect(element, 'container element not found').to.be.instanceOf(
12 | HTMLElement,
13 | )
14 | return element
15 | },
16 | { timeout: 5000 },
17 | )
18 |
19 | if (!element) return
20 |
21 | const messages = Array.from(element.querySelectorAll('.message'))
22 | expect(messages, 'messages not found').to.have.length(2)
23 | const [helloMessage, goodbyeMessage] = messages
24 | expect(helloMessage?.textContent?.toLowerCase()).to.equal('hello world')
25 | expect(goodbyeMessage?.textContent?.toLowerCase()).to.equal('goodbye world')
26 | })
27 |
--------------------------------------------------------------------------------
/exercises/02.raw-react/02.problem.nesting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/exercises/04.components/01.solution.function/content.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 |
3 | await testStep('Proper elements are rendered to the DOM', async () => {
4 | const rootElement = document.getElementById('root')
5 | expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
6 | if (!rootElement) return
7 |
8 | const element = await dtl.waitFor(
9 | () => {
10 | const element = rootElement!.querySelector('.container')
11 | expect(element, 'container element not found').to.be.instanceOf(
12 | HTMLElement,
13 | )
14 | return element
15 | },
16 | { timeout: 5000 },
17 | )
18 |
19 | if (!element) return
20 |
21 | const messages = Array.from(element.querySelectorAll('.message'))
22 | expect(messages, 'messages not found').to.have.length(2)
23 | const [helloMessage, goodbyeMessage] = messages
24 | expect(helloMessage?.textContent?.toLowerCase()).to.equal('hello world')
25 | expect(goodbyeMessage?.textContent?.toLowerCase()).to.equal('goodbye world')
26 | })
27 |
--------------------------------------------------------------------------------
/exercises/04.components/02.solution.raw/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/exercises/02.raw-react/03.problem.deep-nesting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/exercises/04.components/01.problem.function/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/exercises/08.inputs/README.mdx:
--------------------------------------------------------------------------------
1 | # Inputs
2 |
3 |
4 |
5 | There are lots of different types of form elements built-into the browser you
6 | can use (of varying degrees of usefulness because of the way they are designed).
7 | [Find a list of standard input types here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input).
8 |
9 | In general, you use these form elements in React the same way you use them in
10 | regular HTML, but there are a few exceptions (especially regarding default
11 | values). So we're going to explore all the types of form elements in this
12 | exercise.
13 |
14 | There are a number of ways you can be notified of changes to form elements.
15 | We'll not be covering them in this workshop (we'll get into it more in a future
16 | workshop when we talk about managing state), but if you just can't wait, play
17 | around with `onChange` (which behaves like
18 | [the browser's `input` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event)).
19 |
--------------------------------------------------------------------------------
/exercises/04.components/03.problem.jsx/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/exercises/04.components/02.problem.raw/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/exercises/06.styling/01.solution.style/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | const smallBox = (
4 |
8 | small lightblue box
9 |
10 | )
11 | const mediumBox = (
12 |
16 | medium pink box
17 |
18 | )
19 | const largeBox = (
20 |
24 | large orange box
25 |
26 | )
27 | const sizelessColorlessBox = (
28 |
29 | sizeless colorless box
30 |
31 | )
32 |
33 | function App() {
34 | return (
35 |
36 | {smallBox}
37 | {mediumBox}
38 | {largeBox}
39 | {sizelessColorlessBox}
40 |
41 | )
42 | }
43 |
44 | const rootEl = document.createElement('div')
45 | document.body.append(rootEl)
46 | createRoot(rootEl).render()
47 |
--------------------------------------------------------------------------------
/exercises/04.components/04.solution.props/content.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 |
3 | await testStep('Proper elements are rendered to the DOM', async () => {
4 | const rootElement = document.getElementById('root')
5 | expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
6 | if (!rootElement) return
7 |
8 | const element = rootElement
9 |
10 | await dtl.waitFor(
11 | () => {
12 | const h1 = element.querySelector('h1')
13 | expect(h1, 'h1 not found').to.be.instanceOf(HTMLElement)
14 | expect(h1!.textContent).to.equal('Calculator')
15 | },
16 | { timeout: 5000 },
17 | )
18 |
19 | const codeElements = Array.from(element.querySelectorAll('code'))
20 | expect(codeElements, 'code elements not found').to.have.length(4)
21 |
22 | const [plus, minus, times, divide] = codeElements
23 |
24 | expect(plus?.textContent).to.equal('1 + 2 = 3')
25 | expect(minus?.textContent).to.equal('1 - 2 = -1')
26 | expect(times?.textContent).to.equal('1 * 2 = 2')
27 | expect(divide?.textContent).to.equal('1 / 2 = 0.5')
28 | })
29 |
--------------------------------------------------------------------------------
/exercises/06.styling/03.solution.size-prop/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | export function Box({
4 | size,
5 | ...otherProps
6 | }: {
7 | size?: 'small' | 'medium' | 'large'
8 | } & React.ComponentProps<'div'>) {
9 | const sizeClassName = size ? `box--${size}` : ''
10 | return (
11 |
18 | )
19 | }
20 |
21 | function App() {
22 | return (
23 |
24 |
25 | small lightblue box
26 |
27 |
28 | medium pink box
29 |
30 |
31 | large orange box
32 |
33 | sizeless colorless box
34 |
35 | )
36 | }
37 |
38 | const rootEl = document.createElement('div')
39 | document.body.append(rootEl)
40 | createRoot(rootEl).render()
41 |
--------------------------------------------------------------------------------
/exercises/01.js-hello-world/01.problem.hello/README.mdx:
--------------------------------------------------------------------------------
1 | # Hello World in JS
2 |
3 |
4 |
5 | 👨💼 It's important to have a basic understanding of how to generate and interact
6 | with DOM nodes using JavaScript because it will help you understand how React
7 | works under the hood a little better. So in this exercise we're actually not
8 | going to use React at all. Instead we're going to use JavaScript to create a
9 | `div` DOM node with the text "Hello World" and insert that DOM node into the
10 | document.
11 |
12 | 🐨 We'll be in to help guide you through making
13 | this work! See you there!
14 |
15 | 👨💼 Once you're finished, open up the
16 | [browser devtools](https://developer.chrome.com/docs/devtools) so
17 | you can check the DOM is what you expect it to be.
18 |
19 | {/* prettier-ignore */}
20 |
21 | 💡 Tip: you may find it useful to{' '}open the playground in a separate tab{'.'}
22 |
23 |
--------------------------------------------------------------------------------
/epicshop/fly.yaml:
--------------------------------------------------------------------------------
1 | # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
2 | #
3 |
4 | app: 'epicweb-dev-react-fundamentals'
5 | primary_region: sjc
6 | kill_signal: SIGINT
7 | kill_timeout: 5s
8 | swap_size_mb: 512
9 |
10 | experimental:
11 | auto_rollback: true
12 |
13 | attached:
14 | secrets: {}
15 |
16 | services:
17 | - processes:
18 | - app
19 | protocol: tcp
20 | internal_port: 8080
21 |
22 | ports:
23 | - port: 80
24 |
25 | handlers:
26 | - http
27 | force_https: true
28 | - port: 443
29 |
30 | handlers:
31 | - tls
32 | - http
33 |
34 | concurrency:
35 | type: connections
36 | hard_limit: 100
37 | soft_limit: 80
38 |
39 | tcp_checks:
40 | - interval: 15s
41 | timeout: 2s
42 | grace_period: 1s
43 |
44 | http_checks:
45 | - interval: 10s
46 | timeout: 2s
47 | grace_period: 5s
48 | method: get
49 | path: /resources/healthcheck
50 | protocol: http
51 | tls_skip_verify: false
52 |
--------------------------------------------------------------------------------
/exercises/01.js-hello-world/02.solution.root/index.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 |
3 | await testStep('"Hello World" is rendered to the DOM', async () => {
4 | const rootElement = document.getElementById('root')
5 | expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
6 |
7 | const element = await dtl.waitFor(
8 | async () => {
9 | const element = rootElement!.querySelector('.container')
10 | expect(element, 'container element not found').to.be.instanceOf(
11 | HTMLElement,
12 | )
13 | return element
14 | },
15 | { timeout: 5000 },
16 | )
17 |
18 | expect(element!.textContent, 'element text is not correct').to.equal(
19 | 'Hello World',
20 | )
21 | })
22 |
23 | await testStep('root element is not in the HTML', async () => {
24 | const response = await fetch(location.href)
25 | const text = await response.text()
26 | const node = document.createElement('div')
27 | node.innerHTML = text
28 | expect(
29 | node.querySelector('#root'),
30 | 'root element found in the HTML when it should not be',
31 | ).to.be.null
32 | })
33 |
--------------------------------------------------------------------------------
/exercises/04.components/02.problem.raw/README.mdx:
--------------------------------------------------------------------------------
1 | # Raw API
2 |
3 |
4 |
5 | 👨💼 So far we've only used `createElement('someString')`, but the first
6 | argument to `createElement` can also be a function which returns something
7 | that's renderable.
8 |
9 | So instead of calling your `message` function, pass it as the first argument to
10 | `createElement` and pass the `{children: 'Hello World'}` object as the
11 | second argument.
12 |
13 | ```ts
14 | createElement(
15 | someFunction,
16 | { prop1: 'value1', prop2: 'value2' },
17 | 'child1',
18 | 'child2',
19 | )
20 | ```
21 |
22 | Then `someFunction` will be called with the props object as the first argument
23 | and the children will appear as an array in the children property of the props
24 | object.
25 |
26 | ```ts
27 | function someFunction(props) {
28 | props.children // ['child1', 'child2']
29 | props.prop1 // 'value1'
30 | props.prop2 // 'value2'
31 | return // some jsx
32 | }
33 | ```
34 |
35 | So let's move from calling `message` directly to calling it through
36 | `createElement`.
37 |
--------------------------------------------------------------------------------
/exercises/05.typescript/01.solution.props/calculator.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 | const { screen } = dtl
3 |
4 | import './index.tsx'
5 |
6 | await testStep('Calculator h1 is rendered', () =>
7 | screen.findByText('Calculator'),
8 | )
9 |
10 | const calculators = await testStep('Code elements are rendered', async () => {
11 | const elements = await screen.findAllByRole('code')
12 | expect(elements).toHaveLength(4)
13 | return elements
14 | })
15 |
16 | const [add, subtract, multiply, divide] = calculators
17 |
18 | await testStep('Addition calculation is rendered correctly', async () => {
19 | expect(add).toHaveTextContent('1 + 2 = 3')
20 | })
21 |
22 | await testStep('Subtraction calculation is rendered correctly', async () => {
23 | expect(subtract).toHaveTextContent('1 - 2 = -1')
24 | })
25 |
26 | await testStep('Multiplication calculation is rendered correctly', async () => {
27 | expect(multiply).toHaveTextContent('1 * 2 = 2')
28 | })
29 |
30 | await testStep('Division calculation is rendered correctly', async () => {
31 | expect(divide).toHaveTextContent('1 / 2 = 0.5')
32 | })
33 |
--------------------------------------------------------------------------------
/exercises/05.typescript/02.solution.narrow/calculator.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 | const { screen } = dtl
3 |
4 | import './index.tsx'
5 |
6 | await testStep('Calculator h1 is rendered', () =>
7 | screen.findByText('Calculator'),
8 | )
9 |
10 | const calculators = await testStep('Code elements are rendered', async () => {
11 | const elements = await screen.findAllByRole('code')
12 | expect(elements).toHaveLength(4)
13 | return elements
14 | })
15 |
16 | const [add, subtract, multiply, divide] = calculators
17 |
18 | await testStep('Addition calculation is rendered correctly', async () => {
19 | expect(add).toHaveTextContent('1 + 2 = 3')
20 | })
21 |
22 | await testStep('Subtraction calculation is rendered correctly', async () => {
23 | expect(subtract).toHaveTextContent('1 - 2 = -1')
24 | })
25 |
26 | await testStep('Multiplication calculation is rendered correctly', async () => {
27 | expect(multiply).toHaveTextContent('1 * 2 = 2')
28 | })
29 |
30 | await testStep('Division calculation is rendered correctly', async () => {
31 | expect(divide).toHaveTextContent('1 / 2 = 0.5')
32 | })
33 |
--------------------------------------------------------------------------------
/exercises/05.typescript/03.solution.derive/calculator.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 | const { screen } = dtl
3 |
4 | import './index.tsx'
5 |
6 | await testStep('Calculator h1 is rendered', () =>
7 | screen.findByText('Calculator'),
8 | )
9 |
10 | const calculators = await testStep('Code elements are rendered', async () => {
11 | const elements = await screen.findAllByRole('code')
12 | expect(elements).toHaveLength(4)
13 | return elements
14 | })
15 |
16 | const [add, subtract, multiply, divide] = calculators
17 |
18 | await testStep('Addition calculation is rendered correctly', async () => {
19 | expect(add).toHaveTextContent('1 + 2 = 3')
20 | })
21 |
22 | await testStep('Subtraction calculation is rendered correctly', async () => {
23 | expect(subtract).toHaveTextContent('1 - 2 = -1')
24 | })
25 |
26 | await testStep('Multiplication calculation is rendered correctly', async () => {
27 | expect(multiply).toHaveTextContent('1 * 2 = 2')
28 | })
29 |
30 | await testStep('Division calculation is rendered correctly', async () => {
31 | expect(divide).toHaveTextContent('1 / 2 = 0.5')
32 | })
33 |
--------------------------------------------------------------------------------
/exercises/05.typescript/06.solution.satisfies/calculator.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 | const { screen } = dtl
3 |
4 | import './index.tsx'
5 |
6 | await testStep('Calculator h1 is rendered', () =>
7 | screen.findByText('Calculator'),
8 | )
9 |
10 | const calculators = await testStep('Code elements are rendered', async () => {
11 | const elements = await screen.findAllByRole('code')
12 | expect(elements).toHaveLength(4)
13 | return elements
14 | })
15 |
16 | const [add, subtract, multiply, divide] = calculators
17 |
18 | await testStep('Addition calculation is rendered correctly', async () => {
19 | expect(add).toHaveTextContent('1 + 2 = 3')
20 | })
21 |
22 | await testStep('Subtraction calculation is rendered correctly', async () => {
23 | expect(subtract).toHaveTextContent('0 - 0 = 0')
24 | })
25 |
26 | await testStep('Multiplication calculation is rendered correctly', async () => {
27 | expect(multiply).toHaveTextContent('1 * 0 = 0')
28 | })
29 |
30 | await testStep('Division calculation is rendered correctly', async () => {
31 | expect(divide).toHaveTextContent('0 / 2 = 0')
32 | })
33 |
--------------------------------------------------------------------------------
/exercises/05.typescript/04.solution.default-props/calculator.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 | const { screen } = dtl
3 |
4 | import './index.tsx'
5 |
6 | await testStep('Calculator h1 is rendered', () =>
7 | screen.findByText('Calculator'),
8 | )
9 |
10 | const calculators = await testStep('Code elements are rendered', async () => {
11 | const elements = await screen.findAllByRole('code')
12 | expect(elements).toHaveLength(4)
13 | return elements
14 | })
15 |
16 | const [add, subtract, multiply, divide] = calculators
17 |
18 | await testStep('Addition calculation is rendered correctly', async () => {
19 | expect(add).toHaveTextContent('1 + 2 = 3')
20 | })
21 |
22 | await testStep('Subtraction calculation is rendered correctly', async () => {
23 | expect(subtract).toHaveTextContent('0 - 0 = 0')
24 | })
25 |
26 | await testStep('Multiplication calculation is rendered correctly', async () => {
27 | expect(multiply).toHaveTextContent('1 * 0 = 0')
28 | })
29 |
30 | await testStep('Division calculation is rendered correctly', async () => {
31 | expect(divide).toHaveTextContent('0 / 2 = 0')
32 | })
33 |
--------------------------------------------------------------------------------
/exercises/05.typescript/05.solution.function-types/calculator.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 | const { screen } = dtl
3 |
4 | import './index.tsx'
5 |
6 | await testStep('Calculator h1 is rendered', () =>
7 | screen.findByText('Calculator'),
8 | )
9 |
10 | const calculators = await testStep('Code elements are rendered', async () => {
11 | const elements = await screen.findAllByRole('code')
12 | expect(elements).toHaveLength(4)
13 | return elements
14 | })
15 |
16 | const [add, subtract, multiply, divide] = calculators
17 |
18 | await testStep('Addition calculation is rendered correctly', async () => {
19 | expect(add).toHaveTextContent('1 + 2 = 3')
20 | })
21 |
22 | await testStep('Subtraction calculation is rendered correctly', async () => {
23 | expect(subtract).toHaveTextContent('0 - 0 = 0')
24 | })
25 |
26 | await testStep('Multiplication calculation is rendered correctly', async () => {
27 | expect(multiply).toHaveTextContent('1 * 0 = 0')
28 | })
29 |
30 | await testStep('Division calculation is rendered correctly', async () => {
31 | expect(divide).toHaveTextContent('0 / 2 = 0')
32 | })
33 |
--------------------------------------------------------------------------------
/exercises/04.components/01.problem.function/README.mdx:
--------------------------------------------------------------------------------
1 | # Simple Function
2 |
3 |
4 |
5 | 👨💼 The DOM we want to generate is like this:
6 |
7 | ```html
8 |
9 |
Hello World
10 |
Goodbye World
11 |
{children}
19 | ```
20 |
21 | So we need to make a function which accepts an object argument with a `children`
22 | property and returns the React element. Then you can interpolate a call to that
23 | function in your JSX.
24 |
25 | ```tsx
26 | {message('Hello World')}
27 | ```
28 |
29 | This is not how we write custom React components, but this is important for you
30 | to understand them. We'll get to custom components in the next steps.
31 |
32 | 📜 Read more
33 |
34 | - [JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)
35 | - [What is JSX?](https://kentcdodds.com/blog/what-is-jsx)
36 |
--------------------------------------------------------------------------------
/exercises/05.typescript/04.solution.default-props/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | const operations = {
4 | '+': (left: number, right: number): number => left + right,
5 | '-': (left: number, right: number): number => left - right,
6 | '*': (left: number, right: number): number => left * right,
7 | '/': (left: number, right: number): number => left / right,
8 | }
9 |
10 | type CalculatorProps = {
11 | left?: number
12 | operator?: keyof typeof operations
13 | right?: number
14 | }
15 | function Calculator({ left = 0, operator = '+', right = 0 }: CalculatorProps) {
16 | const result = operations[operator](left, right)
17 | return (
18 |
19 |
20 | {left} {operator} {right} =
21 |
22 |
23 | )
24 | }
25 |
26 | function App() {
27 | return (
28 |
29 |
Calculator
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | const rootEl = document.createElement('div')
39 | document.body.append(rootEl)
40 | createRoot(rootEl).render()
41 |
--------------------------------------------------------------------------------
/exercises/02.raw-react/01.solution.elements/index.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 |
3 | await testStep('"Hello World" is rendered to the DOM', async () => {
4 | const rootElement = document.getElementById('root')
5 | expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
6 |
7 | const element = await dtl.waitFor(
8 | async () => {
9 | const element = rootElement!.querySelector('.container')
10 | expect(element, 'container element not found').to.be.instanceOf(
11 | HTMLElement,
12 | )
13 | return element
14 | },
15 | { timeout: 5000 },
16 | )
17 |
18 | expect(element!.textContent, 'element text is not correct').to.equal(
19 | 'Hello World',
20 | )
21 | })
22 |
23 | await testStep('The DOM element is created by React', () => {
24 | const element = document.querySelector('#root .container')
25 | expect(element, 'element not found').to.be.instanceOf(HTMLElement)
26 | if (!element) return
27 |
28 | const reactKeys = Object.keys(element).filter((key) =>
29 | key.startsWith('__react'),
30 | )
31 | expect(
32 | reactKeys.length,
33 | 'element was not created by React',
34 | ).to.be.greaterThan(0)
35 | })
36 |
--------------------------------------------------------------------------------
/exercises/07.forms/02.problem.action/README.mdx:
--------------------------------------------------------------------------------
1 | # Form Action
2 |
3 |
4 |
5 | 🧝♂️ I've added some backend code that will handle our form submission. It's at
6 | `api/onboarding`. You can find it in .
7 |
8 |
9 | Note: the `api.server.ts` file is some magic from the Workshop app to make it
10 | so we can test things out with a backend server without having to actually set
11 | up a backend server. It's not something you'd use in a real app.
12 |
13 |
14 | 👨💼 Great! So we want the user's form submission to be sent along to
15 | `api/onboarding`. By default, when a form is submitted, the browser will send
16 | the form data to the current page's URL. We can change this by adding an
17 | `action` attribute to the form element:
18 |
19 | ```html
20 |
23 | ```
24 |
25 | Go ahead and add an `action` attribute to the form element.
26 |
27 |
28 | 🦉 You may notice a full page refresh when you submit the form. We'll talk
29 | about this in a future step.
30 |
31 |
--------------------------------------------------------------------------------
/exercises/05.typescript/06.solution.satisfies/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | type OperationFn = (left: number, right: number) => number
4 |
5 | const operations = {
6 | '+': (left, right) => left + right,
7 | '-': (left, right) => left - right,
8 | '*': (left, right) => left * right,
9 | '/': (left, right) => left / right,
10 | } satisfies Record
11 |
12 | type CalculatorProps = {
13 | left?: number
14 | operator?: keyof typeof operations
15 | right?: number
16 | }
17 | function Calculator({ left = 0, operator = '+', right = 0 }: CalculatorProps) {
18 | const result = operations[operator](left, right)
19 | return (
20 |
21 |
22 | {left} {operator} {right} =
23 |
24 |
25 | )
26 | }
27 |
28 | function App() {
29 | return (
30 |
31 |
Calculator
32 |
33 |
34 |
35 |
36 |
37 | )
38 | }
39 |
40 | const rootEl = document.createElement('div')
41 | document.body.append(rootEl)
42 | createRoot(rootEl).render()
43 |
--------------------------------------------------------------------------------
/exercises/06.styling/01.problem.style/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | // 🐨 add a className prop to each div and apply the correct class names
4 | // based on the text content
5 | // 💰 Here are the available class names: box, box--large, box--medium, box--small
6 | // 💰 each of the elements should have the "box" className applied
7 |
8 | // 🐨 add a style prop to each div so their background color
9 | // matches what the text says it should be
10 | // 🐨 also use the style prop to make the font italic
11 | // 💰 Here are available style attributes: backgroundColor, fontStyle
12 |
13 | const smallBox = small lightblue box
14 | const mediumBox = medium pink box
15 | const largeBox = large orange box
16 |
17 | // 💰 the sizelessColorlessBox should still be a box, just with no size or color
18 | const sizelessColorlessBox = sizeless colorless box
19 |
20 | function App() {
21 | return (
22 |
23 | {smallBox}
24 | {mediumBox}
25 | {largeBox}
26 | {sizelessColorlessBox}
27 |
28 | )
29 | }
30 |
31 | const rootEl = document.createElement('div')
32 | document.body.append(rootEl)
33 | createRoot(rootEl).render()
34 |
--------------------------------------------------------------------------------
/exercises/09.errors/02.problem.show-boundary/README.mdx:
--------------------------------------------------------------------------------
1 | # Other Errors
2 |
3 |
4 |
5 | 👨💼 Recall previously we learned that React doesn't catch all errors for you.
6 | We've got an error in our `onSubmit` handler like this. If you try to submit the
7 | form, you'll notice in the console that there's an error (someone made a typo
8 | 😅). The error looks something like:
9 |
10 | ```javascript
11 | Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
12 | ```
13 |
14 | Before we fix the typo, we want to give the user better feedback for when
15 | something like this happens (right now, they don't know it's not working and
16 | that's terribly annoying). So what I want you to do is wrap that callback in our
17 | own `try/catch` and then surface it to React using the `showBoundary` function
18 | you get when you call the `useErrorBoundary` utility:
19 |
20 | ```tsx
21 | import { useErrorBoundary } from 'react-error-boundary'
22 |
23 | // ... in the component
24 | const { showBoundary } = useErrorBoundary()
25 |
26 | // ... in the `catch` block
27 | showBoundary(error)
28 | ```
29 |
30 | So let's make that happen!
31 |
--------------------------------------------------------------------------------
/exercises/05.typescript/02.solution.narrow/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | const operations = {
4 | '+': (left: number, right: number): number => left + right,
5 | '-': (left: number, right: number): number => left - right,
6 | '*': (left: number, right: number): number => left * right,
7 | '/': (left: number, right: number): number => left / right,
8 | }
9 |
10 | type CalculatorProps = {
11 | left: number
12 | operator: '+' | '-' | '*' | '/'
13 | right: number
14 | }
15 | function Calculator({ left, operator, right }: CalculatorProps) {
16 | const result = operations[operator](left, right)
17 | return (
18 |
19 |
20 | {left} {operator} {right} =
21 |
22 |
23 | )
24 | }
25 |
26 | function App() {
27 | return (
28 |
29 |
Calculator
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | const rootEl = document.createElement('div')
39 | document.body.append(rootEl)
40 | createRoot(rootEl).render()
41 |
--------------------------------------------------------------------------------
/exercises/05.typescript/03.solution.derive/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | const operations = {
4 | '+': (left: number, right: number): number => left + right,
5 | '-': (left: number, right: number): number => left - right,
6 | '*': (left: number, right: number): number => left * right,
7 | '/': (left: number, right: number): number => left / right,
8 | }
9 |
10 | type CalculatorProps = {
11 | left: number
12 | operator: keyof typeof operations
13 | right: number
14 | }
15 | function Calculator({ left, operator, right }: CalculatorProps) {
16 | const result = operations[operator](left, right)
17 | return (
18 |
19 |
20 | {left} {operator} {right} =
21 |
22 |
23 | )
24 | }
25 |
26 | function App() {
27 | return (
28 |
29 |
Calculator
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | const rootEl = document.createElement('div')
39 | document.body.append(rootEl)
40 | createRoot(rootEl).render()
41 |
--------------------------------------------------------------------------------
/exercises/03.using-jsx/02.problem.interpolation/README.mdx:
--------------------------------------------------------------------------------
1 | # Interpolation
2 |
3 |
4 |
5 | 🦉 "Interpolation" is defined as "the insertion of something of a different
6 | nature into something else."
7 |
8 | Let's take template literals for example:
9 |
10 | ```typescript
11 | const greeting = 'Sup'
12 | const subject = 'World'
13 | const message = `${greeting} ${subject}`
14 | ```
15 |
16 | 👨💼 See if you can figure out how to extract the `className` (`"container"`) and
17 | `children` (`"Hello World"`) to variables and interpolate them in the JSX.
18 |
19 | ```tsx
20 | const className = 'container'
21 | const children = 'Hello World'
22 | const element = how do I make this work?
23 | ```
24 |
25 | 📜 The React docs for JSX are pretty good:
26 | [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
27 |
28 | Here are a few sections of particular interest for this step:
29 |
30 | - [JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)
31 | - [Passing strings with quotes](https://react.dev/learn/javascript-in-jsx-with-curly-braces#passing-strings-with-quotes)
32 |
--------------------------------------------------------------------------------
/exercises/05.typescript/05.solution.function-types/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | type OperationFn = (left: number, right: number) => number
4 | type Operator = '+' | '-' | '/' | '*'
5 | const operations: Record = {
6 | '+': (left, right) => left + right,
7 | '-': (left, right) => left - right,
8 | '*': (left, right) => left * right,
9 | '/': (left, right) => left / right,
10 | }
11 |
12 | type CalculatorProps = {
13 | left?: number
14 | operator?: keyof typeof operations
15 | right?: number
16 | }
17 | function Calculator({ left = 0, operator = '+', right = 0 }: CalculatorProps) {
18 | const result = operations[operator](left, right)
19 | return (
20 |
21 |
22 | {left} {operator} {right} =
23 |
24 |
25 | )
26 | }
27 |
28 | function App() {
29 | return (
30 |
31 |
Calculator
32 |
33 |
34 |
35 |
36 |
37 | )
38 | }
39 |
40 | const rootEl = document.createElement('div')
41 | document.body.append(rootEl)
42 | createRoot(rootEl).render()
43 |
--------------------------------------------------------------------------------
/exercises/09.errors/01.problem.composition/README.mdx:
--------------------------------------------------------------------------------
1 | # Composition
2 |
3 |
4 |
5 | 👨💼 You'll notice that right now our onboarding form isn't showing up at all.
6 | That's because someone made a typo... But errors like this could happen for any
7 | number of reasons (data issue, API version change, network error, etc.). So we
8 | should definitely handle errors in our app.
9 |
10 | Let's start by wrapping our existing `App` component in an Error Boundary to
11 | handle any errors. We're going to have you use the `FallbackComponent` prop on
12 | the `ErrorBoundary` so we can define our own `ErrorFallback` component.
13 |
14 | ```tsx
15 | {/*...*/}
16 | ```
17 |
18 | Right now we have an `App` component which we render using
19 | `createRoot(rootEl).render()`, so to get our stuff wrapped
20 | properly, we'll rename our existing `App` component (call it `OnboardingForm`) and
21 | then make a new `App` which renders the `ErrorBoundary` around the `OnboardingForm`
22 | component along with our `FallbackComponent` called `ErrorFallback` (which you
23 | also have to create).
24 |
25 | Get to it!
26 |
--------------------------------------------------------------------------------
/exercises/03.using-jsx/README.mdx:
--------------------------------------------------------------------------------
1 | # Using JSX
2 |
3 |
4 |
5 | JSX is more intuitive than the raw React API and is easier to understand when
6 | reading the code. It's fairly simple HTML-like syntactic sugar on top of the raw
7 | React APIs:
8 |
9 | ```tsx
10 | const element = Hey there
11 |
12 | // ↓ ↓ ↓ ↓ compiles to ↓ ↓ ↓ ↓
13 |
14 | const element = createElement('h1', {
15 | id: 'greeting',
16 | children: 'Hey there',
17 | })
18 | ```
19 |
20 | Because JSX is not actually JavaScript, you have to convert it using something
21 | called a code compiler. [Babel](https://babeljs.io) is one such tool.
22 |
23 |
24 | 🦉 Pro tip: If you'd like to see how JSX gets compiled to JavaScript, [check
25 | out the online babel REPL
26 | here](https://babeljs.io/repl#?builtIns=App&code_lz=MYewdgzgLgBArgSxgXhgHgCYIG4D40QAOAhmLgBICmANtSGgPRGm7rNkDqIATtRo-3wMseAFBA&presets=react&prettier=true).
27 |
28 |
29 | If you can train your brain to look at JSX and see the compiled version of that
30 | code, you'll be MUCH more effective at reading and using it! I strongly
31 | recommend you give this some intentional practice.
32 |
--------------------------------------------------------------------------------
/exercises/04.components/README.mdx:
--------------------------------------------------------------------------------
1 | # Custom Components
2 |
3 |
4 |
5 | Just like in regular JavaScript, when you want to reuse code, you write
6 | functions. If you want to share JSX, you can do that as well. In React we call
7 | these functions "components" and they have some special properties.
8 |
9 | Components are functions which accept an object called "props" and return
10 | something that is renderable (more React elements, strings, `null`, numbers,
11 | etc.). To be clear, this is _the_ definition of a React component. That's all it
12 | is. So I'll say it
13 | [again](https://twitter.com/kentcdodds/status/1763606427028136131):
14 |
15 | > Components are functions which accept an object called "props" and return
16 | > something that is renderable
17 |
18 | Here's an example of that:
19 |
20 | ```tsx
21 | function Greeting(props) {
22 | return Hello, {props.name}
23 | }
24 | ```
25 |
26 | Then that component can be used like this:
27 |
28 | ```tsx
29 |
30 | ```
31 |
32 | Just like previous exercises, we're going to ease into this syntax so you have a
33 | solid foundational understanding of how this works.
34 |
--------------------------------------------------------------------------------
/exercises/05.typescript/01.solution.props/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | const operations = {
4 | '+': (left: number, right: number): number => left + right,
5 | '-': (left: number, right: number): number => left - right,
6 | '*': (left: number, right: number): number => left * right,
7 | '/': (left: number, right: number): number => left / right,
8 | }
9 |
10 | type CalculatorProps = {
11 | left: number
12 | operator: string
13 | right: number
14 | }
15 | function Calculator({ left, operator, right }: CalculatorProps) {
16 | // @ts-expect-error we'll fix this one later
17 | const result = operations[operator](left, right)
18 | return (
19 |
20 |
21 | {left} {operator} {right} =
22 |
23 |
24 | )
25 | }
26 |
27 | function App() {
28 | return (
29 |
30 |
Calculator
31 |
32 |
33 |
34 |
35 |
36 | )
37 | }
38 |
39 | const rootEl = document.createElement('div')
40 | document.body.append(rootEl)
41 | createRoot(rootEl).render()
42 |
--------------------------------------------------------------------------------
/exercises/07.forms/03.solution.types/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 |
3 | function App() {
4 | return (
5 |
32 | )
33 | }
34 |
35 | const rootEl = document.createElement('div')
36 | document.body.append(rootEl)
37 | createRoot(rootEl).render()
38 |
--------------------------------------------------------------------------------
/exercises/03.using-jsx/05.solution.fragments/content.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
2 |
3 | await testStep('Proper elements are rendered to the DOM', async () => {
4 | const rootElement = document.getElementById('root')
5 | expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
6 | if (!rootElement) return
7 |
8 | const element = rootElement
9 |
10 | const p = await dtl.waitFor(
11 | async () => {
12 | const p = element.querySelector('p')
13 | expect(p, ' not found').to.be.instanceOf(HTMLElement)
14 | return p
15 | },
16 | { timeout: 5000 },
17 | )
18 |
19 | const ul = element.querySelector('ul')
20 | expect(ul, '
not found').to.be.instanceOf(HTMLElement)
21 | expect(ul).to.have.class('sams-food')
22 | const lis = element.querySelectorAll('li')
23 | expect(lis, '- elements not found').to.have.length(2)
24 |
25 | expect(p!.textContent, 'p text is not correct').to.equal(
26 | "Here's Sam's favorite food:",
27 | )
28 |
29 | const [greenEggs, ham] = ul!.querySelectorAll('li')
30 |
31 | expect(greenEggs?.textContent, 'green eggs text is not correct').to.equal(
32 | 'Green eggs',
33 | )
34 | expect(ham?.textContent, 'ham text is not correct').to.equal('Ham')
35 | })
36 |
--------------------------------------------------------------------------------
/exercises/08.inputs/03.problem.radio/README.mdx:
--------------------------------------------------------------------------------
1 | # Radios
2 |
3 |
4 |
5 | 👨💼 We need to allow the user to select the visibility of the account. It can be
6 | either Public or Private. We could use a `