How do I reference a React component in a regular HTML page

I have created a React application with an index.html that looks like this:

<!DOCTYPE html!>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="react-container"></div>
    <script type="text/javascript" src="assets/bundle.js"></script>
</body>
</html>

Index.html references index.js (from bundle.js) which calls ReactDOM.render to render the app, like this:

import React from 'react'
import { render } from 'react-dom'
import App from './components/App'
import { Provider } from 'react-redux'
import configureStore from './redux/configureStore'

render(
    <Provider store={configureStore()}>
        <App />
    </Provider>,
    document.getElementById('react-container')
)

So far so good. But I want my component to be reusable in other web applications. So what do I need to do?

I guess I would not provide an index.html or index.js file in the bundle? But how should I reference the component in the other web application? I guess that I need to reference the bundle.js file, but how to I for example specify imports? And what about Babel? And the React libraries?

As I am also utilizing Redux, I need a Provider, and I need to configure a store. Where should I do that?