remove old import syntax

epicweb-dev · Mar 28, 2024 · c57c0af · c57c0af
1 parent 3313756
commit c57c0af
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 46 deletions.
diff --git a/exercises/01.composition/README.mdx b/exercises/01.composition/README.mdx
@@ -24,7 +24,7 @@ function Message({ greeting }) {
 }
 
 function Counter() {
-	const [count, setCount] = React.useState(0)
+	const [count, setCount] = useState(0)
 	const increment = () => setCount(c => c + 1)
 	return (
 		<div>
@@ -51,7 +51,7 @@ function Message({ greeting }) {
 const message = <Message greeting="Hello!" />
 
 function Counter() {
-	const [count, setCount] = React.useState(0)
+	const [count, setCount] = useState(0)
 	const increment = () => setCount(c => c + 1)
 	return (
 		<div>

diff --git a/exercises/04.code-splitting/01.problem.lazy/src/globe.tsx b/exercises/04.code-splitting/01.problem.lazy/src/globe.tsx
@@ -1,6 +1,6 @@
 import { useWheel } from '@use-gesture/react'
 import { type GeoPermissibleObjects, geoOrthographic, geoPath } from 'd3-geo'
-import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSpring, animated } from 'react-spring'
 import { feature } from 'topojson-client'
 import jsonData from './countries-110m.json'
@@ -24,8 +24,8 @@ const Globe = animated(
 		onGlobeClick: (lat: number, lng: number) => void
 		currentLocation: { userLat: number; userLng: number }
 	}) => {
-		const svgref = React.useRef<SVGSVGElement>(null)
-		const projection = React.useMemo(() => {
+		const svgref = useRef<SVGSVGElement>(null)
+		const projection = useMemo(() => {
 			return geoOrthographic()
 				.translate([size / 2, size / 2])
 				.scale((size / 2) * zoom)
@@ -110,14 +110,14 @@ const Globe = animated(
 )
 
 function GlobeContainer({ size = 400 }) {
-	const [state, setState] = React.useState({
+	const [state, setState] = useState({
 		lat: 0,
 		lng: 0,
 		userLat: 0,
 		userLng: 0,
 	})
 
-	React.useEffect(() => {
+	useEffect(() => {
 		navigator.geolocation.getCurrentPosition(position =>
 			setState({
 				userLng: position.coords.longitude,
@@ -135,12 +135,12 @@ function GlobeContainer({ size = 400 }) {
 	})
 
 	// Zooming (use cmd/ctrl + scroll to zoom)
-	const [zoom, setZoom] = React.useState({
+	const [zoom, setZoom] = useState({
 		wheeling: false,
 		scale: 1,
 	})
 
-	const canvasRef = React.useRef<HTMLDivElement>(null)
+	const canvasRef = useRef<HTMLDivElement>(null)
 
 	const bind = useWheel(
 		({ wheeling, metaKey, delta: [_deltaX, deltaY], event }) => {

diff --git a/exercises/04.code-splitting/01.solution.lazy/src/globe.tsx b/exercises/04.code-splitting/01.solution.lazy/src/globe.tsx
@@ -1,6 +1,6 @@
 import { useWheel } from '@use-gesture/react'
 import { type GeoPermissibleObjects, geoOrthographic, geoPath } from 'd3-geo'
-import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSpring, animated } from 'react-spring'
 import { feature } from 'topojson-client'
 import jsonData from './countries-110m.json'
@@ -24,8 +24,8 @@ const Globe = animated(
 		onGlobeClick: (lat: number, lng: number) => void
 		currentLocation: { userLat: number; userLng: number }
 	}) => {
-		const svgref = React.useRef<SVGSVGElement>(null)
-		const projection = React.useMemo(() => {
+		const svgref = useRef<SVGSVGElement>(null)
+		const projection = useMemo(() => {
 			return geoOrthographic()
 				.translate([size / 2, size / 2])
 				.scale((size / 2) * zoom)
@@ -110,14 +110,14 @@ const Globe = animated(
 )
 
 function GlobeContainer({ size = 400 }) {
-	const [state, setState] = React.useState({
+	const [state, setState] = useState({
 		lat: 0,
 		lng: 0,
 		userLat: 0,
 		userLng: 0,
 	})
 
-	React.useEffect(() => {
+	useEffect(() => {
 		navigator.geolocation.getCurrentPosition(position =>
 			setState({
 				userLng: position.coords.longitude,
@@ -135,12 +135,12 @@ function GlobeContainer({ size = 400 }) {
 	})
 
 	// Zooming (use cmd/ctrl + scroll to zoom)
-	const [zoom, setZoom] = React.useState({
+	const [zoom, setZoom] = useState({
 		wheeling: false,
 		scale: 1,
 	})
 
-	const canvasRef = React.useRef<HTMLDivElement>(null)
+	const canvasRef = useRef<HTMLDivElement>(null)
 
 	const bind = useWheel(
 		({ wheeling, metaKey, delta: [_deltaX, deltaY], event }) => {

diff --git a/exercises/04.code-splitting/02.problem.eager/src/globe.tsx b/exercises/04.code-splitting/02.problem.eager/src/globe.tsx
@@ -1,6 +1,6 @@
 import { useWheel } from '@use-gesture/react'
 import { type GeoPermissibleObjects, geoOrthographic, geoPath } from 'd3-geo'
-import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSpring, animated } from 'react-spring'
 import { feature } from 'topojson-client'
 import jsonData from './countries-110m.json'
@@ -24,8 +24,8 @@ const Globe = animated(
 		onGlobeClick: (lat: number, lng: number) => void
 		currentLocation: { userLat: number; userLng: number }
 	}) => {
-		const svgref = React.useRef<SVGSVGElement>(null)
-		const projection = React.useMemo(() => {
+		const svgref = useRef<SVGSVGElement>(null)
+		const projection = useMemo(() => {
 			return geoOrthographic()
 				.translate([size / 2, size / 2])
 				.scale((size / 2) * zoom)
@@ -110,14 +110,14 @@ const Globe = animated(
 )
 
 function GlobeContainer({ size = 400 }) {
-	const [state, setState] = React.useState({
+	const [state, setState] = useState({
 		lat: 0,
 		lng: 0,
 		userLat: 0,
 		userLng: 0,
 	})
 
-	React.useEffect(() => {
+	useEffect(() => {
 		navigator.geolocation.getCurrentPosition(position =>
 			setState({
 				userLng: position.coords.longitude,
@@ -135,12 +135,12 @@ function GlobeContainer({ size = 400 }) {
 	})
 
 	// Zooming (use cmd/ctrl + scroll to zoom)
-	const [zoom, setZoom] = React.useState({
+	const [zoom, setZoom] = useState({
 		wheeling: false,
 		scale: 1,
 	})
 
-	const canvasRef = React.useRef<HTMLDivElement>(null)
+	const canvasRef = useRef<HTMLDivElement>(null)
 
 	const bind = useWheel(
 		({ wheeling, metaKey, delta: [_deltaX, deltaY], event }) => {

diff --git a/exercises/04.code-splitting/02.solution.eager/src/globe.tsx b/exercises/04.code-splitting/02.solution.eager/src/globe.tsx
@@ -1,6 +1,6 @@
 import { useWheel } from '@use-gesture/react'
 import { type GeoPermissibleObjects, geoOrthographic, geoPath } from 'd3-geo'
-import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSpring, animated } from 'react-spring'
 import { feature } from 'topojson-client'
 import jsonData from './countries-110m.json'
@@ -24,8 +24,8 @@ const Globe = animated(
 		onGlobeClick: (lat: number, lng: number) => void
 		currentLocation: { userLat: number; userLng: number }
 	}) => {
-		const svgref = React.useRef<SVGSVGElement>(null)
-		const projection = React.useMemo(() => {
+		const svgref = useRef<SVGSVGElement>(null)
+		const projection = useMemo(() => {
 			return geoOrthographic()
 				.translate([size / 2, size / 2])
 				.scale((size / 2) * zoom)
@@ -110,14 +110,14 @@ const Globe = animated(
 )
 
 function GlobeContainer({ size = 400 }) {
-	const [state, setState] = React.useState({
+	const [state, setState] = useState({
 		lat: 0,
 		lng: 0,
 		userLat: 0,
 		userLng: 0,
 	})
 
-	React.useEffect(() => {
+	useEffect(() => {
 		navigator.geolocation.getCurrentPosition(position =>
 			setState({
 				userLng: position.coords.longitude,
@@ -135,12 +135,12 @@ function GlobeContainer({ size = 400 }) {
 	})
 
 	// Zooming (use cmd/ctrl + scroll to zoom)
-	const [zoom, setZoom] = React.useState({
+	const [zoom, setZoom] = useState({
 		wheeling: false,
 		scale: 1,
 	})
 
-	const canvasRef = React.useRef<HTMLDivElement>(null)
+	const canvasRef = useRef<HTMLDivElement>(null)
 
 	const bind = useWheel(
 		({ wheeling, metaKey, delta: [_deltaX, deltaY], event }) => {

diff --git a/exercises/04.code-splitting/03.problem.transition/src/globe.tsx b/exercises/04.code-splitting/03.problem.transition/src/globe.tsx
@@ -1,6 +1,6 @@
 import { useWheel } from '@use-gesture/react'
 import { type GeoPermissibleObjects, geoOrthographic, geoPath } from 'd3-geo'
-import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSpring, animated } from 'react-spring'
 import { feature } from 'topojson-client'
 import jsonData from './countries-110m.json'
@@ -24,8 +24,8 @@ const Globe = animated(
 		onGlobeClick: (lat: number, lng: number) => void
 		currentLocation: { userLat: number; userLng: number }
 	}) => {
-		const svgref = React.useRef<SVGSVGElement>(null)
-		const projection = React.useMemo(() => {
+		const svgref = useRef<SVGSVGElement>(null)
+		const projection = useMemo(() => {
 			return geoOrthographic()
 				.translate([size / 2, size / 2])
 				.scale((size / 2) * zoom)
@@ -110,14 +110,14 @@ const Globe = animated(
 )
 
 function GlobeContainer({ size = 400 }) {
-	const [state, setState] = React.useState({
+	const [state, setState] = useState({
 		lat: 0,
 		lng: 0,
 		userLat: 0,
 		userLng: 0,
 	})
 
-	React.useEffect(() => {
+	useEffect(() => {
 		navigator.geolocation.getCurrentPosition(position =>
 			setState({
 				userLng: position.coords.longitude,
@@ -135,12 +135,12 @@ function GlobeContainer({ size = 400 }) {
 	})
 
 	// Zooming (use cmd/ctrl + scroll to zoom)
-	const [zoom, setZoom] = React.useState({
+	const [zoom, setZoom] = useState({
 		wheeling: false,
 		scale: 1,
 	})
 
-	const canvasRef = React.useRef<HTMLDivElement>(null)
+	const canvasRef = useRef<HTMLDivElement>(null)
 
 	const bind = useWheel(
 		({ wheeling, metaKey, delta: [_deltaX, deltaY], event }) => {

diff --git a/exercises/04.code-splitting/03.solution.transition/src/globe.tsx b/exercises/04.code-splitting/03.solution.transition/src/globe.tsx
@@ -1,6 +1,6 @@
 import { useWheel } from '@use-gesture/react'
 import { type GeoPermissibleObjects, geoOrthographic, geoPath } from 'd3-geo'
-import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSpring, animated } from 'react-spring'
 import { feature } from 'topojson-client'
 import jsonData from './countries-110m.json'
@@ -24,8 +24,8 @@ const Globe = animated(
 		onGlobeClick: (lat: number, lng: number) => void
 		currentLocation: { userLat: number; userLng: number }
 	}) => {
-		const svgref = React.useRef<SVGSVGElement>(null)
-		const projection = React.useMemo(() => {
+		const svgref = useRef<SVGSVGElement>(null)
+		const projection = useMemo(() => {
 			return geoOrthographic()
 				.translate([size / 2, size / 2])
 				.scale((size / 2) * zoom)
@@ -110,14 +110,14 @@ const Globe = animated(
 )
 
 function GlobeContainer({ size = 400 }) {
-	const [state, setState] = React.useState({
+	const [state, setState] = useState({
 		lat: 0,
 		lng: 0,
 		userLat: 0,
 		userLng: 0,
 	})
 
-	React.useEffect(() => {
+	useEffect(() => {
 		navigator.geolocation.getCurrentPosition(position =>
 			setState({
 				userLng: position.coords.longitude,
@@ -135,12 +135,12 @@ function GlobeContainer({ size = 400 }) {
 	})
 
 	// Zooming (use cmd/ctrl + scroll to zoom)
-	const [zoom, setZoom] = React.useState({
+	const [zoom, setZoom] = useState({
 		wheeling: false,
 		scale: 1,
 	})
 
-	const canvasRef = React.useRef<HTMLDivElement>(null)
+	const canvasRef = useRef<HTMLDivElement>(null)
 
 	const bind = useWheel(
 		({ wheeling, metaKey, delta: [_deltaX, deltaY], event }) => {

diff --git a/exercises/05.calculations/README.mdx b/exercises/05.calculations/README.mdx
@@ -26,7 +26,7 @@ This is why we have the `useMemo` hook from React:
 
 ```tsx
 function Distance({ x, y }) {
-	const distance = React.useMemo(() => calculateDistance(x, y), [x, y])
+	const distance = useMemo(() => calculateDistance(x, y), [x, y])
 	return (
 		<div>
 			The distance between {x} and {y} is {distance}.

diff --git a/exercises/07.windowing/README.mdx b/exercises/07.windowing/README.mdx
@@ -63,7 +63,7 @@ function MyListOfData({ items }) {
 ```tsx
 // after
 function MyListOfData({ items }) {
-	const listRef = React.useRef()
+	const listRef = useRef()
 	const rowVirtualizer = useVirtualizer({
 		size: items.length,
 		getScrollElement: () => listRef.current,