Why does my browser not showing like in tutorial

JavaScript
1

I follow the first few mins in the tutorial and somehow the instructor’s screen showed something but not mine.

I reconfirm on my end but looks like all are the same, yet no nothing shown in my browser.

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <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@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src = "index.js" type="text/babel"></script>
    </body>
</html>

This is my index.html

ReactDom.render(<p>Hello World</p>, document.getElementById("root"))

this is my index.js

Thanks.

1 Like
2

Hi @garrentmh and welcome!!

I recommend you take breaks frecuently and even slow down when if is necessary.

I just started with React but you have a typo here: ReactDOM

I hope that helps. Happy coding!!

1 Like
3

Thanks carlosvisator,

I’ve changed to
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))

but nothing show up yet. weird.

5

I’m following this tutorial
image

https://www.youtube.com/watch?v=bMknfKXIFA8&t=1074s

When I tried in Scrimba, it works fine, but copy it to VS Code doesn’t seemed to show anything.

there’s 3 files on my end.

html, body {
    margin: 0;
    padding: 0;
}

Index.css

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

index.html

ReactDOM.render(<h1>Hello, me</h1>, document.getElementById("root"))

index.js

1 Like
6

Hi again @garrentmh

It looks accurate, did you try directly in your HTML?

<script type="text/babel">
  ReactDOM.render(<h1>Hello, me</h1>, document.getElementById("root"));
<script>

Also, did you check if you need the new syntax for render components?

Rendering Elements | createRoot()

Good luck!!

7

You have to serve the page. Install an extension like Live Preview, or Five Server/Live Server.

You can use the old render method with React 18 but yes you are meant to use createRoot with 18. You get a warning in the console.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

8

I’ve installed Live Preview and still nothing happened. Will try it out on the createRoot and see.

1 Like
9

https://codepen.io/, can you share your code here; it will be easier to debug

10

The code you posted works just fine for me when serving the page.

In any case, I would recommend using Vite and not the CDN links.

  • Install Node.js if you haven’t done so yet.

  • From a terminal run, npm create vite@latest and follow the prompts to create a React app.

1 Like
11

Got it. Currently I’m learning on Vite to see how it can run in case it doesn’t work on my machine.

1 Like
12

So how do I share?

is it the Pen Title ? My Pen Title is “Testing for React Course”

13

Google “how to share codepen link”.

Googling is the most important skill to achieve by all the developers

14

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