我有Codepen 代码，我试图仅使用三个文件（index.html、main.js 和 style.css）将其复制到网页上。我尝试在 HTML 文件的 head 标签上加载这些脚本。
<script src="https://npmcdn.com/babel-transform-in-browser@6.4.6/dist/btib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
但是，它不起作用。我得到的只是这个错误
Uncaught SyntaxError: Unexpected token <
将这个反应代码加载到 HTML 需要哪些 CDN 脚本文件？
【问题讨论】：
标签： javascript reactjs babeljs
您必须提供适当的脚本来支持 React 和 ES6+，如下所述：
最后我们用简单的.html例子来总结一下上面提到的
<html>
<head>
<!-- https://reactjs.org/docs/cdn-links.html -->
<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>
<!-- https://babeljs.io/docs/en/next/babel-standalone.html -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel">
const App = () => <div>Hello!</div>
ReactDOM.render(
<App />, document.getElementById('react-container'))
</script>
</body>
</html>
【讨论】：
这是房间里极简主义者的一个更简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Minimal Static React</title>
<script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
class App extends React.Component {
constructor(props) {
super(props)
this.state = {count: 1}
this.increase = this.increase.bind(this)
this.decrease = this.decrease.bind(this)
}
increase() {
this.setState({'count': this.state.count+1})
}
decrease() {
this.setState({'count': this.state.count-1})
}
render() {
return (
<div>
<h1>Count: { this.state.count }</h1>
<div onClick={this.increase}>+</div>
<div onClick={this.decrease}>-</div>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>【讨论】：
<head>
<title>Beginner's Guide to React</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"> </script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root');
const element = React.createElement('div',{className:''},'Hello World' );
ReactDOM.render(element, rootElement);
</script>
【讨论】：
您需要使用babel standalone 脚本来转译代码，并且您需要包含react and react-dom 的脚本，使用这些就可以了：
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
使用 codepen 的原因：检查设置/javascript，你会发现 babel 被选为 JavaScript Preprocessor，codepen 自动包含脚本，但要在本地运行这些文件，您需要包含 standalone script。
更新：
1- 你需要在渲染 React 代码的 div 之后定义脚本，否则会抛出错误。像这样：
<body>
<div id="root"></div>
<script type="text/babel" src="pomodoro.js"></script>
</body>
2- 使用ReactDOM.render 而不是React.render。
检查工作代码：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
class SetTimer extends React.Component{
render(){
return (
<div className="set-timer">work <br/> session
<div className="minus-add">
<button className="setting-button" id="minus-timer" onClick={this.props.minus}>-</button>
<button className="setting-button" id="add-timer" onClick={this.props.add}>+</button>
</div>
</div>
);
}
}
class SetBreak extends React.Component{
render(){
return (
<div className="set-break"> break<br/> session
<div className="minus-add">
<button className="setting-button" id="minus-break" onClick={this.props.minusbreak}>-</button>
<button className="setting-button" id="add-break" onClick={this.props.addbreak}>+</button>
</div>
</div>
);
}
}
const leftPad = (time)=>{
return (time<10)? '0'+time :time
}
const TimerDisplay = (props) => (
<div className="timer-display"><span className="worklabel">Work session time</span><br/>
{props.currentTime}
<div className="breaktime"><span className="breaklabel">break session time</span><br/>{props.breakTime}</div>
</div>
);
// let baseTime= 25;
class App extends React.Component {
constructor(){
super();
this.state = {
baseTime:25,
breakTime:5,
currentTime: moment.duration(25,'minutes'),
timer:null,
startbuttonvisible:true,
pausebuttonvisible:false,
resumebuttonvisible:false,
stopbuttonvisible:false,
}
this.minus =this.minus.bind(this);
this.add =this.add.bind(this);
this.minusbreak =this.minusbreak.bind(this);
this.addbreak =this.addbreak.bind(this);
this.startTimer = this.startTimer.bind(this);
this.pauseTimer = this.pauseTimer.bind(this);
this.resumeTimer = this.resumeTimer.bind(this);
this.stopTimer = this.stopTimer.bind(this);
this.reduceTimer = this.reduceTimer.bind(this);
}
add(){
this.setState({
baseTime:this.state.baseTime+1
});
}
minus(){
this.setState({
baseTime:this.state.baseTime-1
});
}
addbreak(){
this.setState({
breakTime:this.state.breakTime+1
});
}
minusbreak(){
this.setState({
breakTime:this.state.breakTime-1
});
}
startTimer(){
this.setState({
timer: setInterval(this.reduceTimer, 1000),
startbuttonvisible:false,
pausebuttonvisible:true,
stopbuttonvisible:true,
});
}
pauseTimer(){
clearInterval(this.state.timer);
this.setState({
pausebuttonvisible:false,
resumebuttonvisible:true,
});
}
resumeTimer(){
this.setState({
timer: setInterval(this.reduceTimer, 1000),
startbuttonvisible:false,
pausebuttonvisible:true,
stopbuttonvisible:true,
resumebuttonvisible:false,
});
}
stopTimer(){
clearInterval(this.state.timer);
this.setState({
baseTime:25,
timer: null,
startbuttonvisible:true,
pausebuttonvisible:false,
stopbuttonvisible:false,
resumebuttonvisible:false,
});
}
reduceTimer(){
if(this.state.baseTime === 0) return;
const newTime = this.state.baseTime - 1;
this.setState({
baseTime: newTime,
});
}
render() {
return (
<div className="container">
<div className="timebox">
<div className="header">
Pomodoro Clock
</div>
<TimerDisplay currentTime={this.state.baseTime} breakTime={this.state.breakTime}/>
<div id="action-title">
<small>SETTINGS</small>
</div>
<div className="actions">
<SetTimer minus={this.minus} add={this.add}/>
<SetBreak minusbreak={this.minusbreak} addbreak={this.addbreak}/>
</div>
<div className="timer-control">
{this.state.startbuttonvisible ? <button id="start-timer" onClick={this.startTimer}>
START
</button> : null}
{this.state.pausebuttonvisible ? <button id="pause-timer" onClick={this.pauseTimer}>
PAUSE
</button>: null}
{this.state.resumebuttonvisible ? <button id="resume-timer" onClick={this.resumeTimer}>
RESUME
</button>: null}
{this.state.stopbuttonvisible ? <button id="stop-timer" onClick={this.stopTimer}>
STOP
</button>: null}
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
</body>
</html>【讨论】：
import React from 'react'代码吗？我仍然没有在浏览器上得到任何东西，同样的错误。
'text/babel'，并且在文件内部使用ReactDOM.render 而不是React.render，并将promocode.js 的此脚本放在正文中的 之后，而不是头部，因为那会做出反应部分将在根目录中呈现，如果您在该 div 之前定义脚本，它将抛出错误目标元素未找到。
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ runScripts @ babel.js:60934 transformScriptTags @ babel.js:324 babel.js:60827 XMLHttpRequest cannot load file:///C:/Users/admin/Desktop/test/pomodoro.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.