Starter file to run any React app as a Splunk app

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import { createStaticURL } from '@splunk/splunk-utils/url';
import $script from 'scriptjs';

function getLayoutApi(callback) {
    const url = createStaticURL('build/api/layout.js');

    if (window.requirejs) {
        window.requirejs([url], callback);
    } else {
        $script(url, () => {
            // eslint-disable-next-line no-underscore-dangle
            callback(window.__splunk_layout__);
        });
    }
}

getLayoutApi((layoutApi) => {
    let containerEl;

    if (layoutApi) {
        containerEl = layoutApi.create().getContainerElement();
    } else {
        containerEl = document.createElement('div');
        document.body.appendChild(containerEl);
    }
    setTimeout(() => {
        ReactDOM.render(
            <React.StrictMode>
                <MyComponent />
            </React.StrictMode>,
            containerEl
        );
    }, 30);
});

Just call splunk-create and copy this file to the src/main/webapp/pages/start folder of your Splunk app. The advantage is that you can use any React version with this approach and you're not bound to the Splunk UI toolkit.