React 教程：为什么 HTML 页面显示一个空白页面？答案

【问题标题】：React tutorial: Why does the HTML page shows a blank page?React 教程：为什么 HTML 页面显示一个空白页面？
【发布时间】：2021-05-23 02:07:19
【问题描述】：

我正在尝试学习 React 教程，但我无法编写一个简单的程序。我可以在没有 HTML 文件的情况下运行 React 应用程序，但我无法让 HTML 显示任何内容。

代码如下：

索引.html

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

index.js

import React from 'react'
import ReactDOM from 'react-dom'

function App() {
  return (
    <h1>Hello world!</h1>
  )
}

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

我确实启动了npm，如果我创建了App.js，我可以运行一个应用程序，但是任何有助于使 HTML 工作的帮助将不胜感激。

在开发工具控制台中，我收到以下错误： Uncaught SyntaxError: Cannot use import statement outside a module 为index.js

【问题讨论】：

你在使用 create-react-app 吗？
代码正确。如果您使用 CRA，请尝试运行 npm start。否则运行 node index.js
这里没有提到任何错误。检查节点控制台和浏览器开发工具控制台
我根本看不到 Hello World，只是一个空白页。也许它与package.json中的主页配置有关？这就是我目前正在努力的工作。
这是我得到的错误：Uncaught SyntaxError: Cannot use import statement outside a module

标签： javascript reactjs

【解决方案1】：

使用可以使用create-react-app，先npm i -g create-react-app，再用create-react-app

你看到它的原因是你应该为现代应用程序配置 babel 和 webpack，但是 create-react-app 很容易用于基础反应项目

【讨论】：