Fix order of init and imports for react onboarding (#10020)

Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>

platform-includes/getting-started-config/javascript.react.mdx

@@ -1,39 +1,53 @@
+It is important to initialize Sentry as early as possible in your application. We recommend putting the Sentry initialization code into its own file and including that file as the first import in your application entry point:
+
 <SignInNote />
 
-```javascript
-import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
-import React from "react";
+```javascript {filename:instrument.js}
+import { useEffect } from "react";
 import * as Sentry from "@sentry/react";
-import App from "./App";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router-dom";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
   integrations: [
-      // See docs for support of different versions of variation of react router
-      // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
+    // See docs for support of different versions of variation of react router
+    // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
     Sentry.reactRouterV6BrowserTracingIntegration({
-        useEffect: React.useEffect,
-        useLocation,
-        useNavigationType,
-        createRoutesFromChildren,
-        matchRoutes
+      useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes,
     }),
-    Sentry.replayIntegration()
+    Sentry.replayIntegration(),
   ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
   tracesSampleRate: 1.0,
 
   // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
-  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+  tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/],
 
   // Capture Replay for 10% of all sessions,
   // plus for 100% of sessions with an error
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,
 });
+```
+
+Include the Sentry initialization file as first import statement:
+
+```javascript
+// Sentry initialization should be imported first!
+import "./instrument";
+import App from "./App";
+import { createRoot } from "react-dom/client";
 
 const container = document.getElementById(“app”);
 const root = createRoot(container);