将 React 添加到 HTML（无需安装 create-react-app）
[英]Adding React to HTML (without create-react-app installation)
问题描述
I'm trying to follow this official React Documentation on how to add React to a website.
我正在尝试按照官方 React 文档了解如何将 React 添加到网站。
In file main.html:在文件 main.html 中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<div id="root"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src = "states_clock.js"> </script>
</body>
</html>
In file states_clock.js在文件 states_clock.js
// states_clock.js
'use strict';
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function tick() {
root.render(<Clock date={new Date()} />);
}
setInterval(tick, 1000);
Both files are in the same folder.两个文件都在同一个文件夹中。 When I open the html page in chrome, I get the error message:当我在 chrome 中打开 html 页面时，我收到错误消息：
Uncaught SyntaxError: Unexpected token '<' (at states_clock.js:11:7)
The < being complained about is that of the div in the js file. <被抱怨的是js文件中的div 。
2 个解决方案
解决方案1
2 2022-07-25 20:36:04
This:这个：
class Clock extends React.Component {
render() {
return (
<div>
is not JavaScript syntax - it's JSX syntax.不是 JavaScript 语法 - 它是 JSX 语法。
When you do当你这样做
<script src = "states_clock.js"> </script>
as you would with any normal script tag, you're telling the browser to interpret and run it as a standard JavaScript file, which doesn't work, because it isn't.就像使用任何普通脚本标记一样，您是在告诉浏览器将其解释为标准 JavaScript 文件并将其运行，这不起作用，因为它不是。 Add the attribute type="text/babel" to the script tag so it doesn't get run as JavaScript, and so that Babel Standalone sees that it's a script tag for it to process.将属性type="text/babel"添加到 script 标签，这样它就不会以 JavaScript 的形式运行，这样 Babel Standalone 就会看到它是一个要处理的脚本标签。
<script src="states_clock.js" type="text/babel"></script>
You could also write the JSX inline, like this:你也可以内联编写 JSX，如下所示：
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id='root'></div> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> 'use strict'; const domContainer = document.getElementById('root'); const root = ReactDOM.createRoot(domContainer); class Clock extends React.Component { render() { return ( <div> <h1>Hello, world.</h1> <h2>It is {this.props.date.toLocaleTimeString()};</h2> </div> ). } } function tick() { root;render(<Clock date={new Date()} />), } setInterval(tick; 1000) </script>
解决方案2
0 2022-07-25 21:10:28
So, thanks to the comment by ChrisG, I understood that we're supposed to not use JSX in this part of the tutorial.所以，多亏了 ChrisG 的评论，我明白我们不应该在这部分教程中使用 JSX。
In that spirit, here's my solution:本着这种精神，这是我的解决方案：
'use strict';
const e = React.createElement;
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
class Clock extends React.Component {
render() {
return e('div', null, e("h1", null, "Hello, world!"),
e("h2", null, "It is ", this.props.date.toLocaleTimeString(), "."));
};
}
function tick() {
root.render(e(Clock, {date: new Date()}, null))
}
setInterval(tick, 1000);
PS: Here's useful link that transforms JSX code into non-JSX code. PS：这是将 JSX 代码转换为非 JSX 代码的有用链接。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.