First project for Front End Development Libraries

I’m making the first project for the FreeCodeCamp Front End Development Libraries, and I’ve almost finished it locally, but when I copy and paste it to Codepen (importing React, ReactDOM, Bootstrap and React-bootstrap), it doesn’t render. I’ve been looking for a solution for a while and I’ve not been able to find why it isn’t rendering there.

Here’s the link to my codepen: https://codepen.io/zlomb/pen/vYJzNpb
And below is a photo of what should show up

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Challenge: Build a Random Quote Machine

Link to the challenge:

The problem seems to be with React Bootstrap. I remember it being weird on Codepen but I’m not sure I remember what the solution was (using the normal script loading and then the global object it exposes I believe). I would suggest you use CodeSandbox instead, it’s much better for React anyway.

Here is a sandbox with your code and the dependencies you can fork.

1 Like

Thank you very much! I used CodeSandbox and now it works as expected!

A question though, how do I submit it to FreeCodeCamp? since it says it has to be a codepen and I’m not sure how to run the tests in CodeSandbox

You don’t have to use codepen.
It is just suggested not required.

You can submit the code sandbox link and it will be accepted.

1 Like

Below the Dependencies on the left use the External resources and add the test script.

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Submit the link from the preview window.

1 Like