Kirby Builder preview: Import React File

Hi,

I’ve created React files using Kirby Rest API. In the backend I’m using Kirby Page Builder. In the Kirby Page Builder there is this option of setting a preview. Unfortunately I don’t have php-templates but rather implemented my views in react. Is there a way for me to integrate my React Pages into the Preview I was thinking about something like this:

<?php
$object = (array)$data;

$json = json_encode($object);
?>

< script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

< script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

< script type="text/javascript">

import Slide09 from "./slide/Slide09";

ReactDOM.render(React.createElement(Slide09, { slide: "<?php echo $json; ?>" }), document.body);

< /script>

My Kirby Blueprint is as follows:

name: Slide09
label: 'Slide09: {{title}}'
preview:
    snippet: ../../../kirby_react/src/index
    #css: /assets/css/blocks/quote.css
defaultView: preview
type: fields
fields:
    text: { extends: blocks/text }
    ...

Slide 09 looks like this:

`import React from ‘react’;
import Section from ‘./Section’;
import Text from ‘./fields/Text’;
import Logo from ‘./fields/Logo’;
import PopupButton from ‘./fields/PopupButton’;
class Slide09 extends React.Component {

render() {
	return (

<React.Fragment>


    <div class="fix-12-12">
      <div class="fix-3-12">
        <Logo fields={this.props.slide}/>
      </div>
      <PopupButton fields={this.props.slide} popupid="9"/>
      <Text fields={this.props.slide} addClass="large ae-3"/>
      <form class="slides-form" action="#">
        <input type="email" class="rounded input-9 ae-4 fromCenter" name="user-email" placeholder="Email"/>
        <input type="password" class="rounded input-9 ae-5 fromCenter" name="user-password" placeholder="Password"/>
        <input type="password" class="rounded input-9 ae-6 fromCenter" name="confirm-password" placeholder="Confirm the password"/>
        <button type="submit" class="button blue rounded button-9 ae-7 fromCenter" name="button">Get Started</button>
      </form>
    </div>

  </div>
</div>
); } } export default Slide09;`