Function components

A component is just a function that returns a template. You compose them by calling one inside another's template.

# Defining a component

function Greeting({ name }) {
  return html`<h2>Hello, ${name}</h2>`;
}

# Using a component

Call it inside a template:

function App() {
  return html`
    <div>
      ${Greeting({ name: "Ada" })}
      ${Greeting({ name: "Grace" })}
    </div>
  `;
}

# Reactive props

Components run once. If you pass a plain value, it is frozen at that moment. To keep a prop reactive, pass the signal itself and read it with a function in the child:

function Counter({ count }) {
  return html`<p>${() => count.value}</p>`;
}

function App() {
  const count = signal(0);
  return html`${Counter({ count })}`; // pass the signal, not count.value
}

# Your task

The Greeting component is defined but not used. Render two greetings inside App with different names.