简单的 JSX 在控制台中抛出错误答案

【问题标题】：Simple JSX throws error in console简单的 JSX 在控制台中抛出错误
【发布时间】：2018-04-10 20:36:49
【问题描述】：

在这里反应新手，我正在使用以下代码开发一个基于 JSX 的简单组件：

<!DOCTYPE html>

<html>

<head>
  <title>React Boot camp Day 1</title>
</head>

<body>

<div id='app'></div>

<!--Needed for react code-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<!--Needed for react dom traversal-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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

  console.log('Test React', window.React)
  const name = "Callat"
  const handle = "@latimeks"

// create components and use jsx
function FirstComponent(props){
  return <h1>{props.name}</h1>
}

function TestJSX(){
  return (<FirstComponent name={name}/>)
}

ReactDOM.render(<TestJSX/>, document.getElementById('app'))

</script>
</body>
</html>

运行此代码不会产生 UI，在开发工具中我看到了这个

Uncaught SyntaxError: Unexpected token

哪个是

  function FirstComponent(props){
      return <h1>{props.name}</h1>
    }

这里有什么问题？根据我在网上和训练营说明中看到的所有内容，我的语法是正确的，这应该可以工作。

谁能提供一些见解？

【问题讨论】：

你是如何打包和转译的？听起来您只是将 JSX 直接加载到浏览器中。这不是它的工作原理。
这里没有打包或转译步骤。即使我有cdn，我还需要一个吗？
是的，这与 CDN 完全无关。浏览器无法解析

标签： reactjs

【解决方案1】：

我找到了答案。包括 CDN 只是修复的一部分。第二部分包括以下内容： <script type="text/babel">//My react code</script>

完成后重新加载页面即可。不过，我真的应该更多地习惯原生反应生态系统。

【讨论】：

是的，如果你不使用 webpacking/etc，肯定需要它。