Компоненты и JSX

Компонент — это функция, которая возвращает разметку. Разметка пишется на JSX — синтаксисе, похожем на HTML, который Vite превращает в код создания настоящих DOM-узлов. Из компонентов, как из деталей, собирается вся страница.

Первый компонент

Создайте папку src/components и в ней файл TodoItem.jsx:

// src/components/TodoItem.jsx
export default function TodoItem() {
  return <li>Купить молоко</li>;
}

Имя компонента пишется с большой буквы: так JSX отличает компоненты от обычных тегов вроде li.

Использование компонента

Импортируйте компонент в src/App.jsx и вставьте его как тег:

// src/App.jsx
import TodoItem from './components/TodoItem';
 
export default function App() {
  return (
    <main>
      <h1>Мои задачи</h1>
      <ul>
        <TodoItem />
        <TodoItem />
      </ul>
    </main>
  );
}

На странице http://localhost:3000 под заголовком появится список из двух одинаковых пунктов. Как передать каждому свой текст, вы узнаете в уроке о пропсах.

Выражения в фигурных скобках

Внутри {} можно писать любое выражение JavaScript:

// src/App.jsx
export default function App() {
  const name = 'Анна';
 
  return <h1>Задачи: {name.toUpperCase()}</h1>;
}

Страница покажет «Задачи: АННА».

Отличия от JSX в React

Solid ближе к обычному HTML: атрибуты называются так же, а в style используются имена свойств CSS и строки с единицами. Фрагменты <> и </> работают так же, как в React.

Компонент выполняется один раз

// src/components/TodoItem.jsx
export default function TodoItem() {
  console.log('TodoItem создан');
 
  return <li>Купить молоко</li>;
}

В консоли браузера сообщение появится по одному разу на каждый TodoItem и больше не повторится, что бы ни менялось на странице. В React тело компонента выполняется при каждой перерисовке, в Solid — только при создании.

Частая ошибка

Возвращать из компонента несколько соседних тегов без обёртки:

// src/App.jsx
// Неправильно: два корневых элемента
// return <h1>Мои задачи</h1><ul></ul>;
 
export default function App() {
  return (
    <>
      <h1>Мои задачи</h1>
      <ul></ul>
    </>
  );
}

JSX-выражение должно иметь один корень. Оберните соседние элементы во фрагмент или в общий тег.