Оглавление
Solid
Библиотека интерфейсов с точной реактивностью: сигналы, компоненты, ресурсы и маршруты.
1.Начало работы
- Что такое SolidБиблиотека SolidJS, точная реактивность и главные отличия от React.
- Создание проектаКак создать проект Solid на Vite из официального шаблона и что лежит в его папках.
- Компоненты и JSXКак написать компонент Solid, вывести его в другом компоненте и чем JSX в Solid отличается от JSX в React.
- СигналыСостояние компонента в Solid: createSignal, чтение вызовом функции и изменение через сеттер.
- СобытияОбработка нажатий и ввода в Solid: onClick, onInput, передача данных в обработчик и нативные события через on:.
- ПропсыКак передать данные в компонент, почему пропсы в Solid нельзя деструктурировать и зачем нужны mergeProps и splitProps.
2.Реактивность
3.Вывод на страницу
- Условия: ShowКак показать или скрыть часть разметки по условию с компонентом Show и запасным содержимым fallback.
- Списки: For и IndexКак вывести массив на страницу компонентами For и Index и чем они отличаются.
- Несколько вариантов: Switch и MatchКак выбрать одну из нескольких веток разметки с компонентами Switch и Match.
- СтилиКак оформлять компоненты Solid: обычный CSS, атрибуты class и classList, style и CSS-модули.
4.Состояние и формы
- Хранилища: createStoreКак хранить списки и объекты в createStore, менять их по пути и с помощью produce.
- КонтекстКак передать данные глубоко в дерево компонентов без пропсов: createContext, Provider и useContext.
- Ссылки на элементы: refКак получить настоящий DOM-элемент в Solid через атрибут ref и когда им пользоваться.
- Формы и поля вводаКак связать поля формы с сигналами, обработать отправку и проверить введённые данные.
5.Данные с сервера
6.Маршрутизация
- Solid Router: установка и маршрутыКак подключить Solid Router, описать страницы маршрутами, сделать общий макет и ссылки.
- Параметры маршрута и навигацияКак сделать страницу статьи с параметром в адресе, прочитать его через useParams и перейти на другую страницу из кода.
- Загрузка данных для маршрутовКак загружать данные страниц через query и createAsync из Solid Router и начинать загрузку заранее через preload.