Skip to content

Commit c23a75b

Browse files
kentcdoddskentcdodds
authored
upgrade to react 18 (epicweb-dev#257)
1 parent 30e74d0 commit c23a75b

24 files changed

+31707
-6912
lines changed

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
registry=https://registry.npmjs.org/
22
package-lock=true
33
yes=true
4+
legacy-peer-deps=true

‎README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</strong>
77
<p>
88
Learn everything you need to be effective with the fundamental building
9-
block of React applications. When you’re finished, you’ll be prepared to
9+
block of React applications. When you're finished, you'll be prepared to
1010
create React components to build excellent experiences for your app's users.
1111
</p>
1212

@@ -36,6 +36,10 @@
3636
(recommended),
3737
[Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/))
3838

39+
> NOTE: The EpicReact.dev videos were recorded with React version ^16.13 and all
40+
> material in this repo has been updated to React version ^18. Differences are
41+
> minor and any relevant differences are noted in the instructions.
42+
3943
## System Requirements
4044

4145
- [git][git] v2.13 or greater

‎package-lock.json

Lines changed: 31614 additions & 6842 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@
1414
"npm": ">=6"
1515
},
1616
"dependencies": {
17-
"@kentcdodds/react-workshop-app": "^4.3.0",
18-
"@testing-library/react": "^12.1.2",
19-
"@testing-library/user-event": "^13.5.0",
20-
"@types/react": "^17.0.34",
21-
"@types/react-dom": "^17.0.11",
17+
"@kentcdodds/react-workshop-app": "^5.0.0",
18+
"@testing-library/react": "^13.0.1",
19+
"@testing-library/user-event": "^14.1.0",
20+
"@types/react": "^18.0.4",
21+
"@types/react-dom": "^18.0.0",
2222
"chalk": "^4.1.2",
2323
"codegen.macro": "^4.1.0",
24-
"react": "^17.0.2",
25-
"react-dom": "^17.0.2"
24+
"react": "^18.0.0",
25+
"react-dom": "^18.0.0"
2626
},
2727
"devDependencies": {
2828
"husky": "^4.3.8",

‎src/__tests__/05.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {render, screen, prettyDOM} from '@testing-library/react'
44
import App from '../final/05'
55
// import App from '../exercise/05'
66

7-
test('renders the correct styles new', () => {
7+
test('renders the correct styles new', async () => {
88
render(<App />)
99
const allBoxes = screen.getAllByText(/box/i)
1010

‎src/__tests__/06.extra-2.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ beforeEach(() => {
1313
global.alert.mockClear()
1414
})
1515

16-
test('calls the onSubmitUsername handler when the submit is fired', () => {
16+
test('calls the onSubmitUsername handler when the submit is fired', async () => {
1717
render(<App />)
1818
const input = screen.getByLabelText(/username/i)
1919
const submit = screen.getByText(/submit/i)
2020

2121
let value = 'A'
22-
userEvent.type(input, value)
22+
await userEvent.type(input, value)
2323
expect(submit).toBeDisabled() // upper-case
2424

2525
const output = screen.getByText(/lower\s?case/i)
@@ -28,10 +28,10 @@ test('calls the onSubmitUsername handler when the submit is fired', () => {
2828
output.getAttribute('role') !== 'alert',
2929
'Add an attribute `role="alert"` to the div to help with screen reader users.',
3030
)
31-
userEvent.clear(input)
31+
await userEvent.clear(input)
3232
value = 'a'
33-
userEvent.type(input, value)
34-
userEvent.click(submit)
33+
await userEvent.type(input, value)
34+
await userEvent.click(submit)
3535

3636
expect(global.alert).toHaveBeenCalledWith(`You entered: ${input.value}`)
3737
expect(global.alert).toHaveBeenCalledTimes(1)

‎src/__tests__/06.extra-3.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ beforeEach(() => {
1212
global.alert.mockClear()
1313
})
1414

15-
test('calls the onSubmitUsername handler when the submit is fired', () => {
15+
test('calls the onSubmitUsername handler when the submit is fired', async () => {
1616
render(<App />)
1717
const input = screen.getByLabelText(/username/i)
1818
const submit = screen.getByText(/submit/i)
1919

2020
const value = 'A'
21-
userEvent.type(input, value)
21+
await userEvent.type(input, value)
2222
expect(input.value).toBe('a')
23-
userEvent.click(submit)
23+
await userEvent.click(submit)
2424

2525
expect(global.alert).toHaveBeenCalledWith(`You entered: ${input.value}`)
2626
expect(global.alert).toHaveBeenCalledTimes(1)

‎src/__tests__/06.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ beforeEach(() => {
1212
global.alert.mockClear()
1313
})
1414

15-
test('calls the onSubmitUsername handler when the submit is fired', () => {
15+
test('calls the onSubmitUsername handler when the submit is fired', async () => {
1616
render(<App />)
1717
const input = screen.getByLabelText(/username/i)
1818
const submit = screen.getByText(/submit/i)
1919

2020
const username = 'jenny'
2121

22-
userEvent.type(input, username)
23-
userEvent.click(submit)
22+
await userEvent.type(input, username)
23+
await userEvent.click(submit)
2424

2525
expect(global.alert).toHaveBeenCalledWith(`You entered: ${username}`)
2626
expect(global.alert).toHaveBeenCalledTimes(1)

‎src/__tests__/07.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ import userEvent from '@testing-library/user-event'
44
import App from '../final/07'
55
// import App from '../exercise/07'
66

7-
test('renders', () => {
7+
test('renders', async () => {
88
const {container} = render(<App />)
99
const plus = screen.getByText(/add item/i)
10-
userEvent.click(plus)
11-
userEvent.click(plus)
12-
userEvent.click(plus)
13-
userEvent.click(plus)
10+
await userEvent.click(plus)
11+
await userEvent.click(plus)
12+
await userEvent.click(plus)
13+
await userEvent.click(plus)
1414

1515
const orangeInput = screen.getByLabelText(/orange/i)
1616
const orangeContainer = screen.getByText(/orange/i).closest('li')
1717
const inOrange = within(orangeContainer)
18-
userEvent.type(orangeInput, 'sup dawg')
19-
userEvent.click(inOrange.getByText('remove'))
18+
await userEvent.type(orangeInput, 'sup dawg')
19+
await userEvent.click(inOrange.getByText('remove'))
2020

2121
const allLis = container.querySelectorAll('li')
2222
Array.from(allLis).forEach(li => {

‎src/exercise/02.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
<!-- 🐨 add React and ReactDOM on the page.
88
💰 Here are script tags that'll do the job:
9-
<script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
10-
<script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
9+
<script src="https://unpkg.com/react@18.0.0/umd/react.development.js"></script>
10+
<script src="https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js"></script>
1111
-->
1212

1313
<script type="module">
@@ -19,7 +19,7 @@
1919
const element = document.createElement('div')
2020
element.textContent = 'Hello World' // 💰 in React, you set this with the "children" prop
2121
element.className = 'container' // 💰 in React, this is also called the "className" prop
22-
// This is similar to ReactDOM.render
22+
// This is similar to ReactDOM.createRoot().render()
2323
rootElement.append(element)
2424

2525
// 🐨 Please re-implement the regular document.createElement code above

0 commit comments

Comments
 (0)