Skip to main content

DeshiJs Component

To create a component in your framework, follow these steps:

  1. Create a New Component File

    Start by creating a new JavaScript file for your component, e.g., Button.js.

    // Button.js
    import "../assets/styles.css";

    const Button = (props) => {
      return /*html*/ `
        <button>${props.content}</button>
      `;
    };

    export default Button;

Using a Component

To use your newly created component in an application:

  1. Import and Register the Component

Import the component in your main application file and register it using the useComponent function.

// App.js
import deshi from "//unpkg.com/deshijs";
deshi.init();
import Button from "./components/Button.js";

const App = () => {
  return /*html*/ `
    <template app>
        <btn content="Click me!"></btn>
    </template>
  `;
};

useComponent("btn", Button);
export default App;

In this example:

  • Button is registered with the identifier "btn".
  • The btn component can now be used in the App template with the <btn></btn> tag.

Component Usage​

nside the template of your main application:

  • The <btn> tag will render the Button component.