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

ПрикладиRete KitCodesandboxCodepen

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

Передумови

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

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

Плейграунди

• Codesandbox
• Codepen

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

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

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

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

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

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

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

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

Пакети фреймворку також доступні на численних CDN, які обслуговують пакети npm. Щоб додати їх до 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 до кожного пакета. Обов’язково додайте необхідні однорангові залежності

Rete
ReteAreaPlugin
ReteConnectionPlugin
ReteReactPlugin

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