feat(Templates): update react and jest-react starter templates to use…

… the new jsx runtime
live-codes · Jan 21, 2024 · 2e5b9d1 · 2e5b9d1
1 parent a5cb868
commit 2e5b9d1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/src/livecodes/templates/starter/jest-react-starter.ts b/src/livecodes/templates/starter/jest-react-starter.ts
@@ -8,9 +8,7 @@ export const jestReactStarter: Template = {
   autotest: true,
   markup: {
     language: 'html',
-    content: `
-<div id="app">Loading...</div>
-`.trimStart(),
+    content: '',
   },
   style: {
     language: 'css',
@@ -33,12 +31,11 @@ export const jestReactStarter: Template = {
   script: {
     language: 'jsx',
     content: `
-import React, { useState } from "react";
-import { createRoot } from "react-dom/client";
+import { useState } from "react";
 
 export const increment = (count) => (count ?? 0) + 1;
 
-export default function App(props) {
+function Counter(props) {
   const [count, setCount] = useState(0);
   return (
     <div className="container">
@@ -51,8 +48,9 @@ export default function App(props) {
   );
 }
 
-const root = createRoot(document.querySelector("#app"));
-root.render(<App name="Jest with React" />);
+export default function App() {
+  return <Counter name="Jest with React" />;
+}
 `.trimStart(),
   },
   tests: {

diff --git a/src/livecodes/templates/starter/react-starter.ts b/src/livecodes/templates/starter/react-starter.ts
@@ -7,7 +7,7 @@ export const reactStarter: Template = {
   activeEditor: 'script',
   markup: {
     language: 'html',
-    content: '<div id="app">Loading...</div>\n',
+    content: '',
   },
   style: {
     language: 'css',
@@ -25,10 +25,9 @@ export const reactStarter: Template = {
   script: {
     language: 'jsx',
     content: `
-import React, { useState } from "react";
-import { createRoot } from "react-dom/client";
+import { useState } from "react";
 
-function App(props) {
+function Counter(props) {
   const [count, setCount] = useState(0);
   return (
     <div className="container">
@@ -40,8 +39,9 @@ function App(props) {
   );
 }
 
-const root = createRoot(document.querySelector("#app"));
-root.render(<App name="React" />);
+export default function App() {
+  return <Counter name="React" />;
+}
 `.trimStart(),
   },
   stylesheets: [],