React JSX無法識別？

Question

我正在使用這兩個CDN在我的項目中包括React庫，但是當我去使用JSX在HTML文檔的主體上渲染一些html時，它的確將JSX識別為JSX（我使用的是chrome），因此拋出正在以javascript讀取JSX時出現錯誤。 難道我做錯了什么？ 任何幫助將是巨大的:) CDN：

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

HTML：

<body>
   <div id="here"></div>  
</body>

反應：

var React = require('react');
var ReactDOM = require('react-dom');
const text = <h1>Hello World</h1>;

ReactDOM.render(text, document.getElementById('here'));

Answer 1

您需要使用babel才能使用JSX 。

將babel添加到項目中的兩種方法是：

為babel添加CDN

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

現在，您可以通過JSX添加type="text/babel"屬性在任何<script>標記中使用JSX 。

例如，

<script type="text/babel">
   const text = <h1>Hello, world!</h1>
   ReactDOM.render(
      text,
      document.getElementById('root')
   );
</script>

演示版

使用npm安裝babel ，

來自文檔

將JSX添加到項目中並不需要諸如捆綁程序或開發服務器之類的復雜工具。 從本質上講，添加JSX與添加CSS預處理器非常相似。 唯一的要求是在計算機上安裝Node.js。

轉到終端中的項目文件夾，並粘貼以下兩個命令：

Step 1: Run npm init -y (If you get an "Invalid name" error when you run npm init -y, rename the project folder to only contain lowercase ASCII letters or hyphens (e.g. my-project), and try again.)

Step 2: Run npm install babel-cli@6 babel-preset-react-app@3

React JSX無法識別？

問題描述

1 個解決方案

解決方案1
0 2019-07-21 14:14:13

React JSX無法識別？

問題描述

1 個解決方案

解決方案1 0 2019-07-21 14:14:13

解決方案1
0 2019-07-21 14:14:13