Component Basics in SolidJS

From the SolidJS cheat sheet · Components & JSX · verified Jul 2026

Components are functions that return JSX. They execute only once — reactivity handles updates.

tsx

// Quick Reference
const Greeting = (props) => {
  return <h1>Hello {props.name}</h1>;
};

// Usage: <Greeting name="SolidJS" />

💡 Components run only ONCE — unlike React, the function body is not re-executed on updates

⚡ Use class instead of className for HTML attributes in SolidJS JSX

📌 Do NOT destructure props — it breaks reactivity since props are lazy getters

🟢 SolidJS compiles JSX to real DOM operations, not a virtual DOM

componentsjsxbasics

More SolidJS tasks