Kirby Builder preview: Import React File

The CMS Questions
1

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>