Как запустить код react для рендеринга веб-страницы и отображения ее пользователю?

Допустим, у меня есть сгенерированный код react, который я хочу показать пользователю, чтобы он мог просмотреть его и прокомментировать. Пользователь не занимается кодированием сайта, я просто хочу показать ему, как выглядит сгенерированный сайт, чтобы он мог сделать некоторые комментарии к нему. Пример сгенерированного кода может выглядеть так:

Как я могу отобразить это и показать пользователю? Я все еще нахожусь на стадии планирования этого проекта, но бэкэнд, который будет генерировать и обрабатывать вышеупомянутый код react, скорее всего, будет основан на Django. То, что я пытаюсь сделать, очень похоже на редактор react на этом сайте: https://react-bootstrap.netlify.app/docs/components/navbar/?

Вы можете вывести его на App.jsx, а затем на index.js

То, о чем вы спрашиваете, очень сложно сделать самостоятельно, я бы рекомендовал сначала использовать зрелые и проверенные альтернативы сообщества, чтобы понять, подходят ли они для ваших нужд.

Одним из таких примеров является пакет react-live. На их веб-сайте можно найти демонстрацию с живым редактором, который принимает реакт-код и отображает его в нужном виде.

У вас также есть react-jsx-parser. Вот простой пример реализации, которую вы ищете, используя этот пакет:

import React from 'react'
import JsxParser from 'react-jsx-parser'

const MyComponent = () => (
  <JsxParser
    jsx={`
      <h1>Header</h1>
      <div>I am text!</div>
    `}
  />
)

Обратите внимание, что реквизит jsx представляет собой строку, поэтому вы можете передать код в качестве переменной из бэкенда, в данном примере он введен в строку для демонстрации.

За более сложными примерами вам придется обратиться к документации каждого проекта, но большинство из них легко справляются с пользовательскими компонентами и простым использованием хуков.

Помните, что если код из бэкенда создан пользователем, это может привести к проблемам с безопасностью. При работе с JSX-инъекциями нужно быть очень осторожным, даже если пакеты решают большинство проблем за вас.

Вернуться на верх