Question

我一直在尝试运行一个简单的hello world react应用程序。我没有使用任何工具。我在同一目录中创建了index.html和index.js。在我的index.js中，如果我将elements变量转换为字符串，则它可以工作，但不能达到我期望的工作方式。它传入一个字符串，并且该字符串的显示与键入的完全相同

<h1>Hello, world</h1>

我想将html传递给render方法，但我不断收到以下错误：

Uncaught SyntaxError: Unexpected token <

请参见下面的代码：

'use strict'

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('app'));

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>

    <div id="app"></div>
		<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

    <script src="index.js"></script>
  </body>
</html>

我正在关注的教程是：

https://reactjs.org/docs/rendering-elements.html

不使用babel，就不能使用jsx。请参阅下面的解决方案，并注意React.createElement函数，而不是将html直接传递到ReactDOM.render函数中。

解决方案：

'use strict'

ReactDOM.render(React.createElement('h1', null, 'Hello, world'), document.getElementById('app'));

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>

    <div id="app"></div>
		<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

    <script src="index.js"></script>
  </body>
</html>

Answer 1

我认为如果没有捆绑器/ Babel，就不可能使用JSX语法。

您必须使用React.createElement('h1', null, 'Hello, world')。

来源：https://medium.com/@clmyles/react-without-npm-babel-or-webpack-1e9a6049714

编辑：如果您打算使用Babel，则@Chris answer in his comment（import React ...）是正确的。 React然后就需要使用JSX。

简单的React Hello World实施

1 个答案: