25 lines
841 B
TypeScript
25 lines
841 B
TypeScript
|
import { createRoot } from 'react-dom/client';
|
||
|
|
import { Header, Body, Hello } from './components';
|
||
|
|
|
||
|
|
// Render the React component into the templ page at the react-header.
|
||
|
|
const headerRoot = document.getElementById('react-header');
|
||
|
|
if (!headerRoot) {
|
||
|
|
throw new Error('Could not find element with id react-header');
|
||
|
|
}
|
||
|
|
const headerReactRoot = createRoot(headerRoot);
|
||
|
|
headerReactRoot.render(Header());
|
||
|
|
|
||
|
|
// Add the body React component.
|
||
|
|
const contentRoot = document.getElementById('react-content');
|
||
|
|
if (!contentRoot) {
|
||
|
|
throw new Error('Could not find element with id react-content');
|
||
|
|
}
|
||
|
|
const contentReactRoot = createRoot(contentRoot);
|
||
|
|
contentReactRoot.render(Body());
|
||
|
|
|
||
|
|
// Provide a helper for rendering hello.
|
||
|
|
export function renderHello(e: HTMLElement) {
|
||
|
|
const name = e.getAttribute('data-name') ?? "";
|
||
|
|
createRoot(e).render(Hello(name));
|
||
|
|
}
|