Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Since I am having trouble producing results with Codepen, I am going through another REACT curriculum at Codeacademy.com. I was going to see if I could work from their code and have replaced my JS code with theirs in my codepen page, which has my HTML and CSS for this challenge. The codeacademy code from Codecademy does not run in my page at Codepen (https://codepen.io/tony_the_tiger-the-typescripter/pen/jOxrOBW). Any advice.

Your browser information:

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

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

2

OK, that’s a mess. The HTML pane has a lot of imports but I don’t see React imports. I do see jQuery imports (NEVER USE JQ AND REACT AT THE SAME TIME). I also see that you have an import in the CodePen imports (where they should be).

Since I am having trouble producing results with Codepen …

What does that mean? Can you set up a basic, starter React project in CP?

3

I had gotten to a point on this task where my eventlistener was producing random colors for click (anywhere on the page), and for 5 of the 6 color areas (quote text color, author text color, twitter box, tumbler box, main background, but not the actual new quote button) for onClick. Then I decided to go back through the CodeAcademy for a deeper understanding.

I am a bit confused by the separation of HTML, CSS and JS in CodePen. When you are alarmed by a CodePen import I am not sure which thing you are talking about. I think I want to be using REACT so I’ll now comment out the two JQ scripts from the HTML. That still does not fix the error. Some other discussants have stated that I should be able to do almost everything from the CSS and JS boxes. I guess this is where the imports should be. Are you saying I am trying to import something on the HTML side that should be on the JS side.

4

I believe I have stripped this down to a pretty basic React project. The error has not changed. I am getting the following errors right after the h1 line:

Unclosed regular expression.

Unrecoverable syntax error.

Here is the stripped down code:

import ReactDOM from "react-dom";

class PropsDisplayer extends React.Component {
  render() {
    //const stringProps = JSON.stringify(this.props);

    return (
      <div>
        <h1>CHECK OUT MY PROPS OBJECT</h1>
        //<h2>{stringProps}</h2>
      </div>
    );
  }
}

// ReactDOM.render goes here:
ReactDOM.render(
  <PropsDisplayer /*myProp="Hello"*/ />,
  document.getElementById("app")
);
5

…but not the actual new quote button) for onClick

OK, but that issue would have had nothing to do with CP.

I am a bit confused by the separation of HTML, CSS and JS in CodePen.

Yes … but … you just described it. They’re separated.

When you are alarmed by a CodePen import I am not sure which thing you are talking about.
In your HTML I see:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script><!-- Bootstrap for Codepen-->
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

You are importing BS there and the FCC tests.

Below that is:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>-->

I don’t know why you would ever use JQ in a React project. It would be like riding your motorcycle while riding your car. Choose one mode of transportation.

I also see this in Setting -> JS -> Add External Scripts/Pens:

https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js

That’s actually where you should be pulling in those libraries, at least if you are working with codepen.

I also see that you don’t have the Babel preprocessor working, so I don’t see how this ever could have been a working React project. Maybe it was a working JQ one.

Some other discussants have stated that I should be able to do almost everything from the CSS and JS boxes.

Yes, the point is that with React, you have almost nothing in your HTML. You have it in your JSX which is in your JS.

I believe I have stripped this down to a pretty basic React project.

Are you running a babel transformer? Can you post a repo? I would expect you to have to import React to that file, too. What does your index.html look like? How did you set up this project?

Like I said, we can help you set up a starter project in CP if you want. If you want to skip to the slightly more complicated but slightly more realistic way by doing it locally, you can do that too. I would recommend on looking for a tutorial on using some boilerplate like create-react-app to get you started. Of course, then you’ll also have to worry about hosting and it’s harder to share to get help - one of the reasons I recommend using CP for these projects. Some people prefer Replit - it’s the best of both worlds, an online IDE with hosting and it has a more “real” file structure.

But if you’re going to host this locally, please share a repo so we can see the whole project.

