ake*_*dis 5 html javascript reactjs
我正在使用这 2 个 CDN 在我的项目中包含 React 库,但是当我使用 JSX 将一些 html 渲染到 HTML 文档的主体上时,它不会将 JSX 识别为 JSX(我正在使用 chrome),因此抛出当它将 JSX 读取为 javascript 时出现错误。难道我做错了什么?任何帮助都会很棒:) 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>
Run Code Online (Sandbox Code Playgroud)
HTML:
<body>
<div id="here"></div>
</body>
Run Code Online (Sandbox Code Playgroud)
反应:
var React = require('react');
var ReactDOM = require('react-dom');
const text = <h1>Hello World</h1>;
ReactDOM.render(text, document.getElementById('here'));
Run Code Online (Sandbox Code Playgroud)
您需要一个babel
才能使用JSX
.
添加babel
到项目的两种方法是:
CDN
用于babel
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>\n
Run Code Online (Sandbox Code Playgroud)\n\n现在您可以通过向其添加属性来JSX
在任何<script>
标签中使用。type="text/babel"
例如,
\n\n<script type="text/babel">\n const text = <h1>Hello, world!</h1>\n ReactDOM.render(\n text,\n document.getElementById(\'root\')\n );\n</script>\n
Run Code Online (Sandbox Code Playgroud)\n\n\n\nbabel
使用npm
,来自文档
\n\n\n\n\n将 JSX 添加到项目中不需要\xe2\x80\x99 等复杂的工具,例如捆绑器或开发服务器。本质上,添加 JSX 很像添加 CSS 预处理器。唯一的要求是在您的计算机上安装 Node.js。
\n
转到终端中的项目文件夹,然后粘贴以下两个命令:
\n\nStep 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.)\n\nStep 2: Run npm install babel-cli@6 babel-preset-react-app@3\n
Run Code Online (Sandbox Code Playgroud)\n