Migration JS in React

src/components/counter/counter.stories.ts

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/html';
 
-import { counter } from './index';
+import { Counter } from './index';
 
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta = {
@@ -12,7 +12,7 @@ const meta = {
   render: () => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    return counter();
+    return Counter();
   },
 } satisfies Meta;
 

src/components/counter/index.jsx

@@ -0,0 +1,19 @@
+import './counter.css';
+import React from "react";
+import { useState } from "react"
+export function Counter() {
+
+const[counter, setCounter] = useState(0)
+
+function upCounter() {
+  setCounter(counter + 1)
+}
+
+  return (
+    <div className="Card">
+      <button onClick={upCounter}  id="counter" type="button">
+        count is {counter}
+      </button>
+    </div>
+  );
+}

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

@@ -1,18 +1,18 @@
 import './logo.css'
-
+import React from 'react';
 
 /**
  * @typedef {Object} LogoProps
  * @property {string} LogoProps.link - some description here
  * @property {string} LogoProps.imgSrc - some description here
  * @property {string} LogoProps.descricao - some description here
- * 
+ *
  * @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/components/logo/logo.stories.ts

@@ -1,14 +1,14 @@
 import type { StoryObj, Meta } from '@storybook/html';
 
-import { logo } from './index';
+import { Logo } from './index';
 import type {LogoProps} from './index';
 
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta = {
   title: 'App/Logo',
   tags: ['autodocs'],
   render: (args) => {
-    return logo(args);
+    return Logo(args);
   },
   argTypes: {
     link: {description: 'endereço para o link do logo'},

src/main.jsx

@@ -5,33 +5,34 @@ 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({
-        link: "https://vitejs.dev",
-        imgSrc: viteLogo,
-        descricao: "Vite logo",
-      })}
-      $
-      {logo({
-        link: "https://www.typescriptlang.org/",
-        imgSrc: typescriptLogo,
-        descricao: "TypeScript logo",
-      })}
-      $
-      {logo({
-        link: "https://storybookjs.org/",
-        imgSrc: storybookLogo,
-        descricao: "Storybook logo",
-      })}
-      <h1>Vite + TypeScript + Storybook</h1>${counter()}
+      <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"
+      ></Logo>
+      <h1>Vite + TypeScript + Storybook</h1>
+      <Counter></Counter>
       <p className="read-the-docs">
         Click on the Vite, TypeScript and Storybook logos to learn more
       </p>