Components and JSX

A component is a function that returns markup. The markup is written in JSX — an HTML-like syntax that Vite turns into code that creates real DOM nodes. The whole page is assembled from components like a set of parts.

The first component

Create the src/components folder with a TodoItem.jsx file in it:

// src/components/TodoItem.jsx
export default function TodoItem() {
  return <li>Buy milk</li>;
}

A component name starts with a capital letter: that is how JSX tells components apart from plain tags like li.

Using the component

Import the component in src/App.jsx and put it in the markup as a tag:

// src/App.jsx
import TodoItem from './components/TodoItem';
 
export default function App() {
  return (
    <main>
      <h1>My tasks</h1>
      <ul>
        <TodoItem />
        <TodoItem />
      </ul>
    </main>
  );
}

At http://localhost:3000 a list of two identical items appears under the heading. How to give each one its own text is covered in the lesson on props.

Expressions in curly braces

Inside {} you can write any JavaScript expression:

// src/App.jsx
export default function App() {
  const name = 'Anna';
 
  return <h1>Tasks: {name.toUpperCase()}</h1>;
}

The page shows "Tasks: ANNA".

Differences from React JSX

Solid stays closer to plain HTML: attributes keep their names, and style uses CSS property names and strings with units. Fragments <> and </> work the same as in React.

A component runs once

// src/components/TodoItem.jsx
export default function TodoItem() {
  console.log('TodoItem created');
 
  return <li>Buy milk</li>;
}

The browser console shows the message once for each TodoItem and never again, whatever changes on the page. In React a component body runs on every re-render; in Solid it runs only on creation.

Common mistake

Returning several sibling tags from a component without a wrapper:

// src/App.jsx
// Wrong: two root elements
// return <h1>My tasks</h1><ul></ul>;
 
export default function App() {
  return (
    <>
      <h1>My tasks</h1>
      <ul></ul>
    </>
  );
}

A JSX expression must have one root. Wrap sibling elements in a fragment or a common tag.