Suggested edits for tracing tutorial (#11660)

* Make tech stack clearer earlier in text

* Split long paragraph

* Remove text that probably makes no sense if you are a first time user

* Explain DSN in context of the screen a user is currently on

* It is clearer in one sentence

* Put instructions in corre t order

* Move comment

* Add new bullet point for importing instrument into server.js

* Looks clearer as a diff

* Depending on user preferences in their IDE, this might not be line 88, e.g. line length settings

* Fix typo

Author: whitep4nth3r

docs/product/sentry-basics/distributed-tracing/create-new-project.mdx

@@ -4,7 +4,8 @@ sidebar_order: 2
 description: "Learn how to create your Sentry projects, which will scope events to distinct pieces of your application landscape."
 ---
 
-This section walks you through how to create new projects in your Sentry account. You need to have a project set up in Sentry in order to capture errors and other events. In this walkthrough we'll be creating a frontend project in React as well as a separate backend project in Express/Node.
+In order to capture errors and other events, you need to have a project set up in Sentry. In this walkthrough we'll be creating a frontend project in React and a separate backend project in Express.
+
 Because you can create a Sentry _Project_ for each language or framework used in your application (for example, you might have separate projects for your API server and frontend client), a single application might have multiple projects associated with it. Once you've set up all the projects that correspond to different parts of your application in Sentry, you'll be able to scope events to a distinct application in your organization and assign responsibility to specific users and teams. For more information, see [best practices for creating projects](/organization/getting-started/#4-create-projects).
 
 ## Create a Frontend Project
@@ -13,7 +14,7 @@ Follow the steps below to create a new Sentry project for a sample React applica
 
 1. Log in to your [Sentry organization](https://sentry.io).
 
-1. Select **Projects** from the left side navigation menu to display the list of all your projects.
+1. Select **Projects** from the left side navigation menu.
 
 1. Click "Create Project" and configure it as appropriate for your application:
 
@@ -26,11 +27,8 @@ Follow the steps below to create a new Sentry project for a sample React applica
     - **Name your project and assign it a team**: Name your project in the **Project name** field and assign a team by selecting one in the **Team** dropdown (or click **+** to create a new team).
 
     - Click **Create Project**. This takes you to the quick Configure React SDK guide, which provides an overview of how to configure the SDK. This tutorial covers the SDK setup in more detail.
-
-1. Copy the DSN key and keep it handy. Each project has a unique DSN (Data Source Name). The DSN tells the SDK where to send events, so events are associated with the right project. You'll need to paste the DSN key into your source code later so the errors generated in this tutorial go to your new project.
-
-   > You can also find a project's DSN anytime in **[Project] > Settings > Client Keys (DSN)**.
-
+    
+    - You'll notice that the Sentry React SDK setup code has come pre-populated with the project's unique DSN (Data Source Name). The DSN tells the SDK where to send events, so events are associated with the right project. You'll need to paste the DSN key into the SDK configuration code later in the tutorial. You can make a note of it now, or you can also find a project's DSN anytime in **[Project] > Settings > Client Keys (DSN)**
 1. Click **Take me to Issues** to go to your new project's **Issues** page.
 
 ### UI Walkthrough

docs/product/sentry-basics/distributed-tracing/generate-first-error.mdx

@@ -16,14 +16,15 @@ If you're using your own source code, skip this step. Instead, select your [plat
 
 1. In the `tracing-tutorial-frontend` repo, open `src/App.js` and update the `onClick` handler by replacing the string passed to the `getProduct()` function from `nonfat-water` to `debug-sentry`.
 
-```jsx {filename:App.js} {7}
+```jsx diff {filename:App.js} {7}
     <div className="btn-parent">
         <button className="btn" onClick={() => getProduct("clown-shoes")}>
             Clown Shoes
         </button>
     </div>
     <div className="btn-parent">
-        <button className="btn" onClick={() => getProduct("debug-sentry")}>
+-      <button className="btn" onClick={() => getProduct("nonfat-water")}>
++      <button className="btn" onClick={() => getProduct("debug-sentry")}>
         Nonfat Water
        </button>
     </div>
@@ -41,9 +42,9 @@ app.get("/products/debug-sentry", (req, res) => {
 
 1. Save the file.
 
-1. Go back to the browser window and try clicking on the **Nonfat Water** button again, you will no longer see the expected product information. Instead, you'll see text saying something went wrong.  If you look at line 88 of the `App.js` file in the `tracing-tutorial-frontend` repo, you'll see this is what the frontend displays when it's call to the backend doesn't return any data.
+1. Go back to the browser window and try clicking on the **Nonfat Water** button again, you will no longer see the expected product information. Instead, you'll see text saying something went wrong.  If you look to the bottom of the `App.js` file in the `tracing-tutorial-frontend` repo, you'll see this is what the frontend displays when the call to the backend doesn't return any data.
 
-1. Open the terminal window that's running the `tracing-tutorial-backend` server. Here, you'll see that a log letting you know that an error has occurred.
+1. Open the terminal window that's running the `tracing-tutorial-backend` server. Here, you'll see a log letting you know that an error has occurred.
 
 ```bash
 Sentry Error thrown!

docs/product/sentry-basics/distributed-tracing/index.mdx

@@ -4,13 +4,13 @@ sidebar_order: 1
 description: "Follow this tutorial to set up Sentry error monitoring and distributed tracing for a sample fullstack JavaScript application. By the end, you'll be able to trigger an error and a trace and see it in Sentry.io"
 ---
 
-This step-by-step tutorial walks you through setting up Sentry in both a frontend and backend sample application. After completing this tutorial you'll be able to trace the source and impact of your issues across projects and platforms. As part of this tutorial, you will:
+This step-by-step tutorial walks you through setting up Sentry in both a frontend (React) and backend (Express) sample application. After completing this tutorial you'll be able to trace the source and impact of your issues across projects and platforms. As part of this tutorial, you will:
 
 - Configure the Sentry SDK on a sample React and Node/Express app.
 - Trigger a sample front-end error that in turn triggers a sample back-end error.
 - Go to the [Traces](https://sentry.io/orgredirect/organizations/:orgslug/traces/) page in Sentry and see a detailed view of your entire trace.
 
-This tutorial uses a [sample React application](https://github.com/getsentry/tracing-tutorial-frontend) on the frontend as well as a sample [Node/Express API](https://github.com/getsentry/tracing-tutorial-backend) on the backend. Some familiarity with JavaScript will help you follow along. If you'd prefer, you can also apply the same steps to your own project, assuming you're running React on the frontend and Node/Express on the backend.
+This tutorial uses a [sample React application](https://github.com/getsentry/tracing-tutorial-frontend) on the frontend as well as a sample [Express API](https://github.com/getsentry/tracing-tutorial-backend) on the backend. Some familiarity with JavaScript will help you follow along. If you'd prefer, you can also apply the same steps to your own project, assuming you're running React on the frontend and Express on the backend.
 
 ## Prerequisites
 

docs/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-backend.mdx

@@ -32,11 +32,9 @@ The sample application is a basic backend application using Express and Node.
 
 Sentry captures data by using a platform-specific SDK that you add to your application's runtime. To use the SDK, import and configure it in your source code. This demo project uses [Sentry's Node SDK](https://github.com/getsentry/sentry-javascript/tree/master/packages/node).
 
-1. Install the Sentry Express SDK using NPM.
-
-   Make sure you're in the `tracing-tutorial-backend` project folder.
-      {/* TODO: UPDATE NAME OF THIS REPO */}
+1. Navigate to the tracing-tutorial-backend` project folder and install the Sentry Express SDK using NPM.
 
+   {/* TODO: UPDATE NAME OF THIS REPO */}
 
    ```bash {tabTitle:npm}
    npm install --save @sentry/node @sentry/profiling-node
@@ -50,9 +48,7 @@ Sentry captures data by using a platform-specific SDK that you add to your appli
    pnpm add @sentry/node @sentry/profiling-node
    ```
 
-1. Import and initialize the SDK.
-
-   Create a file at the root level of your project and call it `instrument.js`
+1. Create a file at the root level of your project and call it `instrument.js`. Import and initialize the SDK using the following code:
 
     ```javascript {filename:instrument.js}
    const Sentry = require("@sentry/node");
@@ -64,8 +60,8 @@ Sentry captures data by using a platform-specific SDK that you add to your appli
         nodeProfilingIntegration(),
     ],
    // Tracing
+   // Capture 100% of the transactions
    tracesSampleRate: 1.0,
-   //  Capture 100% of the transactions
 
    // Set sampling rate for profiling - this is relative to tracesSampleRate
    profilesSampleRate: 1.0,
@@ -87,11 +83,11 @@ Sentry captures data by using a platform-specific SDK that you add to your appli
 
 1. Save the file.
 
-The options set in `Sentry.init()` are called the SDK's configuration. The only required configuration option is the DSN. However, the SDK supports many other configuration options. Learn more in our [Configuration](/platforms/javascript/guides/react/configuration/) docs.
+   The options set in `Sentry.init()` are called the SDK's configuration. The only required configuration option is the DSN. However, the SDK supports many other configuration options. Learn more in our [Configuration](/platforms/javascript/guides/react/configuration/) docs.
 
-The configuration above enables Sentry's error monitoring feature, as well as its [Tracing](will add link later) and [Session Replay](/platforms/javascript/guides/react/session-replay) features.
+   The configuration above enables Sentry's error monitoring feature, as well as its [Tracing](will add link later) and [Session Replay](/platforms/javascript/guides/react/session-replay) features.
 
-Be sure to import `instrument.js` at the top of your `server.js` file. Then import `Sentry` and set up the error handler after all controllers and before any other middleware:
+1. Import `instrument.js` at the top of your `server.js` file. Then import `Sentry` and set up the error handler after all controllers and before any other middleware:
 
  ``` javascript {filename:server.js} {1-7, 26-36}
     // IMPORTANT: Make sure to import `instrument.js` at the top of your file.