Как эффективно интегрировать Blockly для блоков кодирования с помощью перетаскивания в приложение React? ⇐ Javascript

[Anonymous]

Я работаю над проектом по интеграции Blockly в приложение React. Цель — создать интерактивную среду программирования с возможностью перетаскивания, которая поможет новичкам визуализировать алгоритмы и понять концепции программирования.
Цели:

• Встроить рабочую область Blockly в компонент React.
• Динамически загружать и сохранять блоки из/в JSON.
• Настраивать панель инструментов для блоки, связанные с алгоритмом.
• Обеспечить плавную работу по мере увеличения количества блоков.

Что я пробовал:

• Использовал @blockly/react для базового внедрения.
• Определил блоки с помощью JSON, но столкнулся с проблемами при их динамической перезагрузке.
• Настроен набор инструментов, но отзывчивость пользовательского интерфейса падает с большими наборами данных.

Вопросы:

• Каковы лучшие практики для интеграция Blockly с React для обеспечения производительности и масштабируемости?
• Как я могу динамически обновлять рабочую область без ненужной повторной визуализации?
• Существуют ли библиотеки или шаблоны для эффективного сохранения/загрузки блоков в приложении React?

Будем очень признательны за любые рекомендации, ресурсы или примеры кода!

Подробнее здесь: https://stackoverflow.com/questions/793 ... nto-a-reac