Playground: fix how React is imported (#8332)

see https://twitter.com/sebmarkbage/status/1250284377138802689

website/playground/BottomBar.js

@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 
 const root = document.getElementById("bottom-bar");
 

website/playground/EditorState.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { stateToggler, shallowEqual } from "./helpers";
 import * as storage from "./storage";

website/playground/Playground.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { Button, ClipboardButton } from "./buttons";
 import EditorState from "./EditorState";

website/playground/PrettierFormat.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 export default class PrettierFormat extends React.Component {
   constructor() {

website/playground/VersionLink.js

@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 
 const root = document.getElementById("version");
 

website/playground/buttons.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import ClipboardJS from "clipboard";
 
 export const Button = React.forwardRef((props, ref) => (

website/playground/index.js

@@ -1,7 +1,7 @@
 import "codemirror-graphql/mode";
 
-import React from "react";
-import ReactDOM from "react-dom";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 
 import Playground from "./Playground";
 import VersionLink from "./VersionLink";

website/playground/panels.js

@@ -1,5 +1,5 @@
 import CodeMirror from "codemirror";
-import React from "react";
+import * as React from "react";
 
 class CodeMirrorPanel extends React.Component {
   constructor() {

website/playground/sidebar/SidebarOptions.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import groupBy from "lodash/groupBy";
 
 import { SidebarCategory } from "./components";

website/playground/sidebar/components.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 export function Sidebar({ visible, children }) {
   return (

website/playground/sidebar/inputs.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 export function Checkbox({ label: _label, title, checked, onChange }) {
   return (

website/playground/sidebar/options.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { Checkbox, Select, NumberInput } from "./inputs";