Creating components

To create a DoksJS component, you need to create a JavaScript class that extends the Component class. The Component class is a base class that provides all of the functionality that you need to create a DoksJS component.

Here is an example of a DoksJS component that displays a button:

class Button extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isPressed: false,
    };
  }

  handleClick() {
    this.setState({
      isPressed: true,
    });
  }

  render() {
    return (
      <button
        type="button"
        onClick={this.handleClick}
        style={{
          background: this.state.isPressed ? 'red' : 'green',
          color: 'white',
          padding: 10,
        }}
      >
        Click me!
      </button>
    );
  }
}

export default Button;

This component has a constructor that takes in the props and initializes the state. The state variable isPressed tracks whether or not the button has been clicked. The handleClick() function is called when the button is clicked and it updates the state variable isPressed. The render() function renders the button component and sets the style of the button based on the value of the state variable isPressed.

To use the Button component in your application, you will need to import it and then instantiate it. For example, the following code will create a button and add it to the DOM:

import { Button } from 'my-app';

const button = new Button({
  text: 'Click me!',
});

document.body.appendChild(button);

This code will create a button with the text "Click me!". When the user clicks the button, it will log the message "Button clicked!" to the console.