Update examples to use react-jsx (remix-run#10515)

ram-janapala · May 22, 2023 · af334b6 · af334b6
1 parent edf6dca
commit af334b6
Show file tree

Hide file tree

Showing 61 changed files with 106 additions and 112 deletions.
diff --git a/docs/guides/ssr.md b/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";
 

diff --git a/docs/start/_tutorial.md b/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,

diff --git a/docs/start/overview.md b/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,

diff --git a/docs/start/tutorial.md b/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,

diff --git a/examples/auth/src/main.tsx b/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";

diff --git a/examples/auth/tsconfig.json b/examples/auth/tsconfig.json
@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]
 }
diff --git a/examples/basic-data-router/src/app.tsx b/examples/basic-data-router/src/app.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   createBrowserRouter,
   RouterProvider,

diff --git a/examples/basic-data-router/src/main.tsx b/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(

diff --git a/examples/basic-data-router/tsconfig.json b/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"]

diff --git a/examples/basic/src/App.tsx b/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() {

diff --git a/examples/basic/src/main.tsx b/examples/basic/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";

diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]

diff --git a/examples/custom-filter-link/src/main.tsx b/examples/custom-filter-link/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";

diff --git a/examples/custom-filter-link/tsconfig.json b/examples/custom-filter-link/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]

diff --git a/examples/custom-link/src/App.tsx b/examples/custom-link/src/App.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
   Routes,
   Route,

diff --git a/examples/custom-link/src/main.tsx b/examples/custom-link/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";

diff --git a/examples/custom-link/tsconfig.json b/examples/custom-link/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]

diff --git a/examples/custom-query-parsing/src/main.tsx b/examples/custom-query-parsing/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";

diff --git a/examples/custom-query-parsing/tsconfig.json b/examples/custom-query-parsing/tsconfig.json
@@ -1,5 +1,4 @@
 {
-  "include": ["src", "types"],
   "compilerOptions": {
     "baseUrl": ".",
     "target": "ESNext",
@@ -15,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
-  }
+  },
+  "include": ["./src", "./types"],
 }
diff --git a/examples/data-router/src/app.tsx b/examples/data-router/src/app.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router-dom";
 import {
   Await,

diff --git a/examples/data-router/src/main.tsx b/examples/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(

diff --git a/examples/data-router/tsconfig.json b/examples/data-router/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]

diff --git a/examples/error-boundaries/src/app.tsx b/examples/error-boundaries/src/app.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
 
 import "./index.css";

diff --git a/examples/error-boundaries/src/main.tsx b/examples/error-boundaries/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";
 

diff --git a/examples/error-boundaries/src/routes.tsx b/examples/error-boundaries/src/routes.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import type { LoaderFunctionArgs } from "react-router-dom";
 import {
   isRouteErrorResponse,

diff --git a/examples/error-boundaries/tsconfig.json b/examples/error-boundaries/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]

diff --git a/examples/lazy-loading-router-provider/src/App.tsx b/examples/lazy-loading-router-provider/src/App.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
   Outlet,
   Link,

diff --git a/examples/lazy-loading-router-provider/src/main.tsx b/examples/lazy-loading-router-provider/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 "./index.css";
 import App from "./App";

diff --git a/examples/lazy-loading-router-provider/src/pages/About.tsx b/examples/lazy-loading-router-provider/src/pages/About.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useLoaderData } from "react-router-dom";
 
 export async function loader() {

diff --git a/examples/lazy-loading-router-provider/src/pages/Dashboard.tsx b/examples/lazy-loading-router-provider/src/pages/Dashboard.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Outlet, Link, useLoaderData } from "react-router-dom";
 
 export function DashboardLayout() {

diff --git a/examples/lazy-loading-router-provider/tsconfig.json b/examples/lazy-loading-router-provider/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]

diff --git a/examples/lazy-loading/src/main.tsx b/examples/lazy-loading/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";

diff --git a/examples/lazy-loading/src/pages/About.tsx b/examples/lazy-loading/src/pages/About.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 function AboutPage() {
   return (
     <div>

diff --git a/examples/lazy-loading/src/pages/Dashboard.tsx b/examples/lazy-loading/src/pages/Dashboard.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Routes, Route, Outlet, Link } from "react-router-dom";
 
 export default function Dashboard() {

diff --git a/examples/lazy-loading/tsconfig.json b/examples/lazy-loading/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importsNotUsedAsValues": "error"
   },
   "include": ["./src"]