js/react-flipper-example Switch to React 18.2.0 & bump deps (#4901)

Summary: This diff refactors `js/react-flipper-example` to React & ReactDOM `18.2.0` and bumps all deps to the `latest`. - Also, specifies the `js-flipper` dep version as `*` which is taken care of by the `relative-deps` script. - Deletes `logo.svg` from `src/` ### Scope: `js/react-flipper-example` ## Changelog [General][Changed] - [Refactor] `js/react-flipper-example` Switch to React `18.2.0` & bump deps. Pull Request resolved: #4901 Test Plan: - Should pass `js-flipper / build-react-example (pull_request)` workflow. Reviewed By: antonk52 Differential Revision: D47868448 Pulled By: passy fbshipit-source-id: edc67ebe3f205d32ec6198b7130ded287997fe50
facebook · Jul 31, 2023 · cb4352a · Alirezabigdli · Nov 2, 2024 · cb4352a
1 parent 143fe0e
commit cb4352a
Show file tree

Hide file tree

Showing 7 changed files with 475 additions and 146 deletions.
diff --git a/js/react-flipper-example/package.json b/js/react-flipper-example/package.json
@@ -3,19 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^16.11.26",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.14",
-    "js-flipper": "^0.140.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "typescript": "^4.6.2",
-    "web-vitals": "^2.1.4"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.3.2",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "js-flipper": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.1.6",
+    "web-vitals": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/js/react-flipper-example/public/index.html b/js/react-flipper-example/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React Flipper WebSocket Example</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/js/react-flipper-example/public/manifest.json b/js/react-flipper-example/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Flipper Tic-Tac-Toe",
+  "name": "React Flipper WebSocket Example",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/js/react-flipper-example/src/index.tsx b/js/react-flipper-example/src/index.tsx
@@ -8,13 +8,13 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-
+import {createRoot} from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
+  </React.StrictMode>
 );
diff --git a/js/react-flipper-example/src/logo.svg b/js/react-flipper-example/src/logo.svg
diff --git a/js/react-flipper-example/tsconfig.json b/js/react-flipper-example/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "ES6",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }