React Ace Editor для предварительного просмотра

Question

Я пытаюсь создать редактор приложения Live Preview, используя activace или responsecodemirror.Мне бы хотелось, чтобы пользователи могли создавать файлы и редактировать каждый файл, а затем получать предварительный просмотр, работая с файлом так же, как и в кодеке.

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

import React from 'react';

// Import Brace and the AceEditor Component
import brace from 'brace';
import AceEditor from 'react-ace';

// Import a Mode (language)
import 'brace/mode/html';

// Import a Theme (okadia, github, xcode etc)
import 'brace/theme/monokai';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.onChange = this.onChange.bind(this);
    }

    onChange(newValue) {
        console.log('change', newValue);
    }

    render() {
        return (
            <div>
                {/* <AceEditor
                    mode="html"
                    theme="monokai"
                    onChange={this.onChange}
                    name="UNIQUE_ID_OF_DIV"
                    defaultValue=""
                    editorProps={{
                        $blockScrolling: true
                    }}
                /> */}
          <AceEditor
              placeholder="Placeholder Text"
              mode="html"
              theme="monokai"
              name="blah2"
              onLoad={this.onLoad}
              onChange={this.onChange}
              fontSize={14}
              showPrintMargin={true}
              showGutter={true}
              highlightActiveLine={true}
              value={`function onLoad(editor) {
              console.log("i've loaded");
            }`}
              setOptions={{
              enableBasicAutocompletion: false,
              enableLiveAutocompletion: false,
              enableSnippets: true,
              showLineNumbers: true,
              tabSize: 2,
              }}
            />

            </div>
        );
    }
}

Мне нужен ваш совет о том, как добавить какой-либо повторно используемый компонент для предварительного просмотра кода справа и, возможно, добавить некоторые инструкции слева