编辑：

Question

我是新来的反应者，并且正在尝试使一些教程起作用。这些是我遵循的步骤：
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运行构建
C：\ React-App \ my-app> npm start

当我在浏览器中打开http://localhost:3000/时，我得到一个白页，当我查看源代码时，我会从/public/index.html看到源代码

我所有的教程都表明我应该从App.js中看到代码。

我在做什么错了？

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>

Answer 1

您应该稍等一下，当您运行npm start时，需要一些时间才能开始。

看看您运行的npm start控制台，可能会出现一条消息，提示它正在启动。

第一次启动有点慢。

编辑：

由于您处于开发模式，因此webpack不会更改您的代码以使其与所有浏览器兼容，因此它可以在chrome上运行，但不能在Edge上运行。

新的React项目create-react-app打开至/public/index.html而不是App.js

1 个答案:

编辑：