Import external react component from CDN (React Bootstrap Slider)

Question

I have a Django project and I want to use React on it. I have already created my own components and this works, but I dont know how to import third-party components from CDN.

To do this, I did:

Import React (develop or production version) in the base template:

<!-- baseTemplate.html -->
{#      ReactJs#}
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Also import the file where I create my components

<!-- baseTemplate.html -->
<script src="/one_directory/my_react.jsx" type="text/babel"></script>

and create the tag where it will be rendered.

<!-- template.html -->
<div id="container"></div>

And finally render my React components:

<!-- my_react.jsx -->
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

This works correctly :)

---

Now, I want to import a third-party component (specifically, it's React Bootstrap Slider) from CDN, but I dont know how.

Maybe this is not possible, I dont know. How could I do it?

Thank you very much :]

Answer 1

I think you want a CDN from this npm package https://www.npmjs.com/package/react-bootstrap-slider (version 2.1.3)

There is a CDN at https://unpkg.com/react-bootstrap-slider You can explore files for that at https://unpkg.com/react-bootstrap-slider/

However I could not get it to work as I get Component not found error.

In the github project https://github.com/brownieboy/react-bootstrap-slider it says

The control is implemented in UMD format, so should also work for AMD/RequireJS, but I've not tested that. You can also add it as a script tag.

If you want a CDN I you suggest to inform the owner to fix it or you can fork the project and generate a CDN-friendly file and host it yourself.