Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Tell us what’s happening:

I am having trouble defining React on my Codepen. I spent all of last Friday tweaking my React-Redux code and not seeing any changes on the screen, unaware of the fact React was not set up properly to render the code I was writing. Today I decided to start the project again from scratch, and kept getting the “ReferenceError: React is not defined” console error. Googling for a solution indicated I should add react and react-dom as external resources on my pen JS Settings, which I did using the " Add External Scripts/Pens" functionality. The two CDN’s recommended to me were

https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js

and

https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js

But I still keep getting the error. I’m getting quite frustrated, because it feels I’m wasting a lot of time with setup/configuration issues instead of coding. I understand the idea of getting Campers comfortable with coding within the freeCodeCamp environment, but I feel that this certification project simply “throws” you out there and asks you to figure out how to configure your own environment - even the suggested Codepen apparently requires configuration, and this was never made explicit or taught in the classes so far.

While I’m all for learning how to setup my environment, I feel the explanation here was very poor and I feel wildly unprepared to do so. I’m trying my best to Google and learn how to do it, but it feels really confusing whether the things I’m reading about apply to Codepen or not, or what kidn of configuration I need to make the code work on Codepen.

Here’s my pen so far: https://codepen.io/fernandopa/pen/wvLRPMZ
Since I started my project from scratch today, I haven’t written the Redux code or the React-Redux connections. I was just focused on getting anything rendered via React, but I’m still failing at this point, and this is where I would appreciate any guidance on how to get in rendered.

Thank you, and apologies if the rant sounds ungrateful - this is not the case. I am having a great time with freeCodeCamp, but the lack of guidance in this exercise in particular has been really frustrating, and time spent on poorly explained configuration feels like time wasted when compared to time spent coding and working on my logic.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

2

  1. Use the umd version of the script (replace cjs with umd in the script URL)

  2. react-dom should be loaded after react.

You can also use the “Add Packages” under the JS section instead of the external scripts. Remove the scripts and add the imports at the top.

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

I would recommend using Stackblitz or Codesandbox instead for React.

1 Like
3

Thank you lasjorg! This looks like witchcraft to me, but it worked! I’ll probably use your explicit imports in the code, since this makes it a bit more generalized. I had no idea the order in which I loaded the scripts mattered.

I’ll also spend some time reading on modularity - I didn’t even knew the cjs vs. umd could be something affecting my tests.

I’ll definitely take a look at Stackblitz, probably for the next certification project. Would you recommend a browser-based IDE, or simply getting used to a desktop tool? I assume NodeJS would be the answer if I don’t want to use a browser-based IDE? Sorry if the question looks basic/confusing, that shows how confused I also am about the whole thing :slight_smile:

Thanks!

4

Don’t worry, it is confusing. For historical reasons, the different JS module systems are not that straightforward. Luckily for newer code, we now have native ESM support.

Stackblitz and Codesandbox are both good and much closer to a local developer experience than Codepen. But in the end, you will want to develop locally using an editor like VS Code (or whatever editor you like).

1 Like
5

Fantastic. I struggled to import Redux and Redux-React at first, but enough Googling taught me that Redux does not have default exports, so I need specific named exports.

import { createStore } from “https://esm.sh/redux”
import { Provider } from “https://esm.sh/react-redux”;

I’m finally able to render my app and start work on the logic. Thanks a lot for all the help!