How To Load Es6, React, Babel Code In Html With Cdn?
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 fi
Solution 1:
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:
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="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><divid="root"></div><scripttype="text/babel"src="pomodoro.js"></script></body>2- Use ReactDOM.render instead of React.render.
Check the working code:
<html><head><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script><scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script></head><body><divid='root'></div><scripttype='text/babel'>classSetTimerextendsReact.Component{
render(){
return (
<divclassName="set-timer">work <br/> session
<divclassName="minus-add"><buttonclassName="setting-button"id="minus-timer"onClick={this.props.minus}>-</button><buttonclassName="setting-button"id="add-timer"onClick={this.props.add}>+</button></div></div>
);
}
}
classSetBreakextendsReact.Component{
render(){
return (
<divclassName="set-break"> break<br/> session
<divclassName="minus-add"><buttonclassName="setting-button"id="minus-break"onClick={this.props.minusbreak}>-</button><buttonclassName="setting-button"id="add-break"onClick={this.props.addbreak}>+</button></div></div>
);
}
}
constleftPad = (time)=>{
return (time<10)? '0'+time :time
}
constTimerDisplay = (props) => (
<divclassName="timer-display"><spanclassName="worklabel">Work session time</span><br/>
{props.currentTime}
<divclassName="breaktime"><spanclassName="breaklabel">break session time</span><br/>{props.breakTime}</div></div>
);
// let baseTime= 25;classAppextendsReact.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 (
<divclassName="container"><divclassName="timebox"><divclassName="header">
Pomodoro Clock
</div><TimerDisplaycurrentTime={this.state.baseTime}breakTime={this.state.breakTime}/><divid="action-title"><small>SETTINGS</small></div><divclassName="actions"><SetTimerminus={this.minus}add={this.add}/><SetBreakminusbreak={this.minusbreak}addbreak={this.addbreak}/></div><divclassName="timer-control">
{this.state.startbuttonvisible ? <buttonid="start-timer"onClick={this.startTimer}>
START
</button> : null}
{this.state.pausebuttonvisible ? <buttonid="pause-timer"onClick={this.pauseTimer}>
PAUSE
</button>: null}
{this.state.resumebuttonvisible ? <buttonid="resume-timer"onClick={this.resumeTimer}>
RESUME
</button>: null}
{this.state.stopbuttonvisible ? <buttonid="stop-timer"onClick={this.stopTimer}>
STOP
</button>: null}
</div></div></div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script></body></html>Solution 2:
Here's a simpler example for the minimalists in the room:
<!DOCTYPE html><html><head><metacharset='UTF-8'><title>Minimal Static React</title><scriptsrc='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script><scriptsrc='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script><scriptsrc='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script></head><body><divid='root'></div><scripttype='text/babel'>classAppextendsReact.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><divonClick={this.increase}>+</div><divonClick={this.decrease}>-</div></div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
</script></body></html>Solution 3:
<head><title>Beginner's Guide to React</title><metacharset="UTF-8" /></head><body><divid="root"></div><scriptsrc="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script><scriptsrc="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"></script><scriptsrc="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script><scripttype="text/babel">const rootElement = document.getElementById('root');
const element = React.createElement('div',{className:''},'Hello World' );
ReactDOM.render(element, rootElement);
</script>Solution 4:
You have to provide appropriate scripts to support React and ES6+, mentioned below:
- React and ReactDOM which can be copied from official website on page "CDN Links" https://reactjs.org/docs/cdn-links.html
- Babel Standalone converts ECMAScript 2015+ into compatible version of JavaScript for your browser, CDN usage is described in official documentation, check babel standalone section: https://babeljs.io/docs/en/next/babel-standalone.html
Finally let's summarize mentioned above with simple .html example
<html><head><!-- https://reactjs.org/docs/cdn-links.html --><scriptcrossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!-- https://babeljs.io/docs/en/next/babel-standalone.html --><scriptsrc="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><divid="react-container"></div><scripttype="text/babel">constApp = () => <div>Hello!</div>ReactDOM.render(
<App />, document.getElementById('react-container'))
</script></body></html>
Post a Comment for "How To Load Es6, React, Babel Code In Html With Cdn?"