
Enter a search term above to see results...
Enter a search term above to see results...
This lesson introduces your first UI component. We’ll create a simple time display that updates every second. You’ll learn the basics of component definition, templates, and reactivity.
Component Definition: The defineComponent
function creates a web component with a specified tag name.
Template: The template contains HTML with expressions in curly braces {}
that display reactive data.
State: The defaultState
object defines reactive properties that automatically update the UI when changed.
Lifecycle: The onCreated
function runs when the component is initialized
Reactivity: Using state.time.now()
updates the time and automatically refreshes the display.
Looking at component.js, notice how:
defineComponent
to create a new web component with html tag tagName
defaultState
specifies our internal state, in this example we track time
{formatDate time "h:mm:ss a"}
to display formatted time with the time from state
css variables
in our component styling to inherit from our page theme.onCreated
sets up a timer that updates every secondWe use page.html to show how you might use your new component in a page. You can now use <hello-world></hello-world>
anywhere you write code on the front end.
Modify the component to include your name in the greeting and add the current date alongside the time.
Hint: You’ll need to: