如何从 CDN 加载 React.Component 并渲染到另一个 React.Component

Question

Note: None of the answers actually work [DO NOT DELETE THIS NOTE]

simple question, I got a project, npx create-react-app react-project (consider this Project Y)

now, inside this project's App.js

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        HELLO
      </div>
    )
  }
}

now in CDN I have another Comp.js (Consider this Project X)

https://codepen.io/sirakc/pen/ZEWEMjQ.js

import React, { Component } from 'react'

export default class Comp extends Component {
  render() {
    return (
      <div>
        WORLD
      </div>
    )
  }
}

now I want to show the Comp.js into App.js as if you are taking it from local source folder

so

import React, { Component } from 'react'
//somehow somewhere import Comp.js and then <Comp/>

export default class Comp extends Component {
  render() {
    return (
      <div>
        HELLO <Comp/>
      </div>
    )
  }
}

and ofc the output should be

HELLO WORLD

when I run the project react-project and if in the CDN I change WORLD to EARTH it should change WORLD to EARTH in the output as well

so now react-project's output is HELLO EARTH

I am putting all my rep into a bounty for this, upvote if you like this question to help me attract attention.

NOTE: my need is to show React project X inside React project Y without touching much of project Y and ofc update the project X without updating anything inside project Y, so yea the <script src='chunk.js'/> isn't gonna work here, the chunk name changes, if you can find a way to not make it change, then its great, do share. If you know a working way to do this bundled into chunk.js DO SHARE!

ANY WAY OF DOING THIS IS WELCOMED, as long as Project X is independent of Project Y and I can make changes to Project X without changing Project Y

Answer 1

There are a few options you have at hand.

Option 1 - Create a NPM Package

Turn Project X into a module.

This will mean you will go to Project X development folder, and run npm login and npm publish . You can read more about that here

After that, once your package is on NPM You can go to Project Y and do the following:

import React, { Component } from 'react'
import Comp from 'my-package'

export default class Comp extends Component {
  render() {
    return (
      <div>
        HELLO <Comp/>
      </div>
    )
  }
}

Option 2 - Load a bundled JS

Instead of having your script load the following:

import React, { Component } from 'react'

export default class Comp extends Component {
  render() {
    return (
      <div>
        WORLD
      </div>
    )
  }
}

This is JSX Syntax. And it cannot be read in plain Vanilla JS - thus you cannot just import it like <script src="myscript.js" /> since this is not valid JS without a parser like Babel.

I would go to Project X and run npm run build . After that I would get the bundle.js - bundled and minified script written in Plain JS. It would look something like this:

(this.webpackJsonpchrome_extension=this.webpackJsonpchrome_extension||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(99)},,function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)

Basically non-human readable code, which is parsable by <script src="myscript.js" /> tag. And then you would have to go to your index.html and inject it there, or use some of modules like react-script-tag

I would highly highly recommend going with Option #1. Since this is the preferred way to go. Look into creating NPM packages from your React project, and follow step by step.

Some more useful links about Option #1:

Create a simple React npm package in simple steps using CRA

How to publish your React component on npm

Hope this will guide you in the right direction, but the current way you are doing it is a no-go

EDIT - Tehnically there is an option #3, but I wouldn't recommend it.

Option 3 - Make your url provide just JSX, and load it in dangerouslySetInnerHtml .

Let's say your https://codepen.io/sirakc/pen/ZEWEMjQ.js would provide with this only:

<div>
  WORLD
</div>

Technically, you could then turn your link into something more readable, like .txt extension, fetch it, store it in a variable, and load it in dangerouslySetInnerHTML .

for example:

const otherProjectJSX = somehowLoad(https://codepen.io/sirakc/pen/ZEWEMjQ.js)

const MyApp = () => <div dangrouslySetInnerHtml={otherProjectJSX} />

Basically it would be this:

const otherProjectJSX = '<div>WORLD</div>'

const MyApp = () => <div dangrouslySetInnerHtml={otherProjectJSX} />

I would not recommend this, but if it is only what is inside render() you care about - it might work after all.