[docs] Tighten up wording & structure of Usage page (#1624)

This PR tightens up the wording of the Usage docs page, and it
restructures it slightly.

See my comments in the code for more info.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Documentation: Impoved clarity of wording and structure of the Usage
page.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

apps/docs/content/docs/usage.mdx

@@ -6,15 +6,13 @@ date: 3/22/2023
 order: 2
 ---
 
-The `<Tldraw/>` component is the easiest way to get started with tldraw. It combines several lower-level libraries: the `TldrawEditor` component from `@tldraw/editor` and the `TldrawUi` component from `@tldraw/ui`.
-
-To use the `<Tldraw/>` component, create a file like this one:
+The `<Tldraw>` component is the easiest way to get started. To use it, create a file like this one:
 
 ```tsx
 import { Tldraw } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 
-export default function TldrawExample() {
+export default function () {
 	return (
 		<div style={{ position: 'fixed', inset: 0 }} >
 			<Tldraw />
@@ -25,28 +23,26 @@ export default function TldrawExample() {
 
 ### CSS
 
-In order to use the `<Tldraw/>` component, you should also import the `tldraw.css` file from the `@tldraw/tldraw` library. You can alternatively import this file inside of another CSS file using the `@import` syntax.
+In order to use the `<Tldraw>` component, you should also import the `tldraw.css` file from the `@tldraw/tldraw` package. You can alternatively import this file inside of another CSS file using the `@import` syntax.
 
 You can overwrite these files with other CSS or copy the contents into a different file and import that instead.
 
 ### HTML
 
-If you're using the tldraw component in a full-screen app, you probably also want to updte your `index.html`'s meta viewport element as shown below. 
+If you're using the `<Tldraw>` component in a full-screen app, you probably also want to update your `index.html`'s meta viewport element as shown below. 
 
 ```html
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 ```
 
-This change may not be critical to `<Tldraw/>` performing correctly, however some features (such as safe area positioning) will not work correctly if these viewport options are not set.
-
-## Server rendering
-
-The `<Tldraw/>` component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you will need to import it dynamically. Check the [examples repository](https://github.com/tldraw/examples) to see examples.
+This may not be critical to `<Tldraw>` performing correctly, however some features (such as safe area positioning) will only work correctly if these viewport options are set.
 
 ## Using in Next.js, Create React App, Vite, etc.
 
-Check the [examples repository](https://github.com/tldraw/examples) to see examples of the tldraw component being used in various frameworks.
+Check the [examples repository](https://github.com/tldraw/examples) to see examples of tldraw being used in various frameworks.
+
+By the way, the `<Tldraw>` component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you need to import it dynamically. 
 
 ## Going deeper
 
-If you wanted to have more granular control, you could also use those lower-level components directly. See [this example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for reference.
+The `<Tldraw>` component combines two lower-level components: `<TldrawEditor>` and `<TldrawUi>`. If you want to have more granular control, you can use those lower-level components directly. See [this example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for reference.