micro-frontends starter configured to use multiple frameworks
extend skeleton Component
class with one that renders content with particular framework
import * as React from "react";
import {render} from "react-dom";
import {Component} from "../core";
export class XClock extends Component {
static getName(): string {
return 'x-clock'
}
render(root: HTMLDivElement) {
render(
<Clock />,
root,
)
}
}
class Clock extends React.Component {
state = {
time: new Date(),
};
interval: NodeJS.Timeout;
componentDidMount(): void {
this.interval = setInterval(() => {
this.setState({
time: new Date()
})
}, 1000)
}
componentWillMount(): void {
clearInterval(this.interval)
}
render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
return (
<div>{this.state.time.toLocaleString()}</div>
)
}
}
then define component
define(XClock)
and use in markup
<x-clock></x-clock>