[pull] main from facebook:main

README.md

@@ -1,4 +1,12 @@
-# Create React App [![Build & Test](https://github.com/facebook/create-react-app/actions/workflows/build-and-test.yml/badge.svg?branch=main)](https://github.com/facebook/create-react-app/actions/workflows/build-and-test.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/blob/main/CONTRIBUTING.md)
+## Create React App [![Build & Test](https://github.com/facebook/create-react-app/actions/workflows/build-and-test.yml/badge.svg?branch=main)](https://github.com/facebook/create-react-app/actions/workflows/build-and-test.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/blob/main/CONTRIBUTING.md)
+
+> [!CAUTION]
+>
+> ## Deprecated
+>
+> Create React App was one of the key tools for getting a React project up-and-running in 2017-2021, it is now in long-term stasis and we recommend that you migrate to one of React frameworks documented on [Start a New React Project](https://react.dev/learn/start-a-new-react-project).
+>
+> If you are following a tutorial to learn React, there is still value in continuing your tutorial, but we do not recommend starting production apps based on Create React App.
 
 <img alt="Logo" align="right" src="https://create-react-app.dev/img/logo.svg" width="20%" />
 

docusaurus/docs/running-tests.md

@@ -72,12 +72,12 @@ Different projects choose different testing tradeoffs based on how often compone
 
 ```js
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOMClient.createRoot(div).render(<App />);
 });
 ```
 
@@ -92,13 +92,13 @@ If you’d like to test components in isolation from the child components they r
 To install `react-testing-library` and `jest-dom`, you can run:
 
 ```sh
-npm install --save @testing-library/react @testing-library/jest-dom
+npm install --save @testing-library/react @testing-library/dom @testing-library/jest-dom
 ```
 
 Alternatively you may use `yarn`:
 
 ```sh
-yarn add @testing-library/react @testing-library/jest-dom
+yarn add @testing-library/react @testing-library/dom @testing-library/jest-dom
 ```
 
 If you want to avoid boilerplate in your test files, you can create a [`src/setupTests.js`](#initializing-test-environment) file:

packages/cra-template-typescript/template.json

@@ -1,13 +1,14 @@
 {
   "package": {
     "dependencies": {
-      "@testing-library/jest-dom": "^5.14.1",
-      "@testing-library/react": "^13.0.0",
+      "@testing-library/dom": "^10.4.0",
+      "@testing-library/jest-dom": "^6.6.3",
+      "@testing-library/react": "^16.1.0",
       "@testing-library/user-event": "^13.2.1",
       "@types/jest": "^27.0.1",
       "@types/node": "^16.7.13",
-      "@types/react": "^18.0.0",
-      "@types/react-dom": "^18.0.0",
+      "@types/react": "^19.0.0",
+      "@types/react-dom": "^19.0.0",
       "typescript": "^4.4.2",
       "web-vitals": "^2.1.0"
     },

packages/cra-template/template.json

@@ -1,8 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@testing-library/jest-dom": "^5.14.1",
-      "@testing-library/react": "^13.0.0",
+      "@testing-library/dom": "^10.4.0",
+      "@testing-library/jest-dom": "^6.6.3",
+      "@testing-library/react": "^16.1.0",
       "@testing-library/user-event": "^13.2.1",
       "web-vitals": "^2.1.0"
     },

packages/create-react-app/createReactApp.js

@@ -53,9 +53,41 @@ function isUsingYarn() {
   return (process.env.npm_config_user_agent || '').indexOf('yarn') === 0;
 }
 
+function hasGivenWarning() {
+  const localWarningFilePath = path.join(
+    __dirname,
+    'given-deprecation-warning'
+  );
+  return fs.existsSync(localWarningFilePath);
+}
+
+function writeWarningFile() {
+  const localWarningFilePath = path.join(
+    __dirname,
+    'given-deprecation-warning'
+  );
+  fs.writeFileSync(localWarningFilePath, 'true');
+}
+
 let projectName;
 
 function init() {
+  if (!hasGivenWarning()) {
+    console.log(chalk.yellow.bold('create-react-app is deprecated.'));
+    console.log('');
+    console.log(
+      'You can find a list of up-to-date React frameworks on react.dev'
+    );
+    console.log(
+      chalk.underline('https://react.dev/learn/start-a-new-react-project')
+    );
+    console.log('');
+    console.log(
+      chalk.grey('This error message will only be shown once per install.')
+    );
+    writeWarningFile();
+  }
+
   const program = new commander.Command(packageJson.name)
     .version(packageJson.version)
     .arguments('<project-directory>')

packages/create-react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-app",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "keywords": [
     "react"
   ],

packages/react-scripts/fixtures/kitchensink/template/src/features/config/BaseUrl.test.js

@@ -6,14 +6,14 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import NodePath from './BaseUrl';
 
 describe('BASE_URL', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<NodePath onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(<NodePath onReady={resolve} />);
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/ExpandEnvVariables.test.js

@@ -6,12 +6,15 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import ExpandEnvVariables from './ExpandEnvVariables';
+import { flushSync } from 'react-dom';
 
 describe('expand .env variables', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ExpandEnvVariables />, div);
+    flushSync(() => {
+      ReactDOMClient.createRoot(div).render(<ExpandEnvVariables />);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/FileEnvVariables.test.js

@@ -6,12 +6,15 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import FileEnvVariables from './FileEnvVariables';
+import ReactDOMClient from 'react-dom/client';
+import { flushSync } from 'react-dom';
 
 describe('.env variables', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<FileEnvVariables />, div);
+    flushSync(() => {
+      ReactDOMClient.createRoot(div).render(<FileEnvVariables />);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/PublicUrl.test.js

@@ -6,12 +6,15 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PublicUrl from './PublicUrl';
+import ReactDOMClient from 'react-dom/client';
+import { flushSync } from 'react-dom';
 
 describe('PUBLIC_URL', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<PublicUrl />, div);
+    flushSync(() => {
+      ReactDOMClient.createRoot(div).render(<PublicUrl />);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/ShellEnvVariables.test.js

@@ -6,12 +6,15 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ShellEnvVariables from './ShellEnvVariables';
+import ReactDOMClient from 'react-dom/client';
+import { flushSync } from 'react-dom';
 
 describe('shell env variables', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ShellEnvVariables />, div);
+    flushSync(() => {
+      ReactDOMClient.createRoot(div).render(<ShellEnvVariables />);
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ArrayDestructuring.test.js

@@ -6,14 +6,16 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ArrayDestructuring from './ArrayDestructuring';
+import ReactDOMClient from 'react-dom/client';
 
 describe('array destructuring', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<ArrayDestructuring onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(
+        <ArrayDestructuring onReady={resolve} />
+      );
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ArraySpread.test.js

@@ -6,14 +6,14 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ArraySpread from './ArraySpread';
+import ReactDOMClient from 'react-dom/client';
 
 describe('array spread', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<ArraySpread onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(<ArraySpread onReady={resolve} />);
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/AsyncAwait.test.js

@@ -6,14 +6,14 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import AsyncAwait from './AsyncAwait';
+import ReactDOMClient from 'react-dom/client';
 
 describe('async/await', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<AsyncAwait onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(<AsyncAwait onReady={resolve} />);
     });
   });
 });