compile and load reactjs component file dynamically

Question

I want to load reactjs file dynamically in browser either through making script tag or through ajax (I don't know which method works good for my scenario)

and then I want to render component from that file let say my file has component

import React from 'react';

class D11 extends React.Component {
constructor(){
    super()
    console.log("loaded D1 constructor")
}
render() {
    console.log("rendering D1")
    return (

        <div>
            D1 loaded 
        </div>

    );
}};
export default D11;

should I compile this file into js with some webpack before loading how can I do that and what is best method for this I want to achieve behavior like in these blogs dynamic loading and this nylas link

Answer 1

React.Suspense or dynamic import are 2 possible options.