chore: update React imports

src/__tests__/01.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {render, screen, waitForElementToBeRemoved} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as userClient from '../user-client'

src/__tests__/02.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {renderToggle} from '../../test/utils'
 import App from '../final/02'
 // import App from '../exercise/02'

src/__tests__/03.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {renderToggle} from '../../test/utils'
 import App from '../final/03'
 // import App from '../exercise/03'

src/__tests__/04.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {renderToggle, screen, userEvent} from '../../test/utils'
 import App from '../final/04'
 // import App from '../exercise/04'

src/__tests__/05.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {renderToggle, screen, userEvent} from '../../test/utils'
 import App from '../final/05'
 // import App from '../exercise/05'

src/__tests__/06.extra-4.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {alfredTip} from '@kentcdodds/react-workshop-app/test-utils'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

src/__tests__/06.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {renderToggle, screen, userEvent} from '../../test/utils'
 import App, {Toggle} from '../final/06'
 // import App, {Toggle} from '../exercise/06'

src/auth-context.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 // normally this is going to implement a similar pattern
 // learn more here: https://kcd.im/auth

src/examples/counter-after.js

@@ -1,6 +1,6 @@
 // http://localhost:3000/isolated/examples/counter-after.js
 
-import React from 'react'
+import * as React from 'react'
 
 // src/context/counter.js
 const CounterContext = React.createContext()

src/examples/counter-before.js

@@ -1,6 +1,6 @@
 // http://localhost:3000/isolated/examples/counter-before.js
 
-import React from 'react'
+import * as React from 'react'
 
 // src/context/counter.js
 const CounterContext = React.createContext()

src/examples/warnings.js

@@ -1,6 +1,6 @@
 // http://localhost:3000/isolated/examples/warnings.js
 
-import React from 'react'
+import * as React from 'react'
 
 function App() {
   const [name, setName] = React.useState()

src/exercise/01.js

@@ -1,7 +1,7 @@
 // Context Module Functions
 // http://localhost:3000/isolated/exercise/01.js
 
-import React from 'react'
+import * as React from 'react'
 import {dequal} from 'dequal'
 
 // ./context/user-context.js

src/exercise/02.js

@@ -1,7 +1,7 @@
 // Compound Components
 // http://localhost:3000/isolated/exercise/02.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 function Toggle() {

src/exercise/03.js

@@ -1,7 +1,7 @@
 // Flexible Compound Components
 // http://localhost:3000/isolated/exercise/03.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 // 🐨 create your ToggleContext context here

src/exercise/04.js

@@ -1,7 +1,7 @@
 // Prop Collections and Getters
 // http://localhost:3000/isolated/exercise/04.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 function useToggle() {

src/exercise/05.js

@@ -1,7 +1,7 @@
 // State Reducer
 // http://localhost:3000/isolated/exercise/05.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

src/exercise/06.js

@@ -1,7 +1,7 @@
 // Control Props
 // http://localhost:3000/isolated/exercise/06.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

src/final/01.js

@@ -1,7 +1,7 @@
 // Context Module Functions
 // http://localhost:3000/isolated/final/01.js
 
-import React from 'react'
+import * as React from 'react'
 import {dequal} from 'dequal'
 
 // ./context/user-context.js

src/final/02.extra-1.js

@@ -2,7 +2,7 @@
 // 💯 Support non-toggle children
 // http://localhost:3000/isolated/final/02.extra-1.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 function Toggle({children}) {

src/final/02.js

@@ -1,7 +1,7 @@
 // Compound Components
 // http://localhost:3000/isolated/final/02.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 function Toggle({children}) {

src/final/03.extra-1.js

@@ -2,7 +2,7 @@
 // 💯 custom hook validation
 // http://localhost:3000/isolated/final/03.extra-1.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const ToggleContext = React.createContext()

src/final/03.js

@@ -1,7 +1,7 @@
 // Flexible Compound Components with context
 // http://localhost:3000/isolated/final/03.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const ToggleContext = React.createContext()

src/final/04.extra-1.js

@@ -2,7 +2,7 @@
 // 💯 prop getters
 // http://localhost:3000/isolated/final/04.extra-1.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

src/final/04.js

@@ -1,7 +1,7 @@
 // Prop Collections and Getters
 // http://localhost:3000/isolated/final/04.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 function useToggle() {

src/final/05.extra-1.js

@@ -2,7 +2,7 @@
 // 💯 default state reducer
 // http://localhost:3000/isolated/final/05.extra-1.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

src/final/05.extra-2.js

@@ -2,7 +2,7 @@
 // 💯 state reducer action types
 // http://localhost:3000/isolated/final/05.extra-2.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

src/final/05.js

@@ -1,7 +1,7 @@
 // state reducer
 // http://localhost:3000/isolated/final/05.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

src/final/06.extra-1.js

@@ -2,7 +2,7 @@
 // 💯 add read only warning
 // http://localhost:3000/isolated/final/06.extra-1.js
 
-import React from 'react'
+import * as React from 'react'
 import warning from 'warning'
 import {Switch} from '../switch'
 

src/final/06.extra-2.js

@@ -2,7 +2,7 @@
 // 💯 add a controlled state warning
 // http://localhost:3000/isolated/final/06.extra-2.js
 
-import React from 'react'
+import * as React from 'react'
 import warning from 'warning'
 import {Switch} from '../switch'
 

src/final/06.extra-3.js

@@ -2,7 +2,7 @@
 // 💯 extract warnings to a custom hook
 // http://localhost:3000/isolated/final/06.extra-3.js
 
-import React from 'react'
+import * as React from 'react'
 import warning from 'warning'
 import {Switch} from '../switch'
 

src/final/06.extra-4.js

@@ -2,7 +2,7 @@
 // 💯 don't warn in production
 // http://localhost:3000/isolated/final/06.extra-4.js
 
-import React from 'react'
+import * as React from 'react'
 import warning from 'warning'
 import {Switch} from '../switch'
 

src/final/06.js

@@ -1,7 +1,7 @@
 // Control Props
 // http://localhost:3000/isolated/final/06.js
 
-import React from 'react'
+import * as React from 'react'
 import {Switch} from '../switch'
 
 const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

src/switch.js

@@ -1,5 +1,5 @@
 import './switch.styles.css'
-import React from 'react'
+import * as React from 'react'
 
 // STOP! You should not have to change anything in this file to
 // make it through the workshop. If tests are failing because of

test/utils.js

@@ -1,7 +1,7 @@
 import {alfredTip} from '@kentcdodds/react-workshop-app/test-utils'
 import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import React from 'react'
+import * as React from 'react'
 import {
   findAllInRenderedTree,
   isCompositeComponentWithType,