Установка и первоначальная настройка окружения

Подготовка окружения

Для работы с Riot.js необходимо современное окружение JavaScript. Рекомендуется использовать Node.js версии не ниже 18.x и актуальный менеджер пакетов npm или Yarn. Проверка установленных версий выполняется командами:

node -v
npm -v

При отсутствии Node.js следует скачать и установить его с официального сайта nodejs.org.

Установка Riot.js

Riot.js может быть использован как через CDN, так и через npm/Yarn. Для учебного и производственного окружения предпочтительно использовать пакетный менеджер.

Установка через npm:

npm install riot

Или через Yarn:

yarn add riot

Это добавит Riot.js в проект и создаст соответствующие записи в package.json.

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

Типичная структура проекта с Riot.js выглядит следующим образом:

my-riot-app/
│
├─ src/
│  ├─ components/
│  │  ├─ app.riot
│  │  └─ header.riot
│  ├─ index.js
│
├─ public/
│  └─ index.html
│
├─ package.json
└─ vite.config.js
  • src/components/ содержит все компоненты Riot.js с расширением .riot.
  • src/index.js — точка входа приложения, где выполняется инициализация корневого компонента.
  • public/index.html — основной HTML-файл, в котором будет подключено приложение.

Настройка сборки

Для современного рабочего процесса рекомендуется использовать сборщик модулей, например Vite или Webpack. Пример настройки через Vite:

  1. Инициализация проекта:
npm create vite@latest my-riot-app

  1. Выбор шаблона: vanilla (без фреймворка).

  2. Установка плагина Riot.js для Vite:

npm install @riotjs/vite-plugin --save-dev
  1. Настройка vite.config.js:
import { defineConfig } from 'vite';
import riot from '@riotjs/vite-plugin';

export default defineConfig({
  plugins: [riot()]
});

Теперь Vite будет компилировать .riot файлы в стандартный JavaScript.

Инициализация приложения

Создание корневого компонента app.riot:

<app>
  <h1>{ message }</h1>

  <script>
    export default {
      message: 'Привет, Riot.js!'
    }
  </script>
</app>

Подключение и рендеринг в index.js:

import { createRoot } from 'riot';
import App from './components/app.riot';

const root = document.getElementById('root');
createRoot(App, root).mount();

HTML-шаблон public/index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Riot.js App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/index.js"></script>
</body>
</html>

Работа с компонентами

Riot.js строит приложение на базе компонентов. Каждый компонент может содержать:

  • HTML-шаблон, описывающий структуру.
  • Скрипт, содержащий логику и состояние.
  • CSS, ограниченный областью компонента (Scoped CSS).

Пример компонента header.riot с локальными стилями:

<header>
  <h2>{ title }</h2>

  <style>
    h2 {
      color: #3498db;
    }
  </style>

  <script>
    export default {
      title: 'Заголовок приложения'
    }
  </script>
</header>

Компоненты могут импортировать друг друга и использоваться в шаблоне:

<app>
  <header></header>
</app>

Горячая перезагрузка и отладка

Vite обеспечивает автоматическую перезагрузку страницы при изменении .riot файлов. Это ускоряет процесс разработки и позволяет мгновенно видеть результаты. Для запуска:

npm run dev

Адрес локального сервера обычно: http://localhost:5173/.

Рекомендации по организации

  • Разделять компоненты по функционалу и логике.
  • Использовать отдельную папку для общих компонентов и утилит.
  • Для больших приложений применять маршрутизацию и глобальное состояние через сторонние библиотеки.

Это обеспечивает гибкость, масштабируемость и удобство сопровождения проекта на Riot.js.

Оглавление