Update examples to use react-jsx (#10515)

Author: brophdawg11

docs/guides/ssr.md

@@ -143,7 +143,7 @@ Once we've sent the HTML back to the browser, we'll need to "hydrate" the applic
 
 ```jsx filename=entry-client.jsx lines=[10-15]
 import * as React from "react";
-import ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom/client";
 import {
   createBrowserRouter,
   RouterProvider,
@@ -275,7 +275,7 @@ app.listen(3000);
 And finally, you'll need a similar file to "hydrate" the app with your JavaScript bundle that includes the very same `App` component. Note the use of `BrowserRouter` instead of `StaticRouter`.
 
 ```js filename=client.entry.js
-import ReactDOM from "react-dom";
+import * as ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 

docs/start/_tutorial.md

@@ -74,7 +74,7 @@ Actually, that "!" doesn't look boring at all. This is pretty exciting. We sat o
 Finally, go make sure `index.js` or `main.jsx` (depending on the bundler you used) is actually boring:
 
 ```tsx filename=src/main.jsx
-import ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom/client";
 import App from "./App";
 
 const root = ReactDOM.createRoot(
@@ -98,7 +98,7 @@ npm run dev
 First things first, we want to connect your app to the browser's URL: import `BrowserRouter` and render it around your whole app.
 
 ```tsx lines=[2,9-11] filename=src/main.jsx
-import ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 
@@ -177,7 +177,7 @@ export default function Invoices() {
 Finally, let's teach React Router how to render our app at different URLs by creating our first "Route Config" inside of `main.jsx` or `index.js`.
 
 ```tsx lines=[2,4-5,8-9,15-21] filename=src/main.jsx
-import ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom/client";
 import {
   BrowserRouter,
   Routes,
@@ -217,7 +217,7 @@ Let's get some automatic, persistent layout handling by doing just two things:
 First let's nest the routes. Right now the expenses and invoices routes are siblings to the app, we want to make them _children_ of the app route:
 
 ```jsx lines=[17-20] filename=src/main.jsx
-import ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom/client";
 import {
   BrowserRouter,
   Routes,

docs/start/overview.md

@@ -18,7 +18,7 @@ This enables faster user experiences because the browser doesn't need to request
 Client side routing is enabled by creating a `Router` and linking/submitting to pages with `Link` and `<Form>`:
 
 ```jsx [10,16,27]
-import React from "react";
+import * as React from "react";
 import { createRoot } from "react-dom/client";
 import {
   createBrowserRouter,

docs/start/tutorial.md

@@ -68,8 +68,8 @@ The `main.jsx` file is the entry point. Open it up and we'll put React Router on
 👉 **Create and render a [browser router][createbrowserrouter] in `main.jsx`**
 
 ```jsx lines=[3-6,9-14,18] filename=src/main.jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
 import {
   createBrowserRouter,
   RouterProvider,

examples/auth/src/main.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import "./index.css";

examples/auth/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]
 }

examples/basic-data-router/src/app.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   createBrowserRouter,
   RouterProvider,

examples/basic-data-router/src/main.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
 import App from "./app";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

examples/basic-data-router/tsconfig.json

@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]

examples/basic/src/App.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Routes, Route, Outlet, Link } from "react-router-dom";
 
 export default function App() {