First project for Front End Development Libraries

JavaScript
1

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

unknown
unknown1011×634 3.82 KB

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:

2

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
3

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

4

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
5

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
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.