Question

在这里反应noob，我正在开发一个简单的基于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，在开发工具中我看到了这个

未捕获的SyntaxError：意外的令牌＆lt; index.html的：42

这是

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

这里有什么问题？根据我在网上和训练营指示中看到的一切，我的语法是正确的，这应该有效。

任何人都可以提供一些见解吗？

Answer 1

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

完成重新加载页面的工作完成后。我真的应该更习惯于原生反应生态系统。

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

1 个答案: