Random quote generator

JavaScript
1

I tried putting the code from VS Code in which I first created the folder structure using create-react-app. Then I tried to copy paste the code from vscode to codepen but I am not understanding whether why the output is not displayed in codepen and also the tests are failing.

I have also tried putting only the content of <body> in the html part of codepen but no effect.

Thanks in advance!!

2

You can’t import dependencies like that as they are not installed to the Codepen.

  • Replace the dependencies imports with https://esm.sh/
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";


import { FontAwesomeIcon } from "https://esm.sh/@fortawesome/react-fontawesome";
import { faQuoteLeft } from "https://esm.sh/@fortawesome/free-solid-svg-icons";
import { faXTwitter } from "https://esm.sh/@fortawesome/free-brands-svg-icons";
import { faTumblr } from "https://esm.sh/@fortawesome/free-brands-svg-icons";

  • Remove imports that do not exist like the CSS file.

  • Move the render code to the bottom of the file.

My personal suggestion is to use Stackblitz or Codesandbox instead of Codepen for React code.

3

How to run Reactjs in codepen
add scripts in to pen setting js

4

thank you this worked but I have a doubt:
i didn’t understand this statement(is it a type of organisation of code?)
Move the render code to the bottom of the file.

5

thank you for this reference article
Could you explain more about add scripts in to pen setting js so sorry i didn’t get you.

6

You have to configure it through the settings.

  1. Go to your pen settings.
  2. Go to the JS section.
  3. Configure Babel as the preprocessor and add the required libraries below it, where it says Search CDNjs:
    (You must add react or react-js and react-dom)
    type React in add external scripts and you will get the option

7

The code where you add the root component to the render should be at the bottom of the file so it doesn’t reference code before the code is defined. It would normally be inside a separate entry point file (index/main) in a standard React project setup.

But yes, even if its location doesn’t cause an issue I’d expect to find it at the bottom so you might call it code organization as well.

If you add the dependencies as scripts don’t also add them as modules (what I posted). Use one or the other. I’d suggest staying with module imports from https://esm.sh/

8

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