microsoft · siyuniu-ms · Mar 12, 2025 · Feb 18, 2025 · Feb 18, 2025 · Feb 18, 2025
diff --git a/README.md b/README.md
@@ -118,6 +118,7 @@ Additionally, as part of this change the existing v3.x extension has been moved
 
 | Version |  Application Insights | React     | Branch
 |---------|-----------------------|-----------|-----------
+| 18.3.6  | ^3.3.6                | >= 18.0.0 | [main](https://github.com/microsoft/applicationinsights-react-js)
 | 17.3.6  | ^3.3.6                | >= 17.0.2 | [release17.3.x](https://github.com/microsoft/applicationinsights-react-js/tree/17.3.6)
 | 17.3.5  | ^3.3.5                | >= 17.0.2 | [release17.3.x](https://github.com/microsoft/applicationinsights-react-js/tree/17.3.5)
 | 17.3.4  | ^3.3.4                | >= 17.0.2 | [main](https://github.com/microsoft/applicationinsights-react-js/tree/17.3.4)

diff --git a/RELEASES.md b/RELEASES.md
@@ -1,5 +1,14 @@
 # Releases
 
+## 18.3.6 (March 12th, 2025)
+
+This release targets React 18 and upgrades to Application Insights 3.3.6. We are aligning the major version number with the React framework, following the numbering convention outlined [here](https://github.com/microsoft/applicationinsights-angularplugin-js/issues/57)
+For users on React 17.x, ongoing maintenance and releases will be available from the [release17.3.x](https://github.com/microsoft/applicationinsights-react-js/tree/17.3.6)
+
+### Changelog
+
+- #142 [React18] upgrade to react 18 
+
 ## 17.3.6 (March 6th, 2025)
 
 ### Changelog

diff --git a/applicationinsights-react-js/package.json b/applicationinsights-react-js/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/applicationinsights-react-js",
-    "version": "17.3.6",
+    "version": "18.3.6",
     "description": "Microsoft Application Insights React plugin",
     "author": "Microsoft Application Insights Team",
     "license": "MIT",
@@ -48,8 +48,8 @@
         "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
         "jest": "^27.3.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "globby": "^11.0.0",
         "magic-string": "^0.25.7",
         "@rollup/plugin-commonjs": "^18.0.0",
@@ -73,7 +73,7 @@
     },
     "peerDependencies": {
         "tslib": "*",
-        "react": ">= 17.0.1",
+        "react": ">= 18.0.0",
         "history": ">= 4.10.1"
     }
 }
diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/applicationinsights-react-js",
-    "version": "17.3.6",
+    "version": "18.3.6",
     "description": "Microsoft Application Insights React plugin",
     "author": "Microsoft Application Insights Team",
     "license": "MIT",

diff --git a/sample/applicationinsights-react-sample/package.json b/sample/applicationinsights-react-sample/package.json
@@ -1,23 +1,23 @@
 {
     "name": "@microsoft/applicationinsights-react-sample",
-    "version": "1.3.1",
+    "version": "1.3.5",
     "description": "Microsoft Application Insights React plugin Sample",
     "author": "Microsoft Application Insights Team",
     "license": "MIT",
     "dependencies": {
         "@microsoft/applicationinsights-core-js": "^3.3.6",
-        "@microsoft/applicationinsights-react-js": "17.3.6",
+        "@microsoft/applicationinsights-react-js": "18.3.6",
         "@microsoft/applicationinsights-web": "^3.3.6",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "react-router-dom": "^6.11.2",
         "web-vitals": "^3.4.0"
     },
     "devDependencies": {
         "@types/jest": "^27.0.2",
         "@types/node": "11.13.2",
-        "@types/react": "^16.9.11",
-        "@types/react-dom": "^16.9.4",
+        "@types/react": "^18.2.28",
+        "@types/react-dom": "^18.2.13",
         "react-scripts": "^5.0.1",
         "typescript": "^4.3.4"
     },

diff --git a/sample/applicationinsights-react-sample/public/index.html b/sample/applicationinsights-react-sample/public/index.html
@@ -53,6 +53,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="app"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/sample/applicationinsights-react-sample/src/index.tsx b/sample/applicationinsights-react-sample/src/index.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
 import {  BrowserRouter,Routes,Route, } from 'react-router-dom'
-import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import TestPage from './TestPage';
+import { createRoot } from "react-dom/client";
 
-ReactDOM.render(
-  <BrowserRouter>
-    <Routes>
-      <Route path="/" element={<App />} />
-      <Route path="/test" element={<TestPage />} />
-    </Routes>
-  </BrowserRouter>,
-  document.getElementById('root') as HTMLElement
+const container = document.getElementById('app');
+const root = createRoot(container!);
+root.render(
+    <BrowserRouter>
+        <Routes>
+            <Route path="/" element={<App />} />
+            <Route path="/test" element={<TestPage />} />
+        </Routes>
+    </BrowserRouter>
 );