Getting Started
Core Concepts
Control
Interactivity
Performance
Pushing Data
HTMX Extensions
Miscellaneous
Configuration
Components
Components are re-usable bits of logic to render HTML. Similar to how in React components are Javascript functions, in htmgo, components are pure go functions.
A component can be pure, or it can have data fetching logic inside of it. Since htmgo uses htmx for interactivity, there is NO re-rendering of your UI automatically from the framework, which means you can safely put data fetching logic inside of components since you can be sure they will only be called by your own code.
Example:
1// route will be automatically registered based on the file name
2func HelloHtmgoPage(ctx *h.RequestContext) *h.Page {
3 return h.NewPage(
4 h.Html(
5 h.HxExtension(h.BaseExtensions()),
6 h.Head(
7 h.Link("/public/main.css", "stylesheet"),
8 h.Script("/public/htmgo.js"),
9 ),
10 h.Body(
11 h.Pf("Hello, htmgo!"),
12 ),
13 ),
14 )
15}My card component here fetches all my tasks I have on my list, and renders each task.
If you are familiar with React, then you would likely place this fetch logic inside of a useEffect or (useQuery library) so it is not constantly re-fetched as the component re-renders.
With htmgo, the only way to update content on the page is to use htmx to swap out the content from loading a partial. Therefore you control exactly when this card component is called, not the framework behind the scenes.
You'll learn more about swapping in the next few pages.