feat: Add performance docs for react

Author: AbhiPrasad

src/collections/_documentation/performance-monitoring/configuration/react.md

@@ -0,0 +1,87 @@
+To get started with performance monitoring using Sentry's React SDK, first install the `@sentry/react` and `@sentry/apm` packages:
+
+```bash
+# Using yarn
+$ yarn add @sentry/react @sentry/apm
+
+# Using npm
+$ npm install @sentry/react @sentry/apm
+```
+
+Next, initialize the integration in your call to `Sentry.init`:
+
+```jsx
+import * as Sentry from '@sentry/react';
+import { Integrations } from "@sentry/apm";
+Sentry.init({
+  dsn: '"___PUBLIC_DSN___"',
+  release: 'my-project-name@' + process.env.npm_package_version,
+  integrations: [
+    new Integrations.Tracing(),
+  ],
+  tracesSampleRate: 0.25, // must be present and non-zero
+});
+
+// ...
+
+ReactDOM.render(<App />, rootNode);
+
+// Can also use with React Concurrent Mode
+// ReactDOM.createRoot(rootNode).render(<App />);
+```
+
+### `withProfiler` Higher Order Component
+
+`@sentry/react` exports a `withProfiler` Higher Order Component that leverages the `@sentry/apm` Tracing integration to add React related spans to transactions. If the Tracing integration is not enabled, the Profiler component will not work.
+
+In the example below, uses the `withProfiler` Higher Order Component to instrument an App component.
+
+```jsx
+import React from 'react';
+import * as Sentry from '@sentry/react';
+
+class App extends React.Component {
+  render() {
+    return (
+      <FancyComponent>
+        <InsideComponent someProp={2} />
+        <AnotherComponent />
+      </FancyComponent>
+    )
+  }
+}
+
+export default Sentry.withProfiler(App);
+```
+
+The `withProfiler` higher order component has a variety options for further customization. They can be passed in as the second argument to the `withProfiler` function.
+
+```jsx
+export default Sentry.withProfiler(App, { name: "CustomAppName" })
+```
+
+#### `name` (string)
+
+The name of the component being profiled. Normally the name is taken from the component `displayName` or component `name`.
+
+#### `disabled` (boolean)
+
+If the Profiler should be disabled or not.
+
+#### `includeRender` (boolean)
+
+
+
+<!-- 
+  // The name of the component being profiled.
+  name: string;
+  // If the Profiler is disabled. False by default. This is useful if you want to disable profilers
+  // in certain environments.
+  disabled?: boolean;
+  // If time component is on page should be displayed as spans. True by default.
+  includeRender?: boolean;
+  // If component updates should be displayed as spans. True by default.
+  includeUpdates?: boolean;
+  // props given to component being profiled.
+  updateProps: { [key: string]: any };
+ -->