docs(react/getting-started): collapse React 16–18 section inside Expandable

Author: codyde

docs/platforms/javascript/guides/react/getting-started.mdx

@@ -1,16 +1,18 @@
 ---
 title: "Getting Started"
 sidebar_order: 1
-description: "Learn how to set up and configure Sentry in your React application."
+description: "Learn how to get started with the extended functionality of the React SDK and Sentry."
 ---
 
 <PlatformContent includePath="llm-rules-platform" />
 
+This guide covers the full getting started pocess for the React SDK and assumes you want to utilize Error Monitoring, Logs, Tracing and Spans, and Replays. For the basic quickstart, the [React Quickstart](/platforms/javascript/guides/react/) guide is a better starting point.
+
 <PlatformContent includePath="getting-started-prerequisites" />
 
-<StepConnector>
+<StepConnector checkable>
 
-## Step 1: Install
+## Install
 
 Run the command for your preferred package manager to add the Sentry SDK to your application:
 
@@ -22,7 +24,7 @@ npm install @sentry/react --save
 
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
-## Step 2: Configure
+## Configure
 
 ### Initialize the Sentry SDK
 
@@ -96,7 +98,7 @@ const root = createRoot(container);
 root.render(<App />);
 ```
 
-## Step 3: Capture React Errors
+## Capture React Errors
 
 To make sure Sentry captures all your app's errors, configure error handling based on your React version.
 
@@ -122,6 +124,8 @@ const root = createRoot(container, {
 root.render(<App />);
 ```
 
+<Expandable title="React 16–18">
+
 ### React 16 - 18
 
 Use the Sentry Error Boundary to wrap your application:
@@ -141,7 +145,9 @@ import * as Sentry from "@sentry/react";
   [here](features/error-boundary/#manually-capturing-errors).
  </Alert>
 
-## Step 4: Sending Logs
+</Expandable>
+
+## Sending Logs
 
 [Structured logging](/platforms/javascript/guides/react/logs/) lets users send text-based log information from their applications to Sentry. Once in Sentry, these logs can be viewed alongside relevant errors, searched by text-string, or searched using their individual attributes.
 
@@ -171,7 +177,7 @@ logger.warn(logger.fmt`Rate limit exceeded for user: ${userId}`);
 
 <Break />
 
-## Step 5: Customizing Replays
+## (Optional) Customizing Replays 
 
 [Replays](/product/explore/session-replay/web/getting-started/) allow you to see video-like reproductions of user sessions. 
 
@@ -205,7 +211,7 @@ Sentry.init({
 
 
 
-## Step 6: Custom Traces with Attributes
+## (Optional) Custom Traces with Attributes
 
 [Tracing](/platforms/javascript/guides/react/tracing/) allows you to monitor interactions between multiple services or applications. Create custom spans to measure specific operations and add meaningful attributes. This helps you understand performance bottlenecks and debug issues with detailed context.
 
@@ -263,8 +269,6 @@ if (span) {
 
 <PlatformContent includePath="getting-started-tunneling" />
 
-</StepConnector>
-
 ## Verify Your Setup
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
@@ -294,6 +298,8 @@ Now, head over to your project on [Sentry.io](https://sentry.io/) to view the co
 
 <PlatformContent includePath="getting-started-verify-locate-data" />
 
+</StepConnector>
+
 ## Next Steps
 
 At this point, you should have integrated Sentry into your React application and should already be sending error and performance data to your Sentry project.