From b9adfd27fb87d2967ab4e100fe2288e122ae1071 Mon Sep 17 00:00:00 2001
From: Viktor Persson <vikpe@users.noreply.github.com>
Date: Sat, 16 Apr 2022 19:39:42 +0200
Subject: [PATCH] Replace deprecated ReactDOM.render with Root.render in
 examples. (#626)

---
 examples/flow-with-babel/src/index.js        | 6 ++++--
 examples/typescript-with-babel/src/index.tsx | 6 ++++--
 examples/typescript-with-swc/src/index.tsx   | 6 ++++--
 examples/typescript-with-tsc/src/index.tsx   | 6 ++++--
 examples/webpack-dev-server/src/index.js     | 6 ++++--
 examples/webpack-hot-middleware/src/index.js | 6 ++++--
 examples/webpack-plugin-serve/src/index.js   | 6 ++++--
 7 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/examples/flow-with-babel/src/index.js b/examples/flow-with-babel/src/index.js
index 8bf600fb..292813b9 100644
--- a/examples/flow-with-babel/src/index.js
+++ b/examples/flow-with-babel/src/index.js
@@ -1,6 +1,8 @@
 // @flow
 
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-render(<App />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);
diff --git a/examples/typescript-with-babel/src/index.tsx b/examples/typescript-with-babel/src/index.tsx
index 1acd0cdf..ce5afcd7 100644
--- a/examples/typescript-with-babel/src/index.tsx
+++ b/examples/typescript-with-babel/src/index.tsx
@@ -1,4 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-render(<App />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container!);
+root.render(<App />);
diff --git a/examples/typescript-with-swc/src/index.tsx b/examples/typescript-with-swc/src/index.tsx
index 1acd0cdf..ce5afcd7 100644
--- a/examples/typescript-with-swc/src/index.tsx
+++ b/examples/typescript-with-swc/src/index.tsx
@@ -1,4 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-render(<App />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container!);
+root.render(<App />);
diff --git a/examples/typescript-with-tsc/src/index.tsx b/examples/typescript-with-tsc/src/index.tsx
index 1acd0cdf..ce5afcd7 100644
--- a/examples/typescript-with-tsc/src/index.tsx
+++ b/examples/typescript-with-tsc/src/index.tsx
@@ -1,4 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-render(<App />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container!);
+root.render(<App />);
diff --git a/examples/webpack-dev-server/src/index.js b/examples/webpack-dev-server/src/index.js
index 1acd0cdf..34edf35f 100644
--- a/examples/webpack-dev-server/src/index.js
+++ b/examples/webpack-dev-server/src/index.js
@@ -1,4 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-render(<App />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);
diff --git a/examples/webpack-hot-middleware/src/index.js b/examples/webpack-hot-middleware/src/index.js
index 1acd0cdf..34edf35f 100644
--- a/examples/webpack-hot-middleware/src/index.js
+++ b/examples/webpack-hot-middleware/src/index.js
@@ -1,4 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-render(<App />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);
diff --git a/examples/webpack-plugin-serve/src/index.js b/examples/webpack-plugin-serve/src/index.js
index 1acd0cdf..34edf35f 100644
--- a/examples/webpack-plugin-serve/src/index.js
+++ b/examples/webpack-plugin-serve/src/index.js
@@ -1,4 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-render(<App />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);