Your first app

Solid apps are built from functions that return JSX. JSX looks like HTML, but each tag becomes a real DOM element: there is no virtual DOM in between.

function App() {
  const name = "Solid";
  return <h1>Hello {name}!</h1>;
}

Curly braces put a JavaScript expression into the markup. Attributes use their HTML names, such as class and for. A component that returns several elements side by side wraps them in a fragment, <>...</>.

render from @solidjs/web mounts the app into the page's app element. The editor above runs this code; the preview below shows the result.

Try it: greet name instead of "world", then add a paragraph under the heading. Use Solve to compare your answer and Reset to start over.