General thoughts

cms.blade.php

@extends('layouts.app')

<div id="app"></div>
<noscript>You must have JavaScript enabled to edit this page.</noscript>

@push('non-blocking-scripts')
<script>
window.__STATE__ = {!! json_encode($state) !!};
</script>
{!! js('cms') !!}
@endpush

cms.jsx

import React from 'react';

const Cms = ({ fields }) => (
  <div className="cms">
    {fields.map((field) => React.createElement(field.componentName, field.props))}
  </div>
)

export default Cms;

CmsController.php

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class CmsController extends Controller
{
	public function index()
	{
		return view('cms', [
      'state' => [
        'fields' => [
          // definition of fields
        ]
      ]
    ]);
	}
}

index.jsx

import React from 'react'
import { render } from 'react-dom'
import Cms from './cms.jsx';

const root = document.getElementById('app');
const { fields } = window.__STATE__;

render(<Cms fields={fields} />, root);