34 lines
1.0 KiB
Plaintext
34 lines
1.0 KiB
Plaintext
|
package main
|
||
|
|
|
||
|
|
templ Hello(name string) {
|
||
|
|
<div data-name={ name }>
|
||
|
|
<script>
|
||
|
|
// Place the React component into the parent div.
|
||
|
|
bundle.renderHello(document.currentScript.closest('div'));
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
templ page() {
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>React integration</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="react-header"></div>
|
||
|
|
<div id="react-content"></div>
|
||
|
|
<div>
|
||
|
|
This is server-side content from templ.
|
||
|
|
</div>
|
||
|
|
<!-- Load the React bundle that was created using esbuild -->
|
||
|
|
<!-- Since the bundle was coded to expect the react-header and react-content elements to exist already, in this case, the script has to be loaded after the elements are on the page -->
|
||
|
|
<script src="static/index.js"></script>
|
||
|
|
<!-- Now that the React bundle is loaded, we can use the functions that are in it -->
|
||
|
|
<!-- the renderName function in the bundle can be used, but we want to pass it some server-side data -->
|
||
|
|
for _, name := range []string{"Alice", "Bob", "Charlie"} {
|
||
|
|
@Hello(name)
|
||
|
|
}
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
}
|