docs(react): Add react package info to README (#2686)

* ref(gatsby): Require @sentry/react in browser plugin

* docs(react): Update README

Author: AbhiPrasad

packages/gatsby/src/gatsby-browser.js

@@ -1,6 +1,6 @@
 exports.onClientEntry = function(_, pluginParams) {
   require.ensure(['@sentry/react', '@sentry/apm'], function(require) {
-    const Sentry = require('@sentry/browser');
+    const Sentry = require('@sentry/react');
     const TracingIntegration = require('@sentry/apm').Integrations.Tracing;
     const tracesSampleRate = pluginParams.tracesSampleRate !== undefined ? pluginParams.tracesSampleRate : 0;
     const integrations = [...(pluginParams.integrations || [])];

packages/react/README.md

@@ -7,9 +7,86 @@
 
 # Official Sentry SDK for ReactJS
 
-Note this library is in active development and not ready for production usage.
-
 ## Links
 
 - [Official SDK Docs](https://docs.sentry.io/quickstart/)
 - [TypeDoc](http://getsentry.github.io/sentry-javascript/)
+
+## General
+
+This package is a wrapper around `@sentry/browser`, with added functionality related to React. All methods available in
+`@sentry/browser` can be imported from `@sentry/react`.
+
+To use this SDK, call `Sentry.init(options)` before you mount your React component.
+
+```javascript
+import React from 'react';
+import ReactDOM from "react-dom";
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: '__DSN__',
+  // ...
+});
+
+// ...
+
+ReactDOM.render(<App />, rootNode);
+
+// Can also use with React Concurrent Mode
+// ReactDOM.createRoot(rootNode).render(<App />);
+```
+
+### ErrorBoundary
+
+`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a
+component tree to Sentry, and set a fallback UI. Requires React version >= 16.
+
+> app.js
+```javascript
+import React from 'react';
+import * as Sentry from '@sentry/react';
+
+function FallbackComponent() {
+  return (
+    <div>An error has occured</div>
+  )
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
+        <OtherComponents />
+      </Sentry.ErrorBoundary>
+    )
+  }
+}
+
+export default App;
+```
+
+### Profiler
+
+`@sentry/react` exports a Profiler 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. The Profiler
+tracks component mount, render duration and updates. Requires React version >= 15.
+
+> app.js
+```javascript
+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);
+```