时间戳

首页 > 解决方案 > 基本 React 代码在我的 PC 上没有产生任何输出

javascript - 基本 React 代码在我的 PC 上没有产生任何输出

问题描述

一个简单的反应代码在我的电脑上不起作用。

HTML文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>React Intro</title>
</head>
<body>
    <div class="root">

    </div>
    <script src="./App.js"></script>
</body>
</html>

反应文件如下：

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

ReactDOM.render( <h1>Hello</h1> ,document.getElementById("root"))

当我使用实时服务器运行 HTML 文件时，没有显示任何内容。而应该显示“你好”。

标签： javascripthtmlreactjs

解决方案

让 React 运行

Web 浏览器不支持：

  • import除非：
    • 您将脚本明确声明为具有type属性的模块
    • 您使用 URL 作为您要从中导入的值（而不是像 node.js 这样的模块名称）
  • JSX

您需要将您的 JSX + 模块转换为浏览器支持的 JS。

最好的方法是使用React 文档中描述的工具链。

（我强烈建议采用选项 2 并使用 Node.js + 捆绑器。选项 1（客户端 Babel）有一些缺点（例如缺乏对模块的方便支持）。

  • 确保您安装了最新版本的 Node.js。
  • 跑npx create-react-app my-app
  • cd my-app
  • npm run start

其他选项可用，例如Parcel（更简单但不太常用，因此提供的帮助较少）和Next.js（更复杂但在服务器端渲染中烘焙）。

你的错字

您还说过<div class="root">然后尝试使用getElementById. 给它一个id，而不是一个类。

旁白：一定要学会在浏览器中使用开发者工具。您应该在问题中引用的控制台中会出现错误消息。

推荐阅读