How To Use CDN Link In React

1

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.

2

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:

3

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.

4

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

5

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

6

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

react
react1594×862 68.4 KB

2 Likes
7

Yeah it helps, you can add CDN links there

8

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.

9

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

11

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