Merge pull request #102 from Dagur/upgrade-to-react-18

Upgrade to React 18

Author: marnusw

package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "eslint": "^7.18.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",

packages/demo/package.json

@@ -10,12 +10,12 @@
     "postbuild": "rimraf ../../gh-pages/static && cp -r build/* ../../gh-pages && rimraf build"
   },
   "dependencies": {
-    "react": "^16.9.0",
-    "react-bootstrap": "^0.32.4",
+    "react": "^18.2.0",
+    "react-bootstrap": "^0.33.1",
     "react-css-transition-replace": "*",
-    "react-dom": "^16.9.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.1.2"
+    "react-scripts": "5.0.1"
   },
   "eslintConfig": {
     "extends": "react-app"

packages/demo/src/Demo.js

@@ -12,9 +12,14 @@ import AnimatedRouter from './components/AnimatedRouter'
 import ContentLong from './components/ContentLong'
 import ContentShort from './components/ContentShort'
 
+import vista1 from './img/vista1.jpg'
+import vista2 from './img/vista2.jpg'
+import vista3 from './img/vista3.jpg'
+import vista4 from './img/vista4.jpg'
+
 class Demo extends React.Component {
   componentDidMount() {
-    const images = ['img/vista1.jpg', 'img/vista2.jpg', 'img/vista3.jpg', 'img/vista4.jpg']
+    const images = [vista1, vista2, vista3, vista4]
 
     images.forEach((src) => {
       const img = new window.Image()
@@ -66,8 +71,8 @@ class Demo extends React.Component {
               transitionEnterTimeout={1000}
               transitionLeaveTimeout={1000}
             >
-              <img key="img1" src="img/vista1.jpg" width="600" height="235" alt="" />
-              <img key="img2" src="img/vista2.jpg" width="600" height="280" alt="" />
+              <img key="img1" src={vista1} width="600" height="235" alt="" />
+              <img key="img2" src={vista2} width="600" height="280" alt="" />
             </ContentSwapper>
 
             <h3 id="fade-wait">Fade out, then fade in transition</h3>
@@ -131,9 +136,9 @@ class Demo extends React.Component {
               transitionLeaveTimeout={2000}
               style={{ width: 600 }}
             >
-              <img key="img1" src="img/vista3.jpg" width="600" height="255" alt="" />
-              <img key="img2" src="img/vista4.jpg" width="600" height="280" alt="" />
-              <img key="img3" src="img/vista2.jpg" width="600" height="290" alt="" />
+              <img key="img1" src={vista3} width="600" height="255" alt="" />
+              <img key="img2" src={vista4} width="600" height="280" alt="" />
+              <img key="img3" src={vista2} width="600" height="290" alt="" />
             </ContentSwapper>
 
             <h3 id="roll-up">Add/Remove Content</h3>
@@ -157,7 +162,7 @@ class Demo extends React.Component {
               transitionEnterTimeout={800}
               transitionLeaveTimeout={800}
             >
-              <img key="img1" src="img/vista1.jpg" width="600" height="235" alt="" />
+              <img key="img1" src={vista1} width="600" height="235" alt="" />
             </ContentAddRemove>
 
             <h3 id="height-and-width">Height and Width animation</h3>
@@ -175,7 +180,7 @@ class Demo extends React.Component {
               transitionLeaveTimeout={500}
               changeWidth
             >
-              <img key="img1" src="img/vista1.jpg" width="600" height="235" alt="" />
+              <img key="img1" src={vista1} width="600" height="235" alt="" />
             </ContentAddRemove>
 
             <h3 id="react-router-v4">React Router v4</h3>

packages/demo/src/components/AnimatedRouter.js

@@ -1,25 +1,28 @@
 import React from 'react'
 import ReactCSSTransitionReplace from 'react-css-transition-replace'
 import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
+import vista2 from '../img/vista2.jpg'
+import vista3 from '../img/vista3.jpg'
+import vista4 from '../img/vista4.jpg'
 
 const Home = () => (
   <div>
     <h2>Home</h2>
-    <img src="img/vista3.jpg" width="600" height="255" alt="" />
+    <img src={vista3} width="600" height="255" alt="" />
   </div>
 )
 
 const One = () => (
   <div>
     <h2>One</h2>
-    <img src="img/vista4.jpg" width="600" height="280" alt="" />
+    <img src={vista4} width="600" height="280" alt="" />
   </div>
 )
 
 const Two = () => (
   <div>
     <h2>Two</h2>
-    <img src="img/vista2.jpg" width="600" height="290" alt="" />
+    <img src={vista2} width="600" height="290" alt="" />
   </div>
 )
 

packages/demo/public/img/vista1.jpg renamed to packages/demo/src/img/vista1.jpg

@@ -1,7 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import './transitions.css'
 import Demo from './Demo'
 
-ReactDOM.render(<Demo />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<Demo />)