React Not Displaying / Rendering-CodePudding

I recently started learning React. I wanted to make my first app and have done the following.

Created a project folder
Ran npx create-react-app App.js
Ran npm start

My src/App.js is as follows:

import React from "react";
import ReactDOM from "react-dom/client";

const navbar = (
    <nav>
        <h1>Wiggly's</h1>
        <ul>
            <li>Menu</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(navbar);

My index.html is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="">
</head>

<body>
    <div id="root">

    </div>

    <script src="App.js"></script>
</body>


</html>

When I refresh my localhost I still see the react splash screen.

I've looked everywhere on the forums and haven't been able to figure out what I'm doing wrong. It's my first time using react so I'm likely making a simple error. I appreciate anyone's help.

CodePudding user response：

Since you have created the app using CRA, Can you check if there is already a root.render() method being called inside the index.js file which is showing the splash screen.

The default template of CRA has the root.render method inside the index.js file with App imported from App.js file.

CodePudding user response：

I guess you missed following the naming convention that React component needs.

From the docs

Capitalized types indicate that the JSX tag is referring to a React component.

Changing const navbar = ( to const Navbar = ( should work.

Try checking in incognito mode, check for console errors if any if its still not working as expected.