6

I have added

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>```

I think this is the React and ReactDOM libraries that I need.

[quote="kevinSmith, post:5, topic:557035"]
I also see that you don’t have the Babel preprocessor working,
[/quote]

I have added these. Not sure if I need them all.:

```<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.19.2/babel.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>```

[quote="kevinSmith, post:5, topic:557035"]
I don’t know why you would ever use JQ in a React project.
[/quote]

I have commented those out.

[quote="kevinSmith, post:5, topic:557035"]
Can you post a repo? I would expect you to have to import React to that file, too. What does your index.html look like? How did you set up this project?
[/quote]

Not sure what this is all about. The plan is to stay on CP for now.
7

I think this is the React and ReactDOM libraries that I need.

Sure, those should work.

I have added these. Not sure if I need them all.:

If you need them, sure. But babel needs to be set up as a preprocessor, afaik. What bundler are you using?

Not sure what this is all about.

Well, you should learn. You haven’t said which of those 4 sentences you don’t understand.

There is nothing more I can do to help you. If you want to develop locally, you need to create a repo. If you don’t know what that is, google “get started with github”. It’s something every developer needs to learn. Alternatively you can use an online IDE - codepen, replit, etc. - so we can actually see what is going on and what you’ve done.

Without any of that, I am blindfolded and can’t give you any help.

8

My point was that that is not the “right” way to do it when working with CP. It can work, but… I mean, I can use a knife to open a can of beans, but it’s not the right way.

9

I am on codepen. Do I need to add a bundler to use Codepen? If so, what are the popular bundlers

I had never heard the term repo in this context. I will try to figure out how to create a repo.

I don’t see an Index.html in Codepen.

I believe I am set up normally in Codepen. I had viewed it like FCC, where I just try to write some code in the interface and it somehow presents itself. I don’t think I ever really worried about an Index.html in FCC, so I didn’t know it was an issue here. I know some things are going on in the background.

10

I have gotten to a setup page with four options:

Quick setup — if you’ve done this kind of thing before

Set up in Desktop

or

Get started by creating a new file or uploading an existing file. We recommend every repository include a README, LICENSE, and .gitignore.

…or create a new repository on the command line

echo “# Codepen-Front-End-Challenge-1” >> README.md git init git add README.md git commit -m “first commit” git branch -M main git remote add origin Amvernon007/Codepen-Front-End-Challenge-1 · GitHub git push -u origin main

…or push an existing repository from the command line

git remote add origin Amvernon007/Codepen-Front-End-Challenge-1 ¡ GitHub git branch -M main git push -u origin main

…or import code from another repository

You can initialize this repository with code from a Subversion, Mercurial, or TFS project.

I think the 2nd option to " create a new repository on the command line" is what is appropriate for me, but when I follow the steps, my command line gives the following error:

C:\Users\Antonio Vernon>git init
‘git’ is not recognized as an internal or external command,
operable program or batch file.

11

I was working from the signin website and having problems doing things from my command prompt. When I read my welcome email, further instructions were given for setting up my computer for Github. I have downloaded and installed Git for Windows. I wasn’t sure about the Github for Windows vs. Github CLI. I have installed Github for Windows. Once I installed it I still found myself in a command line interface and did all the steps to create a new repository on the command line. Everything seemed to work well until the last command line entry of

$ git push -u origin main
error: src refspec main does not match any
error: failed to push some refs to ‘Amvernon007/Codepen-Front-End-Challenge-1 · GitHub’

12

I’m not sure if I need Use the winget tool to install and manage applications | Microsoft Learn

13

I’m sorry, I can’t keep track of what you are trying to do where.

On CP, you don’t need to worry about a bundler.

I had never heard the term repo in this context. I will try to figure out how to create a repo.

You don’t have to on CP. You were the one that started by saying that you were no longer using CP.

I don’t see an Index.html in Codepen

You won’t on CP. That’s basically your HTML pane.

14

You need to pick one. One project/tutorial, one environment. You are running to 10 directions at once.

  • Pick one project - I presume the Quote Machine. Don’t do another tutorial on a different project and expect it to line up. One thing at a time, please.
  • Pick on environment - Again, CP is the simplest. Replit has all the advantages of an online IDE, plus a more “realistic” setup, but that gives you more to think about - less simple. A local project is the most realistic but also gives you the most to worry about, the most beginner confusion.

Pick one and only one. We can help you set it up, but you have to pick one. And you have to share your work.

1 Like
15

I don’t believe I ever said this.

There was some confusion. I was getting an error on CodePen. I had made progress. Then I was told, I should not have a lot of content in the HTML window. I was trying to get things set up to use the JS window. I was informed that I needed to get a better understanding of React. I decided to augment my FCC learning by going through the CodeAcademy React curriculum.

I tried tinkering with my CodePen Quote Machine code again. Things were not working. I was trying to figure out why. I was not able to get the JS window to do what I wanted. I decided to throw some code into CodePen that I knew worked from Code Academy. That gave me similar errors. Thus, I thought I might not have my proper scripts/libraries.

16

I don’t believe I ever said this.

I inferred that from this:

Since I am having trouble producing results with Codepen, I am going through another REACT curriculum at Codeacademy.com.

Thus, I thought I might not have my proper scripts/libraries.

OK. So build a starter project in CP.

Start a fresh pen

Let’s start fresh, without any cruff. You can add your JS back in later.

Build a basic HTML pane

<div id="root"></div>

Really, you shouldn’t have to add much, if anything to that.

Add some basic JS

const App = () => <h1>Howdy!</h1>
      
ReactDOM.render(<App />, document.getElementById('root'))

This will give a basic React app that hooks into that div we created and provides a simple React element.

Add your babel preprocessor

Go to Settings -> JS -> JavaScript Preprocessor and use the pulldown menu to select “Babel”. This will convert the JSX (which is not valid JS) into valid JS. It will happen invisibly behind the scenes. There is no need to worry about this too much, just to understand what it is doing and why it is doing it. You don’t need to know (for now, if ever) about how it is doing it. We could write it out without Babel, but it would be much, much, much uglier and more difficult.

Add your libraries

  • Go to Settings -> JS -> Add External Scrips/Pens. In the “Search CDNJS…”, type “react” Select the entry for “react 18.2.0”. It should enter https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js into one of the fields.

This will import the main React library so React will work and you can import extra things if you need them.

  • Also in Settings -> JS -> Add External Scrips/Pens and enter “react-dom” into the search field. Select “react-dom 18.2.0”.

This will import the library you need to hook React into the DOM of your web app.

Those should now be in your libraries. This is different than how you do it in a “real” project, but is make a little more simple for CP. The number “18.2.0” is not super important, as long as they match - the numbers may increase as new versions get added.

  • Also in Settings -> JS -> Add External Scrips/Pens and enter"
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

DIRECTLY INTO ONE OF THE LIBRARY FIELDS. You cannot search for the URL because it is not a standard library - we’re just giving it the URL.

This will hook into FCC’s test suite so you can confirm your project.

With that, you should have a basic React project. You should see “Howdy!” on the app and a green hamburger menu that will allow you to access the test suite.

For this project, you should not need any other libraries. Probably, you will just have to add to the CSS pane and the JS pane.

1 Like
17

Do I have to erase my current pen or can I have multiple pens?

18

I think it would be best to erase your current pen and start fresh.
I would follow along with Kevin’s example and then slowly add to it so you can better understand how React works.
I wouldn’t worry about adding any styling right now.
Just focus on the react portion.
Once you get that working, then you can add styling afterwards.

Hope that helps! :+1:

19

I assume you want me to select Save & close after doing this.

20

Only if you want to save it.