重写默认React Javascript文件导致的错误"/>
重写默认React Javascript文件导致的错误
我想做什么
在创建新的 React 应用程序命令之后，我试图更改执行以下命令时浏览器中显示的屏幕。
我已经执行了以下命令并确认它有效，但我想编辑 HTML 和 Javascript 文件以仅显示
Hello World!npx create-react-app my-app
cd my-app
npm start
先决条件
Creating a new React app过程中index.js的内容如下
从“反应”导入反应；
从 'react-dom/client' 导入 ReactDOM；
导入“./index.css”；
从'./App'导入应用程序；
从 './reportWebVitals' 导入 reportWebVitals；
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
// 如果你想开始测量应用程序的性能，请传递一个函数
// 记录结果（例如：reportWebVitals(console.log)）
reportWebVitals();
错误
它似乎正在运行，但浏览器中没有显示任何内容，因为没有显示任何内容的白屏。
需要修改什么才能显示
Hello World!$ npm start
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
代码
my-app文件夹下的public和src文件夹被删除，只剩下
public/index.htmlsrc/index.jsindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="./src/index.js" type="text/jsx"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById("root")
);
开发环境
- node v18.15.0
- 反应 18.2.0
ReactDOM.renderReactDOM.createRootReactDOM.createRoot(document.getElementById('root'))
.render(<h1>Hello World!</h1>);
更多推荐
重写默认React Javascript文件导致的错误
发布评论