alterando componentes counter e logo pra react

src/components/counter/index.jsx

@@ -0,0 +1,13 @@
+import './counter.css';
+import React from 'react';
+import SetupCounter from '../../counter';
+
+export function Counter() {
+  return (
+    <div className="card">
+      <button id="counter" type="button">
+        <SetupCounter />
+      </button>
+    </div>
+  );
+}

src/components/logo/index.js → src/components/logo/index.jsx

@@ -1,4 +1,5 @@
 import './logo.css'
+import React from 'react';
 
 
 /**
@@ -9,10 +10,10 @@ import './logo.css'
  * 
  * @param {LogoProps} props
  */
-export function logo({link, imgSrc, descricao}) {
-  return `
-    <a class="logo" href="${link}" target="_blank">
-      <img src="${imgSrc}" class="logo" alt="${descricao}" />
+export function Logo({link, imgSrc, descricao}) {
+  return (
+    <a className="logo" href={link} target="_blank">
+      <img src={imgSrc} className="logo" alt={descricao} />
     </a>
-  `
+  );
 }

src/counter.jsx

@@ -0,0 +1,19 @@
+
+
+import React, { useState } from 'react';
+
+function SetupCounter() {
+  const [counter, setCounter] = useState(0);
+
+  const handleClick = () => {
+    setCounter(counter + 1);
+  };
+
+  return (
+    <div onClick={handleClick}>
+      {`count is ${counter}`}
+    </div>
+  );
+}
+
+export default SetupCounter;

src/main.jsx

@@ -5,33 +5,33 @@ import viteLogo from '/vite.svg'
 import storybookLogo from '/storybook.svg'
 import { $ } from "./select";
 import './style.css'
-import { logo } from "./components/logo";
-import { counter } from "./components/counter";
+import { Logo } from "./components/logo";
+import { Counter } from "./components/counter";
 
 const app = $("#app");
 
 ReactDOM.createRoot(app).render(
   <React.StrictMode>
     <div>
       <h2> REACT VERSION</h2>
-      {logo({
+      {Logo({
         link: "https://vitejs.dev",
         imgSrc: viteLogo,
         descricao: "Vite logo",
       })}
-      $
-      {logo({
+
+      {Logo({
         link: "https://www.typescriptlang.org/",
         imgSrc: typescriptLogo,
         descricao: "TypeScript logo",
       })}
-      $
-      {logo({
+
+      {Logo({
         link: "https://storybookjs.org/",
         imgSrc: storybookLogo,
         descricao: "Storybook logo",
       })}
-      <h1>Vite + TypeScript + Storybook</h1>${counter()}
+      <h1>Vite + TypeScript + Storybook</h1>{Counter()}
       <p className="read-the-docs">
         Click on the Vite, TypeScript and Storybook logos to learn more
       </p>