fix: add react to product analytics onboarding (PostHog#29247)

joshsny · github-actions[bot] · web-flow · commit 07e5a9ea4977 · 2025-02-28T09:38:36.000Z
Co-authored-by: github-actions &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
@@ -22,6 +22,7 @@ import {
     ProductAnalyticsNuxtJSInstructions,
     ProductAnalyticsPHPInstructions,
     ProductAnalyticsPythonInstructions,
+    ProductAnalyticsReactInstructions,
     ProductAnalyticsRemixJSInstructions,
     ProductAnalyticsRNInstructions,
     ProductAnalyticsRubyInstructions,
@@ -35,6 +36,7 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: JSWebInstructions,
     [SDKKey.ANDROID]: ProductAnalyticsAndroidInstructions,
     [SDKKey.ANGULAR]: ProductAnalyticsAngularInstructions,
+    [SDKKey.REACT]: ProductAnalyticsReactInstructions,
     [SDKKey.API]: ProductAnalyticsAPIInstructions,
     [SDKKey.ASTRO]: ProductAnalyticsAstroInstructions,
     [SDKKey.BUBBLE]: ProductAnalyticsBubbleInstructions,
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
@@ -19,6 +19,7 @@ export * from './nodejs'
 export * from './nuxt'
 export * from './php'
 export * from './python'
+export * from './react'
 export * from './react-native'
 export * from './remix'
 export * from './ruby'
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/react.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/react.tsx
@@ -0,0 +1,14 @@
+import { LemonDivider } from '@posthog/lemon-ui'
+
+import { SDKInstallReactInstructions } from '../sdk-install-instructions/react'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsReactInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallReactInstructions />
+            <LemonDivider thick dashed className="my-4" />
+            <ProductAnalyticsAllJSFinalSteps />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react.tsx
@@ -55,10 +55,7 @@ export function SDKInstallReactInstructions(): JSX.Element {
             <h3>Add environment variables</h3>
             <ReactEnvVarsSnippet />
             <h3>Initialize</h3>
-            <p>
-                Integrate PostHog at the root of your app (<code>src/index.js</code> for the default{' '}
-                <code>create-react-app</code>).
-            </p>
+            <p>Integrate PostHog at the root of your app.</p>
             <ReactSetupSnippet />
         </>
     )
