Why does my browser not showing like in tutorial

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

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

Thanks carlosvisator,

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

but nothing show up yet. weird.

What tutorial are you following?

Can you post all of your code?

Do you see any errors messages in the browser console or the terminal?

I noticed you are using React 18. If so, you can not use ReactDOM.render. You should research using createRoot.

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<p>Hello World</p>);
1 Like

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

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!!

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

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

1 Like

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

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

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

So how do I share?

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

Google “how to share codepen link”.

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