Getting React to work in CodePen?

Hello all, I’ve looked at many others having the same issue in the past, and I know i’m most likely just missing something real small. I’m attempting to begin the Front End Library Projects through FCC, specifically the Random Quote Machine, but am having difficulty loading React into CodePen? I’ve tried using CDN for React in <script> tags inside of the HTML, which wasn’t working, and also tried adding the links into the Javascript CDN settings option (gear icon?), and neither is rendering my component. Any guidance would be much appreciated - thank you!

Could you share a link to your codepen?

Not sure if you need the import React from "react" statements and such as well. I had them in my code, but that didn’t work either, so they are removed for the time being.

You just have a couple of typos in your code. getElementByID should end with Id, not ID. Component is also a property of React, so you should use React.Component.

The import statement is not needed, because React is already loaded in the global scope (and I’m not sure if they’ll work in codepen).

You could also lose the <script> tags in the HTML because the libraries are already loaded in the JS settings. Just to clean things up a little.


You rock! Thanks a ton. I had extends Component because I originally had used import React, { Component } from "react" which I was familiar with using in other programs. Is there a way to set yourself up in code pen to use Component over React.Component?

I see. Object destructuring will work. You can “pull out” Component on the first line with:

const { Component } = React;

Then you can just use Component after extends.

1 Like

That’s awesome. Thanks so much, means a bunch!