From b901f55164c9f60dc9da5d13ad13f7ff9c1d2bac Mon Sep 17 00:00:00 2001
From: Jonathan Rubin <jonathan.a.rubin@gmail.com>
Date: Fri, 15 Jul 2022 06:17:38 -0400
Subject: [PATCH] chores(template/react): Update to React 18 (#627)

* Updated react example template

* build:(landing) automated website build

* removed bun.lockb and most of changes from react example index.html

Co-authored-by: rubinj30 <rubinj30@users.noreply.github.com>
---
 examples/react/package.json           | 12 +++++-------
 examples/react/src/App.jsx            |  1 -
 examples/react/src/index.jsx          | 20 +++++++++++++-------
 examples/react/src/reportWebVitals.js | 13 +++++++++++++
 4 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 examples/react/src/reportWebVitals.js

diff --git a/examples/react/package.json b/examples/react/package.json
index e3e8e39b3abc81..c3b93c59293f33 100644
--- a/examples/react/package.json
+++ b/examples/react/package.json
@@ -1,16 +1,14 @@
 {
   "name": "@bun-examples/react",
-  "version": "0.0.47",
+  "version": "0.1.0",
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "web-vitals": "^1.0.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "web-vitals": "^2.1.4"
   },
-  "scripts": {},
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "devDependencies": {
diff --git a/examples/react/src/App.jsx b/examples/react/src/App.jsx
index f6cafff4c89e9a..d20dd12fed733f 100644
--- a/examples/react/src/App.jsx
+++ b/examples/react/src/App.jsx
@@ -1,5 +1,4 @@
 import logo from "./logo.svg";
-import * as React from "react";
 import "./App.css";
 
 function App() {
diff --git a/examples/react/src/index.jsx b/examples/react/src/index.jsx
index 1d316ddf02b1a2..951fbfa8df3495 100644
--- a/examples/react/src/index.jsx
+++ b/examples/react/src/index.jsx
@@ -1,11 +1,17 @@
-import * as React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
\ No newline at end of file
diff --git a/examples/react/src/reportWebVitals.js b/examples/react/src/reportWebVitals.js
new file mode 100644
index 00000000000000..7d7417e81326b5
--- /dev/null
+++ b/examples/react/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+      import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+        getCLS(onPerfEntry);
+        getFID(onPerfEntry);
+        getFCP(onPerfEntry);
+        getLCP(onPerfEntry);
+        getTTFB(onPerfEntry);
+      });
+    }
+  };
+  
+  export default reportWebVitals;
\ No newline at end of file