Создание проекта

Проект Solid собирается инструментом Vite — сервером разработки и сборщиком, который понимает JSX и мгновенно обновляет страницу при сохранении файла. Готовую заготовку проекта берут из официального репозитория шаблонов.

Что понадобится

Node.js версии 20 или новее и npm, который ставится вместе с ним:

node -v
npm -v

npx degit solidjs/templates/js todo-app
cd todo-app
npm install
npm run dev

degit копирует шаблон js из репозитория solidjs/templates в папку todo-app. После npm run dev в терминале появится адрес сервера разработки, в этом шаблоне — http://localhost:3000. Откройте его, и вы увидите стартовую страницу с логотипом Solid.

Есть и интерактивный мастер npm create solid@latest: он задаёт вопросы и умеет создавать также проекты SolidStart. Для курса подойдёт любой путь, если в итоге получился проект Solid на Vite без SolidStart.

Структура проекта

todo-app/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── index.jsx
    ├── index.css
    ├── App.jsx
    ├── App.module.css
    └── logo.svg

Файл	Что внутри
`index.html`	Страница с пустым `div` с id `root`
`src/index.jsx`	Точка входа: подключает `App` к странице
`src/App.jsx`	Главный компонент, с него вы и начнёте
`vite.config.js`	Настройки Vite и плагин Solid
`package.json`	Зависимости и команды `dev`, `build`, `serve`

Точка входа

// src/index.jsx
/* @refresh reload */
import { render } from 'solid-js/web';
import './index.css';
import App from './App';
 
const root = document.getElementById('root');
 
render(() => <App />, root);

Функция render из пакета solid-js/web вставляет компонент в элемент root. Первым аргументом передаётся функция, которая возвращает JSX, а не сам JSX.

Настройки Vite

// vite.config.js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
 
export default defineConfig({
  plugins: [solidPlugin()],
  server: { port: 3000 },
});

Плагин vite-plugin-solid превращает JSX в код Solid. Строка server задаёт порт сервера разработки.

Первая правка

Замените содержимое src/App.jsx:

// src/App.jsx
export default function App() {
  return <h1>Мои задачи</h1>;
}

Сохраните файл — страница в браузере обновится сама и покажет заголовок «Мои задачи».

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

Писать в src/index.jsx render(<App />, root), как в старом React. Solid ожидает функцию: render(() => <App />, root). Без стрелки страница останется пустой, а в консоли браузера появится ошибка.

Спасибо, что читаете!

Создание проекта

Что понадобится