feat: Improve React docs

src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md

@@ -1,42 +1,9 @@
-<!-- WIZARD -->
-If you’re using React 16 or above, Error Boundaries are an important tool for defining the behavior of your application in the face of errors. Be sure to send errors they catch to Sentry using `Sentry.captureException`, and optionally this is also a great opportunity to surface User Feedback.
+You should `init` the Sentry browser SDK as soon as possible during your application load up, before initializing React:
 
 ```jsx
 import * as Sentry from '@sentry/browser';
 
-// Sentry.init({
-// dsn: "___PUBLIC_DSN___"
-// });
-// should have been called before using it here
-// ideally before even rendering your react app 
+Sentry.init({ dsn: '___PUBLIC_DSN___' });
 
-class ExampleBoundary extends Component {
- constructor(props) {
- super(props);
- this.state = { error: null };
- }
-
- componentDidCatch(error, errorInfo) {
- this.setState({ error });
- Sentry.withScope(scope => {
- Object.keys(errorInfo).forEach(key => {
- scope.setExtra(key, errorInfo[key]);
- });
- Sentry.captureException(error);
- });
- }
-
- render() {
- if (this.state.error) {
- //render fallback UI
- return (
- <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
- );
- } else {
- //when there's not an error, render children untouched
- return this.props.children;
- }
- }
-}
+ReactDOM.render(</App>, document.querySelector('#app'));
 ```
-<!-- ENDWIZARD -->

src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md

@@ -1,13 +1,7 @@
-If you are using `yarn` you can add our package as a dependency:
+Add the `@sentry/browser` to your project:
 
 ```bash
-$ yarn add @sentry/browser@{% sdk_version sentry.javascript.browser %}
-```
-
-Or alternatively, you can npm install it:
-
-```bash
-$ npm install @sentry/browser@{% sdk_version sentry.javascript.browser %}
+$ npm install --save @sentry/browser
 ```
 
 You can also [use our more convenient CDN version](?platform=browser).

src/collections/_documentation/platforms/javascript/getting-started-install/react.md

@@ -1,9 +1,9 @@
-The quickest way to get started is to use the CDN hosted version of the JavaScript browser SDK:
+Add the `@sentry/browser` to your project:
 
-```html
-<script src="https://browser.sentry-cdn.com/{% sdk_version sentry.javascript.browser %}/bundle.min.js" crossorigin="anonymous"></script>
+```bash
+$ npm install --save @sentry/browser
 ```
 
 {% wizard hide %}
-You can also [NPM install our browser library](?platform=browsernpm).
+You can also [use our more convenient CDN version](?platform=browser).
 {% endwizard %}

src/collections/_documentation/platforms/javascript/react.md

@@ -3,18 +3,28 @@ title: React
 sidebar_order: 30
 ---
 <!-- WIZARD -->
-To use Sentry with your React application, you will need to use `@sentry/browser` (Sentry’s browser JavaScript SDK). 
+To use Sentry with your React application, you will need to use `@sentry/browser` (Sentry’s browser JavaScript SDK).
+
+{% include_relative getting-started-install/react.md %}
+
+### Connecting the SDK to Sentry
+
+After you've completed setting up a project in Sentry, Sentry will give you a value which we call a _DSN_ or _Data Source Name_. It looks a lot like a standard URL, but it’s just a representation of the configuration required by the Sentry SDKs. It consists of a few pieces, including the protocol, public key, the server address, and the project identifier.
+
+{% include_relative getting-started-dsn/react.md %}
+
 On its own, `@sentry/browser` will report any uncaught exceptions triggered from your application.
 
+## Error Boundaries
+
 If you’re using React 16 or above, Error Boundaries are an important tool for defining the behavior of your application in the face of errors. Be sure to send errors they catch to Sentry using `Sentry.captureException`. This is also a great opportunity to collect user feedback by using `Sentry.showReportDialog`.
 
 {% capture __alert_content -%}
-One important thing to note about the behavior of error boundaries in development mode is that React will rethrow errors they catch. This will result in errors being reported twice to Sentry with the above setup, but this won’t occur in your production build.
+In development mode React will rethrow errors caught within an error boundary. This will result in errors being reported twice to Sentry with the above setup, but this won’t occur in your production build.
 {%- endcapture -%}
 {%- include components/alert.html
  title="Note"
  content=__alert_content
- level="info"
 %}
 
 ```jsx