Front End Development Libraries Projects - Build a Random Quote Machine

[Majinfoo]

Goodmorning, quick question. Is it react 18.2.0 and react dom i should have as packages? Also should it be written like this
import * as React from ‘https://esm.sh/react@18.2.0’ or like this
import React from ‘https://esm.sh/react@18.2.0’
Your code so far

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 Edg/108.0.1462.54

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

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

Hi.

What is the way you are writing this? Codepen? Some other online IDE? Locally? With something like create-react-app?

Usually, if you need to import it, I would expect to see:

import React from 'react'

and the addition of the correct package would be handled in package.json and with the bundler.

But we can help better if we know more about how you are trying to do this.

[Majinfoo]

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"

"hello"

CSS
#app{
height:50px;
width:60px;
border:“5px solid black”
}

js

import React from ‘https://esm.sh/react@18.2.0’
import ReactDOM from ‘https://esm.sh/react-dom@18.2.0’

class QuoteMachine extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div id=“quote-box”)>

New Quote
<a id=“tweet-quote” href=““twitter.com/intent/tweet””>

hello

)
}
}
ReactDOM.render()document.getElementById(“app”)

Im using codepen, this is what i have so far cant figure out why its not rendering on the page or passing any of the requirements on the test

[kevinSmith]

Can you provide a link to the pen?

Usually in CP, you don’t have to import.

[Majinfoo]

A Pen by Yo (codepen.io)

[kevinSmith]

You need to delete those two import lines and go to Settings -> JS -> Add Packages and fill in the search for “react” and “react-dom”. That will add those to the packages available in the app, no need to import. That is how CP works.

[Majinfoo]

When i added the react and react dom packages in the js section under settings those lines automatically appeared in the js section

[kevinSmith]

Sorry, I should have said to add them to the “search CDN”

[kevinSmith]

You have some other issues.

When in doubt, start simple.

I have this in my HTML:

<div id="app"></div>

and this in my JS:

class QuoteMachine extends React.Component {
  render() {
    return (
      <h1>howdy!</h1>
    )
  }
}

ReactDOM.render(<QuoteMachine />, document.getElementById("app"))

and this is what the settings looks like:

With that, I have a basic, functioning React app.

[kevinSmith]

Just type “react” and “react-dom” into that search bar and it will offer you the most recent versions.

[Majinfoo]

Yeah that fixed the packages thing, theyre not imported anymore. Im definitely gonna have to start over and take it a bit slower thank you though Kevin!

[kevinSmith]

We’ve all been there. This is tough stuff. And CP is a little weird. It’s a good stepping stone, like training wheels, but a little different.