主页 / 问题 / 616372
Accepted
Skim
Asked:2020-01-18 20:35:31 +0800 CST2020-01-18 20:35:31 +0800 CST

如何正确连接 React 到站点？

  • 772

有 HTML：

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>

        <script src="/r/b2b-spa/js/main.js"></script>

  <title>Тайтл</title>
</head>
<body>

<div id="root"></div>

</body>
</html>

文件代码/r/b2b-spa/js/main.js：

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

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

main.js第一行有错误：

未捕获的语法错误：意外的令牌导入

告诉新手如何正确地将 React JS 连接到页面。

reactjs

2 个回答

  1. Best Answer

    如果你想使用导入/导出，那么你需要设置某种项目构建器来使用导入/导出（es6）+显然，将 jsx 转换为 js。如果你通过标签连接react，你不需要再次导入，你可以立即使用它：

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

  2. 您不需要导入，您已经通过 cdn 连接了库，您可以将其完全删除并保留渲染 - 它应该可以工作。但在此之前，babel 可能会给你一个错误，因为你没有指定类型，你有：

    <script src="/r/b2b-spa/js/main.js"></script>

    需要：

    <script type="text/babel" src="/r/b2b-spa/js/main.js"></script>
    • 1

相关问题