Front End Development Libraries Projects - Build a Markdown Previewer - Studio Code

JavaScript
1

Tell us what’s happening:

Hey there.
I’d like to use Visual Code to do this project, but if a type a simple div with the word “hello”, it’s not rendered to html. Why?

I installed node.js, I imported react.
The first rows of the code I quoted here are in the html, the others in the js.
If I type them in CodePen they work.
What should I do?

Thank you

Your code so far

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="script.jsx"></script>

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                hello
            </div>
        )
    }
}

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

Your browser information:

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

Challenge Information:

Front End Development Libraries Projects - Build a Markdown Previewer

2

Hi @alessioben

So the forum can assist please post your full html code.

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

3

Here it is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <title>Markdown Previewer</title>
</head>
<body>
    <div id="app"></div>
    <script src="script.jsx"></script>
</body>
</html>
4

After the quote mark add a dot followed by a back slash.

5

also, React needs to be compiled, what compiler are you using?

6

I did it but it does’t work

7

I’m just using Visual studio code running a live server with it. What else should I do?
I looked for it online but I just found things like this that creates a React app only. But I need an index.html and a script.jsx that work together, like the code I wrote above

8

Check the file names and file extensions, and directory paths.

9

Both files are in the same directory… I don’t know what else to check

10

Try placing the script element above the closing body tag.

You should be able to submit the project with all tests passing using a CodePen link.

11

It’s the same…
The problem is viewing via Visual Code, with CodePen it works

12

Are there any error messages in the console log?
Maybe restart Live Server?

13

It says there are no problems in the workspace.
You mean when you click Go live? I already did it… But I have a preview extension and I see nothing there, too

14

Maybe I have to type something in the terminal to make it work?

15

Have a read of this article

16

But my purpose isn’t to open VSC from my computer terminal. It’s okay for me to use the application directly

17

The browser doesn’t read a jsx file, it needs a javascript file, CodePen compiles the code for you from react to javascript, to user VSCode you need to set up an environment that does that, I can’t find a simple guide for that.

18

Ahh! Thank you!!
If you find a guide to do it I’d appreciate it so much.
The fact is that if I build a react app using VSCode, I can’t interface it with an html, like in CodePen.

19

You should try to follow a guide on how to create a react app

20

Yeah but I didn’t find one that makes you use an html page, too.
I’ll continue to look for it