Menu
I have Codepen code that I'm trying to replicate on an web page using just three files, index.html, main.js, and style.css. I tried loading these scripts on the head tag of HTML file.
<script src="https://npmcdn.com/[email protected]/dist/btib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
However, it's not working. All I get is this error
Uncaught SyntaxError: Unexpected token <
what are necessary CDN script files to load this react-code to HTML?
767
Both React and ReactDOM are available over a CDN.
You just need to load the “babel-standalone” in your script as highlighted below and write the script you want to transpile, in script tag with type “text/babel” or “text/jsx”. Babel will automatically compile and execute the script. Let us create an example html file with ES6 to see how it works.
BabelJS - CLI Babel comes with a built-in command line interface, which can be used to compile the code. Create a directory wherein you would be working. Here, we have created directory called babelproject. Let us make use of nodejs to create the project details.
You need to use babel standalone script to transcompile the code, and you need to include the script for react and react-dom, use these it will work:
<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>
Reason why it is working with codepen: check the setting/javascript, there you will find the babel is selected as JavaScript Preprocessor, codepen is including the script automatically, but to run these files locally you need to include the standalone script.
Update:
1- You need to define the script after the div in which you are rendering the react code, otherwise it will throw the error. like this:
<body>
<div id="root"></div>
<script type="text/babel" src="pomodoro.js"></script>
</body>
2- Use ReactDOM.render instead of React.render.
Check the working code:
<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>Here's a simpler example for the minimalists in the room:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Minimal Static React</title>
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
