Существует два способа начать использовать Sexy фреймворк:
  1. Простой – создать веб-приложение и начать писать код
  2. Сложный – Подключить библиотеки вручную и настроить бандлер (webpack)

Создаем первое Sexy приложение

Приложение сразу будет использовать серверный рендеринг и включать оптимизации производительности.

Для того, чтобы создать первое Sexy приложение введите в терминале:

npx create-sexy-app my-app
console

Все! Приложение создано, теперь его можно запустить в режиме разработчика или произвести сборку.

Запустить проект в режиме разработчика:

npm run dev
console

Создать production-ready сборку

npm run build
console

Запустить сервер на созданной сборке

npm run start
console

Ручная установка и использование Sexy фреймворка

Вам нужно минимум два пакета: сам фреймворк и его загрузчик (webpack loader).

npm install sexy sexy-loader --save
console

После этого необходимо зарегистрировать load для sexy файлов в webpack:

module: {
  rules: [
    {
      test: /.sexy$/i,
      use: [{
        loader: 'sexy-loader',
        options: {
          path: './components', // path to folder where components located
          styles: true,
        }
      }]
    },
  ]
}
javascript

Важно, загрузчик должен включать информацию о пути, где будут находиться компоненты для автоматического импорта в проект. Но вы также можете подключать компоненты вручную (не используя авто-импорт).

Чтобы произвести первый рендеринг необходимо создать компонент и отрендерить его на странице:

import { render } from 'sexy/render';
import HelloWorld from './components/hello-world.sexy';

const layout = document.getElementById('layout');

render(HelloWorld, layout);
javascript

Где Layout – это корневой ID элемента, где будет работать Sexy фреймоврк.