Random Quote Machine

JavaScript
1

A couple questions regarding this assignment.

  1. How do you generate a preview of your work so far on the CodePen page? This is built into the fCC editor and descriptions during the coursework leading up to certifications usually hand wave the process (“This is handled for you on the back-end so you don’t have to worry about it.”) Unfortunately now I do have to worry about it so I’m wondering how to do it. CodePen is throwing errors like “React is not defined” etc, so clearly I need to implement something to be able to use JSX etc etc.

  2. Is CodePen the best method to build this? I would like to practice with like, VSCode or something with a little more longevity in terms of future usability for projects. How would one go about doing this?

I am currently redoing the entire course to see if I missed/forgot something, so it’s possible that this is an absolutely stupid question, in which case I sincerely apologize. If this is the case and someone could point me directly to what I missed, that would be appreciated and would save me a lot of time.

I hope everyone is well.

Best,
Argh

Your code so far

JSX -

class QuoteBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: "This is a quote.",
      author: "Jon Swift",
    }
  }
  render() {
    return (
      <div id="quote-box">
        <p id="text">{this.state.quote}</p>
        <h1 id="author">{this.state.author}</h1>
        <button id="new-quote"></button>
        <a id="tweet-quote"></a>
      </div>
    );
  }
}

HTML -

<h1>Is this thing on?</h1>

As far as I can tell “Is this thing on?” does not render anywhere in the CodePen UI, nor does anything in the JSX section, but like I said before, it does not seem to recognize react components automatically like the fCC UI (not that I would expect it to).

Your browser information:

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

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

Link to the challenge:

2

You have to do a little set up in CP. You have to go to Settings -> JS -> Add External Scripts/Pens and add react and react-dom.

If you can’t figure that out, then please provide a link to the pen so we can see where you are.

Yes, this is confusing stuff.

Is CodePen the best method to build this?

Define “best”.

CP is nice because it is a little easier to handle in the beginning and makes it so you don’t have to worry about hosting. It is like a training wheels.

You could develop locally in VS Code, but then you’d have to find a place to make the code accessible (github, probably) and some place to host the app (github pages, maybe). CP takes care of that for you. Plus it makes it really easy to get help, just give us a link.

The disadvantage of CP is that it is only a half-step to “real coding”. But that works - you just need to find a tutorial online about how to create an app locally.

There are other online IDE’s that are a little closer to “real coding” (set up files, package.json, etc.) like repl, etc.

What is “best”? That depends on what your comfort level is and how many “new” things you can handle at once.

One disadvantage of CP is that when you get to this point, it gets a little awkward to do projects like this, they keep getting bigger. But a lot of people do it, so did I. But you’ll want to move beyond it once you get past this cert, for sure.

I am currently redoing the entire course to see if I missed/forgot something, so it’s possible that this is an absolutely stupid question, in which case I sincerely apologize.

Not at all, don’t worry about it.

3

Thanks so much for the response (and for not shaming me for being a total noob)!

I added the react and react-dom scripts to the CodePen project, but the component still doesn’t seem to render.

I can pass the first 6 parameters of the certification by putting the render() contents of my React component directly into the HTML box, but I think I’m supposed to be using what was taught in the coursework to complete the challenge.

I’ve made it back through part of the React section of the coursework and from what I can tell, I think render() needs a node to render to and I’m not sure where/how to find that in the CodePen framework? (This is just a guess).

What is “best”? That depends on what your comfort level is and how many “new” things you can handle at once.

I am generally pretty intuitive and can handle a fair amount of stuff at once as long as it all makes logical sense.

I like using VSCode because I can use my own font/themes and keep a copy of my work locally (autocomplete is nice as well). I don’t mind copy/pasting into whatever for now though, especially if the coursework goes over how to do more things on your own later.

This is my CodePen so far.
(Note: I have commented out the ‘import’ lines at the top of the code because they didn’t seem to be doing anything but I have tried loading the Live View with them in as well).

Thanks again for your help!

Best,
Argh

4

Thanks so much for the response (and for not shaming me for being a total noob)!

We don’t do that here, that’s one of the things I like about here.

Your libraries look good.

Yeah, you don’t use “import” in CP like you would in other environments.

When I open up the browser dev console (something you should learn how to do), I see this error:

react-dom.production.min.js:266 Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Q.render (react-dom.production.min.js:266:33) at pen.js:33:10

When I go to that link, I read:

The full text of the error you just encountered is:

Target container is not a DOM element.

So, I look at how you’re targeting the DOM:

ReactDOM.render(<QuoteBox />, document.getElementById('root'));

That looks good. But what is it targeting? It is looking for something with the ID of “root” in the DOM. Here is your HTML:

<!--
<div id="quote-box">
        <p id="text">{this.state.quote}</p>
        <h1 id="author">{this.state.author}</h1>
        <button id="new-quote"></button>
        <a id="tweet-quote"></a>
      </div>

-->

You have nothing in the DOM right now since it is all commented out, and nothing has that ID anyway.

So, I remove all that and add:

<div id=root></div>

to the HTML pane. That is it. That’s all you need in the HTML pane. Now ReactDOM has a div where it can build the React app.

When I do that, the app starts working:

Screenshot 2023-01-06 at 19.17.33

5

Of course! I actually had an inkling that it might be something like that as I was taking a walk after I posted my reply. Thanks so much for your help! That’s a great tip on using the dev console as well. Big ups to you and fCC forum for the good vibes and the swift advice!

Stay awesome,
<3 Argh

6

Us Hamlet fans have to stick together.

7

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