Question

我一直在谷歌上搜索，看到这里的StackOverflow，我看到这个问题弹出来了，但它们似乎都非常具体针对那些提出问题的人，而且没有一个解决方案适用于我的情况

所以一点上下文：我有一个非常简单的留言板，在Spring启动时有一个后端，工作正常。但是，我在尝试集成React时遇到了问题。我有一个home.html页面，目前看起来像这样：

＆＃13;

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">

<head>
<title>SilbBoard :-)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
	rel="stylesheet" type="text/css" />

<!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/style.css" />

<!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png" />

<script src="https://unpkg.com/react@15.6.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script>


</head>

<body>
	<h1>Welcome to SilbBoard!</h1>
	<div id="root"></div>
	
	 <script src="js/app.js" type="text/jsx"></script>
</body>

</html>

＆＃13;

大多数元数据来自Skeleton样板，它工作正常。然后我有一个javascript文件，出于测试目的，它只包含以下内容：

＆＃13;

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

＆＃13;

然而，这个非常简单的h1与＆＃34; Hello world＆＃34;不会在我的网页上呈现，也不会给我任何错误。

我有什么遗失的东西吗？提前谢谢。

Answer 1

您正在使用的脚本文件不支持import，因为它针对的是Web浏览器，它们现在才刚刚获得对JavaScript模块的支持。使用您正在使用的脚本，React和ReactDOM被定义为全局变量。无需import。

另外，浏览器本身不支持JSX。要使用它，您需要使用某种类型的转换器。通常，您在构建过程中包含转换器步骤，然后将生成的已转换代码发送到浏览器。也就是说，您可以使用浏览器内的转换，但最好不要用于生产目的。

例如，如果您勾选＆＃34;使用BabelJS / ES2015＆＃34;那么Stack Overflow的Stack Snippets会在幕后使用Babel's浏览器进行转换。复选框：

＆＃13;

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

＆＃13;

<div id="root"></div>
<script src="https://unpkg.com/react@15.6.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script>

＆＃13;

我建议您仔细阅读React documentation，尤其是Try React和Add React to a New App页。

反应简单＆＃34; Hello World＆＃34;不会渲染

1 个答案: