From d46f798ad6962b5eeaf06692260db101c76408f3 Mon Sep 17 00:00:00 2001
From: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>
Date: Fri, 8 Apr 2022 15:04:14 -0700
Subject: [PATCH] Update templates to use React 18 `createRoot` (#12220)
---
package-lock.json | 72 +++++++++++++++++--
.../cra-template-typescript/template.json | 4 +-
.../template/src/index.tsx | 10 +--
packages/cra-template/template/src/index.js | 8 +--
packages/react-scripts/package.json | 4 +-
5 files changed, 81 insertions(+), 17 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index bcc1c096e32..a5861ee6ce2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "create-react-app-main",
+ "name": "create-react-app",
"lockfileVersion": 2,
"requires": true,
"packages": {
@@ -30029,8 +30029,8 @@
"react-scripts": "bin/react-scripts.js"
},
"devDependencies": {
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
},
"engines": {
"node": ">=14.0.0"
@@ -30048,6 +30048,40 @@
}
}
},
+ "packages/react-scripts/node_modules/react": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+ "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
+ "dev": true,
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "packages/react-scripts/node_modules/react-dom": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
+ "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
+ "dev": true,
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.21.0"
+ },
+ "peerDependencies": {
+ "react": "^18.0.0"
+ }
+ },
+ "packages/react-scripts/node_modules/scheduler": {
+ "version": "0.21.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+ "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+ "dev": true,
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ }
+ },
"packages/react-scripts/node_modules/semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -47469,10 +47503,10 @@
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
- "react": "^17.0.2",
+ "react": "^18.0.0",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.0",
- "react-dom": "^17.0.2",
+ "react-dom": "^18.0.0",
"react-refresh": "^0.11.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
@@ -47488,6 +47522,34 @@
"workbox-webpack-plugin": "^6.4.1"
},
"dependencies": {
+ "react": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+ "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
+ "dev": true,
+ "requires": {
+ "loose-envify": "^1.1.0"
+ }
+ },
+ "react-dom": {
+ "version": "18.0.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
+ "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
+ "dev": true,
+ "requires": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.21.0"
+ }
+ },
+ "scheduler": {
+ "version": "0.21.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+ "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+ "dev": true,
+ "requires": {
+ "loose-envify": "^1.1.0"
+ }
+ },
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
index af71a913d1a..db2d4761047 100644
--- a/packages/cra-template-typescript/template.json
+++ b/packages/cra-template-typescript/template.json
@@ -6,8 +6,8 @@
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
- "@types/react": "^17.0.20",
- "@types/react-dom": "^17.0.9",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx
index ef2edf8ea3f..032464fb6ec 100644
--- a/packages/cra-template-typescript/template/src/index.tsx
+++ b/packages/cra-template-typescript/template/src/index.tsx
@@ -1,14 +1,16 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
-ReactDOM.render(
+const root = ReactDOM.createRoot(
+ document.getElementById('root') as HTMLElement
+);
+root.render(
- ,
- document.getElementById('root')
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js
index ef2edf8ea3f..d563c0fb10b 100644
--- a/packages/cra-template/template/src/index.js
+++ b/packages/cra-template/template/src/index.js
@@ -1,14 +1,14 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
- ,
- document.getElementById('root')
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index b90ba78ad03..0a123a155de 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -86,8 +86,8 @@
"workbox-webpack-plugin": "^6.4.1"
},
"devDependencies": {
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
},
"optionalDependencies": {
"fsevents": "^2.3.2"