Solid.js JSX — Compilation and Template Syntax

In this tutorial, you will learn about Solid.js JSX. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js JSX: understand how Solid compiles JSX to real DOM operations, use JSX expressions, and leverage control flow components for reactive rendering.

In this lesson, you'll understand how Solid.js compiles JSX into direct DOM manipulations, use expressions, and work with control flow components.

What You'll Learn

How JSX compilation works in Solid.js, use expressions, conditionals, lists, and the built-in control flow components.

Why It Matters

Solid.js's compiler transforms JSX into fine-grained DOM operations. Understanding this helps you write efficient templates and avoid common pitfalls.

Real-World Use

Doda Browser's component templates compile to direct DOM operations, updating only the text nodes or attributes that change.

flowchart LR
    A[JSX Template] --> B[Solid Compiler]
    B --> C[DOM Creation]
    B --> D[Reactive Bindings]
    C --> E[Real DOM]
    D --> F[Targeted Updates]
    style B fill:#2c4f7c,color:#fff

JSX Expressions

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

The {} syntax interpolates JavaScript expressions. Solid.js compiles this into direct text node manipulation.

Spread Attributes

function Input(props) {
  return <input {...props} />;
}

<Input type="text" placeholder="Name" disabled={false} />

Dynamic Attributes

function Link({ url, active }) {
  return (
    <a
      href={url()}
      class={active() ? "active" : ""}
      style={{ color: active() ? "blue" : "gray" }}
    >
      Click me
    </a>
  );
}

Inner HTML

function RichText({ html }) {
  return <div innerHTML={html()} />;
}

Template Literals in JSX

function Card({ title, theme }) {
  return <div class={`card card-${theme()}`}>{title()}</div>;
}

Common Mistakes

1. Using .map() instead of <For>: <For> tracks items by identity and efficiently updates the DOM. .map() recreates all DOM nodes on every change.
2. Forgetting that expressions are functions: In Solid.js, JSX expressions are compiled into reactive bindings, not re-evaluated on each render.
3. Using dangerouslySetInnerHTML: Solid.js uses innerHTML prop directly. No special attribute needed.
4. Not using <Show> for conditional rendering: Ternary expressions work but <Show> is optimized for toggle patterns.
5. Inline event handlers in loops: In Solid.js, onClick={handler} works correctly without performance concerns.

Practice Questions

1. How does Solid.js compile JSX differently from React? Answer: Solid.js compiles JSX into direct DOM creation and reactive bindings. React compiles to Virtual Dom creation.

2. What is the purpose of the <For> component? Answer: Efficiently renders lists by tracking each item by identity, only updating changed items instead of recreating all DOM nodes.

3. How do you set HTML content dangerously? Answer: Use the innerHTML attribute: <div innerHTML={htmlString} />.

4. Can you use inline styles in JSX? Answer: Yes. Use the style prop with an object: style={{ color: "red" }}.

Challenge

Build a component that uses <For> to render a list, <Show> for empty state, <Switch>/<Match> for status-based rendering, and dynamic class names.

Mini Project

Create a notification list using JSX control flow: <For> for the list, <Show> for empty state, <Switch> for notification type icons, and dynamic styles for read/unread status.

FAQ

What's Next

Learn about Solid.js Conditional Rendering for advanced conditional patterns with Show, Switch, and Match.