我是新的React，并试图让几个教程的工作。以下是我遵循的步骤：
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的代码。
我做错了什么？
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>
1条答案
按热度按时间6mzjoqzu1#
你应该等待一点，当你运行
npm start时，它需要一些时间才能启动。看看你运行
npm start的控制台，可能有一条消息说它正在启动。第一次开始有点慢。
编辑：
由于您处于开发模式，webpack不会更改您的代码以兼容所有浏览器，因此它可以在chrome上工作，但不能在Edge上工作。