Початок роботи

Приклади Rete Kit Codesandbox Codepen

Є два простих способи почати роботу з фреймворком: зробити fork прикладів на Codesandbox або створити локальний додаток за допомогою Rete Kit. Перший варіант дозволяє експериментувати з функціональністю, яка не завжди описана в гайдах. Крім того, другий варіант дозволяє створити локальний додаток зі спеціальними функціями редактора вузлів для вибраної версії React.js, Vue.js, Angular, Svelte або Lit. Потім, дотримуючись гайдів, ви зможете ознайомитися з функціями та можливостями фреймворку.

Передумови

Перш ніж занурюватися в Rete.js, важливо мати розуміння основ JavaScript або TypeScript. Фреймворк розроблено в першу чергу з урахуванням TypeScript, із прикладами та гайдами, що демонструють код цією мовою. Однак для новачків у TypeScript або тих, хто хоче швидко створювати прототипи, все ще можна використовувати Rete.js безпосередньо в коді JavaScript.

Якщо ви віддаєте перевагу TypeScript, переконайтеся, що у вас встановлено TypeScript версії 4.7 або новіше.

Плейграунди

ШІ-допомога

Отримайте інтелектуальну, контекстно-орієнтовану допомогу у вашому редакторі коду з підтримкою ШІ. Використовуйте агента або функцію виконання команд вашого IDE (доступно в Cursor, GitHub Copilot Chat, Windsurf та подібних інструментах) і просто запитайте свого ШІ-асистента:

prompt
Запусти npx rete-kit ai для [ваша мета]

Замініть [ваша мета] на вашу фактичну мету, наприклад "вивчення Rete.js", "створення нового додатку" або "додавання до мого існуючого проекту". ШІ-агент автоматично визначить правильні опції на основі вашого наміру. Це генерує специфічні для IDE інструкції, які допомагають ШІ-асистентам розуміти патерни Rete.js та надавати релевантні поради.

Для отримання детальної інформації див. документацію ШІ-асистент.

Створення додатку використовуючи девкіт

Використовуйте Rete Kit, щоб швидко встановити додаток на Rete.js. Він дозволяє вибрати стек (React.js, Vue.js, Angular, Svelte або Lit) і набір функцій.

Додавання Rete.js до вашого додатку

Пакети фреймворку доступні на NPM і підтримують такі загальні формати, як ES (.esm.js), CommonJS (.common.js) і UMD (.min.js).

Команда нижче надає приклад встановлення пакетів фреймворку для останньої версії.

bash
npm i rete rete-area-plugin rete-connection-plugin rete-render-utils rete-react-plugin react react-dom

Для отримання конкретної інформації щодо необхідних пакетів зверніться до одного з гайдів

Використання з CDN

Пакети фреймворку також доступні на численних CDN, які обслуговують пакети npm. Щоб додати їх до HTML-сторінки, використовуйте такий приклад:

html
<script src="https://cdn.jsdelivr.net/npm/rete/rete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-area-plugin/rete-area-plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin/rete-connection-plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-render-utils/rete-render-utils.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-react-plugin/rete-react-plugin.min.js"></script>

Використовуйте ці пакети, отримавши доступ до їхнього простору імен, який можна знайти в полі name файлу rete.config.ts до кожного пакета. Обов’язково додайте необхідні однорангові залежності

js
Rete
ReteAreaPlugin
ReteConnectionPlugin
ReteReactPlugin

Крім того, ви можете інтегрувати їх на таких платформах, як Codepen, використовуючи esm.sh.

Документація