React Not Displaying / Rendering

November 21, 2022

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.

>Solution :

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.