Question

请帮忙。我是全新的，所以我知道这是非常基本的，但我无法弄清楚我的设置有什么问题。无论我做什么，我都会遇到语法错误。我将代码放在codepen中，它工作正常。我需要让我当地的工作。

我有一个带有index.html和index.js

的dist文件夹

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>React</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
</head>
<body>
  <div id="root">
  <!-- This div's content will be managed by React. -->
</div>
  <script src="index.js"></script>
</body>
</html>

index.js

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

错误

意外令牌＆lt;

我也试过这段代码

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>React</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
</head>
<body>
  <div id="react-container"></div>
  <script src="index.js"></script>
</body>
</html>

index.js

const { createElement } = React
const{ render } = ReactDom

const title = createElement(
'h1',
{id: 'title', className: 'header'},
 'Hello World'
)

render(
title,
document.getElementById('react-container')
)

错误ReactDom未定义

或

const title = React.createElement(
  'h1',
  {id: 'title', className: 'header'},
  'Hello World'
)

ReactDOM.render(
  tile,
  document.getElementById('react-container')
)

带有错误标题的

未定义

Answer 1

确定。三个不同的错误。

首先，JSX不是（技术上）JavaScript - 你需要像Babel这样的转换器。 <h1>...</h1>是JSX。

其次，它可能是ReactDOM，而不是ReactDom - 资本化很重要。你是如何导入ReactDOM的？ import ReactDOM from 'react-dom'？如果是的话，大写。

第三，最后，tile来电中的render需要title。

慢慢来，查看代码，然后呼吸。

React.js基本设置

1 个答案: