REACT: Blank Page on localhost3000

I'm having problems trying to run this application when I try the npm start command. It should be showing <h1>GPT-3</h1> on localhost3000 on my browser as it does on the code above:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js
import React from 'react'

const App = () => {
  return (
    <div>
        <h1>GPT-3</h1>
    </div>
  )
}

export default App

Before starting this application, I tried the command npx create react-app ./ to create the files needed, after that I used npm install react-icons and finally npm start but it's not working as I planned.

npm -v 9.7.2

node -v v18.16.1

Windows 11 -v 22H2

Chrome -v 115.0.5790.102 (Compilação oficial) (64 bits)

this message appears when I run the command npm start: npm start

Solution

It might be a typo, but your question states localhost3000 when the port and url should be localhost:3000

If you still see a blank page then check the console using developer tools.

Depending on which version of React you're using, you might also need to update the method in which you are rendering on the root element as this has changed in the latest version.

Before:

ReactDOM.render(<App />, document.getElementById('root'));

After:

ReactDOM.createRoot(document.getElementById('root')).render(
<App />,
)