Preact - одна из альтернативных фреймворков React, которую вы должны попробовать в своем проекте. Причина в том, что эта структура обеспечивает отличную производительность при меньшем размере пакета. Это легкий фреймворк, который делает его синтаксис более простым и понятным в использовании. А поскольку размер его пакета меньше, чем у React, ваши пользователи будут загружать меньше кодов JavaScript для его анализа и выполнения. Есть некоторые сравнения между React и Preact, и в результате, как мы могли догадаться, размер пакета Preact был на 78% меньше и имел на 17% более высокую производительность, чем React.
Если вы разработчик React, вам будет легко начать работу с Preact. Конечно, есть некоторые отличия от React, но в целом эта статья может помочь вам настроить быстрее, потому что в этой статье у нас будет полный шаблон - PreactJS с Typescript и SCSS, а также MobX Lite для управления нашим глобальным состоянием.
Если вы работаете с другим фреймворком JavaScript, например Vue.js, не пугайтесь, PreactJS может быть не таким страшным, как вы думали. Вы можете заняться этим менее чем за неделю. И, очевидно, стоит попробовать PreactJS для своего следующего интерфейсного проекта.
Еще кое-что, прежде чем мы начнем. Если вам интересно, почему мы должны использовать TypeScript вместо JavaScript? Что ж, будут некоторые пояснения. Но, короче, TypeScript более надежен с его явными типами. Поэтому TypeScript отлично подходит для больших / сложных проектов.
Обзор
- Наши цели
- Машинопись и SCSS - Домашняя страница
- Машинопись и SCSS - Страница профиля
- Машинопись и SCSS - Маршрутизатор / Компонент приложения
- Интернет-провайдер с MobX Lite
# 1 Наши цели
Наши цели в этой статье - изменить существующий шаблон, который уже есть в PreactJS с Typescript и SCSS, и добавить MobX для управления глобальным состоянием.
Прежде всего, давайте создадим новую установку Preact.
npx preact-cli create default my-project
Как вы заметили, свежая установка Preact использует классы Javascript и CSS. Но в этой статье мы будем использовать Typescript с SCSS. Итак, для начала давайте изменим главную страницу.
# 2 Машинопись и SCSS - Домашняя страница
Давайте откроем src / routes / home / index.js и изменим имя файла на index.ts. Тогда это приведет к ошибкам, потому что нам нужно внести в него некоторые корректировки. В этой статье мы воспользуемся пакетом npm htm, который поможет нам вернуть JSX.
npm i htm
Затем мы можем изменить index.ts на этот:
Обратите внимание, что мы используем FunctionalComponent из Preact, также мы используем пакет htm, который мы только что установили, и легко возвращаем JSX, используя синтаксис html ``.
Пока все хорошо, но как насчет SCSS? Внедрить SCSS в проект довольно просто, нам нужно только несколько пакетов, которые скомпилируют наш SCSS.
npm i --save-dev node-sass sass-loader@10
Затем давайте изменим имя файла src / routes / home / style.css на style.sccs и импортируем его на Домашнюю страницу.
import style from './style.scss'; ...
# 3 Машинопись и SCSS - Страница профиля
Давайте продолжим изменять страницу Профиль с помощью Typescript и SCSS. Затем откройте src / routes / profile / index.js и измените имя файла на index.ts. Также не забудьте изменить имя style.css на style.scss.
Для обработки состояния мы можем просто использовать перехватчики Preact внутри FunctionalComponent. Как вы, возможно, уже знаете, FunctionalComponent - это компонент без сохранения состояния, но благодаря Preact Hooks мы можем сделать этот компонент «с отслеживанием состояния» всякий раз, когда нам это нужно.
# 4 Typescript и SCSS - компонент маршрутизатора / приложения
Последнее, что нужно сделать, это преобразовать наш компонент маршрутизатора с помощью Typescript. Откройте src / components / app.js и измените имя файла на app.ts
Магазин №5 с MobX Lite
Пришло время управлять нашим глобальным состоянием. Прежде чем продолжить, нам понадобится пакет mobx, поэтому давайте сначала установим его.
npm i mobx-react-lite
Затем создайте новый файл в src / services / StoreContext.ts.
Затем нам нужно импортировать наш StoreContext, чтобы сделать его доступным для всех наших страниц и компонентов. Давайте изменим src / components / app.ts.
Как вы можете видеть в строке 14, мы добавили только что созданный StoreProvider. Мы должны проверить это, правильно ли работает наше глобальное состояние, не так ли?
Если вы помните, на странице Профиль мы сами управляем состоянием счетчика. В целях тестирования мы переместим состояние счетчика глобально.
Итак, мы идем. Нам удалось использовать глобальное состояние для счетчика. Конечно, состояние счетчика должно управляться локально для этого контекста, но приведенная выше демонстрация гарантирует, что наш глобальный контекст / состояние работает должным образом.
В конце концов, мы создали новый проект PreactJS, в котором все готово - Typescript и SCSS для более крупных проектов и MobX / Provider для управления нашим глобальным состоянием. Вы можете найти полный код в моем репозитории Github ниже, и, надеюсь, эта статья окажется полезной для вас, чтобы начать работу с Preact.
Ура! 🍻
использованная литература
Больше контента на plainenglish.io
