时间戳

首页 > 解决方案 > 新的 React 项目 create-react-app 打开到 /public/index.html 而不是 App.js

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

问题描述

我是新来的反应，并试图让几个教程工作。这些是我遵循的步骤：
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

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

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

我究竟做错了什么？

应用程序.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>

标签： reactjsreact-nativecreate-react-app

解决方案

您应该稍等片刻，运行npm start时需要一些时间才能启动。

看看你运行的控制台npm start，可能有消息说它正在启动。

第一次启动有点慢。

编辑：

因为您处于开发模式，所以 webpack 不会更改您的代码以兼容所有浏览器，因此它适用于 chrome 而不是 Edge。

推荐阅读