Preact

A simpler version of react.

A prop is a custom property.

Preact Components

• Components are the building blocks of a Preact application
• Components have custom properties (i.e. ”props“)
• Example using a custom component:

const vdom = (
<div>
    <h1>My component is below here:</h1>
    <MyComponent msg="hi component" />
</div>
);

Functional Components Declarative 36 Functions are the most common way to create components:

function MyComponent(props: { msg: string }) {
return (
<div class="container">
<p>{props.msg}</p>
<button>Ok</button>
</div>
);
}

So you have a single render call in Preact.

Alright, now you need to understand how the signals and effects work.

Avoid using classes to define components, you should define components with functions.

Components can also be defined as classes

• method is no longer common, functional components are better

class MyComponent extends Component<{ msg: string }> {
 
    constructor(props: { msg: string }) {
        super(props);
    }
    render() {
    return (
        <div class="container">
        <p>{this.props.msg}</p>
        <button>Ok</button>
        </div>
    );
}

Related

• Virtual DOM