New React project, create-react-app, opens to /public/index.html instead of App.js

Question

I'm new to react, and am trying to get several tutorials to work. These are the steps I've followed:
C:\React-App>npm install -g create-react-app
C:\React-App>npx create-react-app my-app
C:\React-App>cd my-app
C:\React-App\my-app>npm run build
C:\React-App\my-app>npm start

When I open http://localhost:3000/ in my browser, I get a white page, and when I look at the source, I see the source from /public/index.html

All my tutorials show that I should be seeing the code from App.js.

What am I doing wrong?

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

/public/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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Vencovsky · Accepted Answer · 2019-12-16 20:34:54Z

2

You should wait a little bit, when you run npm start it take some time to start.

Look at the console you runned npm start, probably there is a message saying that it's starting.

The first time it starts is kind of slow.

Edit:

Because you are in development mode, webpack won't change your code to be compatible to all browsers, so it works on chrome but not Edge.

edited Dec 16, 2019 at 20:34

answered Dec 16, 2019 at 20:20

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

baumli Over a year ago

This is what it says in the console, it looks like it started fine. Starting the development server... Compiled successfully! You can now view my-app in the browser.

Vencovsky Over a year ago

@baumli and it's still blank?

baumli Over a year ago

Yes, still blank, I do have an error in my browser console: HTML1300: Navigation occurred. localhost:3000 (1,1) [HMR] Waiting for update signal from WDS... 0.chunk.js (38870,7) 0: SyntaxError 0.chunk.js (3873,1)

Vencovsky Over a year ago

@baumli could you please share your index.js and App.js ?

Vencovsky Over a year ago

@baumli yes, the browser is the problem.

|

Collectives™ on Stack Overflow

New React project, create-react-app, opens to /public/index.html instead of App.js

1 Answer 1

Edit:

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit:

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related