How To Use CDN Link In React

I am starting on the front end projects, and I am setting up a React environment locally. I was wondering how I can use the CDN link for testing the project in a react set up since tags don’t seem to work.

I am assuming here that you just want to experiment with React a little bit by adding some <script> tags and creating a component?
These will add React, ReactDOM and JSX to start with:

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Then to create a component in your script file, follow normal React way of creating a component.

const domElement = document.querySelector(".myawesomecontainer");
const e = React.createElement;

class Box extends React.Component {
........
........
ReactDOM.render(<Box />, domElement)

Hope it helps.

References:

Oh I meant like using this CDN link: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Like how you can throw that in the body in html to get the little drop down, but it doesn’t seem to work when I throw it into the render of the component.

Just add the link (within script tags) in your main .html file.

But I am rendering things in React JS, can I connect the html file to react somehow?

Look in your ‘public/index.html’ file. you can add the link there.
Hope this helps!

2 Likes

Yeah it helps, you can add CDN links there

One important thing to remember is to add type="text/babel" to the script tag if you are writing inline JavaScript. Otherwise the browser will complain (even with babel included) when it tries to parse html in your script.

Hey!

Im not getting the CDN link to work if someone could help me out ?

Ive created my React app with npx create-react-app.

I tried to add the CDN link in the index.html (both with script tags and without), within the head tags

 <link>
      href="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"
</link>

but the test box is not at all showing up in my browser. .

Really grateful for some help

It is not a link element. It is a script element.

3 Likes

I have pasted this all over my html.index, app.js, index.js and I still am not able to get it to render to my React app.

I used the boilerplate npx create-react-app to get started on my local machine, and it is on localhost:3000 if that makes any difference.

Please advise, because I have no other ideas of where to put the script