Need help with frontend project

Hello everyone!
I’m new to coding, I’m nearly 2 months into coding. I’m going to make efforts to be more active here, so far I’ve tried mostly relying on tutorials and repitition/whatever sources I can find.
For the Front End Project, I’ve been trying different things - codepen, React, Visual Studio Code, etc. Yet my code doesn’t seem to work, and I don’t know what to do.
This is what I have so far. Can anyone help? Would really appreciate it. Thanks!
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <title>Random Quote Machine</title>
</head>
<body>
    <div id = "app"></div>
    <script type="text/babel" src="./index.js"></script>
</body>
</html>
JS:
function App(){
    return {
<div> "Hello World" </div>
    };
    }

ReactDOM.reader(<App/>, document.getElementById("app"))

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

You mentioned you tried Codepen. Do you have a link to it?

Remember, Codepen and Visual Studio Code are both editors. React is a JavaScript library.

Also, you might want to go back through the React challenges, if you believe the following is a valid way to render something in React. You will not find an example doing this.

function App(){
  return {
    <div> "Hello World" </div>
  };
}

Yes, this is what I have so far on Codepen. I want to finish it in Codepen before repeating it in React. The code I put above is what I tried for Visual Studio, where I was trying to enable React.

Yes, I think you’re right. I’m going to repeat them to make sure I get the concepts. Thank you.
Sometimes I’m not sure if I got the concept of what I’m doing, so it helps to get immediate feedback.

1 Like

In your Codepen (which is using jQuery), you have a function named getQuote, but you never use it.

Am I far off?
And is this the right way to enable React?

JS:
//First line ReactDOM.reader(, document.getElementById(“app”)) //

HTML:
First Line //script crossorigin src=“https://unpkg.com/react@18/umd/react.development.js”>//

//script crossorigin src=“https://unpkg.com/react-dom@18/umd/react-dom.development.js”>// Second Line

////Third Line

If you are using Codepen and using React, you will need to specify Babel as the preprocessor under the JavaScript settings, remove the Babel script from the index.html file.

It’s fully gone now, though I still have it in my visual studio code. Should I take it out from there as well?