[examples] Update React examples (#1122)

Author: augustjk

package-lock.json

@@ -172,6 +172,8 @@
     "@lit-labs/ssr": "^3.1.2",
     "@lit-labs/ssr-client": "^1.1.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "clean-css": "^5.1.0",
     "codemirror": "^5.58.2",
     "eleventy-plugin-nesting-toc": "^1.3.0",
@@ -203,7 +205,6 @@
     "@material/mwc-formfield": "^0.27.0",
     "@material/mwc-snackbar": "^0.27.0",
     "@material/mwc-textfield": "^0.27.0",
-    "@types/react": "^18.0.17",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "algoliasearch": "^4.14.2",
     "lit": "^2.7.4",

packages/lit-dev-content/package.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Carousel Transitions",
   "description": "Animated carousel.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-carousel.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-carousel/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Grid Layout Transitions",
   "description": "Animate css grid layouts.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-grid.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-grid/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "List/Detail Hero Transition",
   "description": "Hero animation.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-hero.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-hero/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Lit Logo Animation",
   "description": "Animate elements when they go in and out of the page.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-lit.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-in-out/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "List Item Animation",
   "description": "Animate list items.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-list.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-list/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Sliding Circle",
   "description": "Simple `animate()` directive example.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-slide.ts": {},
     "index.html": {},

packages/lit-dev-content/samples/examples/motion-simple/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Todos List Transitions",
   "description": "Animated list of todos.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-todos.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-todos/project.json

@@ -1,14 +1,15 @@
-import {React, ReactDOM} from './react.js';
+import React from 'https://esm.sh/react@18';
+import {createRoot} from 'https://esm.sh/react-dom@18/client';
 import {createComponent} from '@lit-labs/react';
 import {DemoGreeting as DemoGreetingWC} from './demo-greeting.js';
 
+// Creates a React component from a Lit component
 const DemoGreeting = createComponent({
   react: React,
   tagName: 'demo-greeting',
-  elementClass: DemoGreetingWC
+  elementClass: DemoGreetingWC,
 });
 
-const node = document.querySelector('#app');
-const root = ReactDOM.createRoot(node!);
+const root = createRoot(document.getElementById('app')!);
 
-root.render(<DemoGreeting name={'React'}></DemoGreeting>);
+root.render(<DemoGreeting name="React" />);