chore: import upstream snapshot with attribution

docs/md/how_to/javascript/react.md

@@ -0,0 +1,57 @@
+# React Component
+
+We provide a React wrapper to prevent common issues and mistakes associated with
+using the perspective-viewer web component in the context of React.
+
+Before trying this example, please take a look at
+[how to bootstrap perspective](./importing.md).
+
+## `PerspectiveViewer`
+
+A simple example using the `PerspectiveViewer` component:
+
+```typescript
+import React, { useCallback, useEffect, useRef } from "react";
+import {
+    PerspectiveViewer,
+} from "@perspective-dev/react";
+import perspective from "@perspective-dev/client";
+
+function App() {
+    const worker = useRef(null);
+
+    useEffect(() => {
+        (async () => {
+            worker.current = await perspective.worker();
+            const resp = await fetch("data.arrow");
+            const arrow = await resp.arrayBuffer();
+            await worker.current.table(arrow, { name: "my_table" });
+        })();
+    }, []);
+
+    return (
+            <PerspectiveViewer
+                client={worker.current}
+                config={{group_by: ["State"], columns: ["Sales"]}}
+            />
+    );
+}
+```
+
+## `PerspectiveWorkspace`
+
+For multi-viewer layouts, use `PerspectiveWorkspace`:
+
+```typescript
+import { PerspectiveWorkspace } from "@perspective-dev/react";
+
+const WORKSPACE_CONFIG =  // ...
+
+function Dashboard() {
+    return (
+        <PerspectiveWorkspace
+            client={perspective.worker()}
+            config={WORKSPACE_CONFIG} />
+    );
+}
+```