React.js 应用程序不产生输出：简单的介绍性应用程序[已关闭]

Question

我已经开始学习 React.js，并且正在关注 Youtube 上的精彩教程

https://www.youtube.com/watch?v=SqcY0GlETPk

第一个命令是生成一个简单的“Hello world”消息。

我检查了我的代码，一切正常，但是当我刷新 Google Chrome 浏览器窗口时，什么也没有发生。这是一个空白页。

你能告诉我为什么吗？

这是代码：

` 应用程序.tsx

import Message from './Message'


 function App() {

 return <div><Message></Message></div>

  }

   export default App;


  Message.tsx

  //Pascal Casing
  function Message() {
  return <h1> Hello World </h1>;
  }

  export default Message`

我刷新了网络浏览器，但没有显示任何内容。

服务器正在运行。

我使用VS代码编辑器

这是我的 package.json 文件的内容：

{ "name": "vite-project", “私人”：真实， “版本”：“0.0.0”， “类型”：“模块”， “脚本”：{ "dev": "vite", "build": "tsc && vite 构建", "lint": "eslint 。--ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite 预览" }, “依赖项”：{ “反应”：“^18.2.0”， "react-dom": "^18.2.0" }, “开发依赖项”：{ "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", “打字稿”：“^5.2.2”， "vite": "^5.2.0" }

Answer 1

确保在组件中导入 React，即使您不直接使用它。

// App.tsx
import React from 'react';
import Message from './Message';

function App() {
  return <div><Message /></div>;
}

export default App;

// Message.tsx
import React from 'react';

function Message() {
  return <h1>Hello World</h1>;
}

export default Message;