I have the following code which works fine. When I comment out the react script at the bottom and add it to the clickme.js file I get unexpected token < on the first div in the return of the render function.
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/create-react-class.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='clickme.js'></script>
<title>Click Me</title>
</head>
<body>
<div>
Count:<span id="cnt1">0</span>
<button id='btn1' type='button' style="width:60px">JS only</button>
</div>
<br>
<div>
Count:<span id="cnt2">0</span>
<button id='btn2' type='button' style="width:60px">Jquery</button>
</div>
<br>
<div id='react-example'> </div>
<script type='text/jsx'>
var btnCSS = {
width: '60px',
textAlign:'center',
padding:0,
border:0
};
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0};
}
incrementCount() {
this.setState( {count: this.state.count + 1});
}
render() {
return (
<div> Count:{this.state.count}
<button type="button" style={btnCSS}
onClick={ this.incrementCount.bind(this) }>React</button>
</div>
);
}
};
ReactDOM.render(
<Counter />,
document.getElementById('react-example')
)
</script>
</body>
</html>
and here is the clickme.js file:
document.addEventListener("DOMContentLoaded", function(event) {
var counter = Number(document.getElementById("cnt1").innerHTML);
document.getElementById("btn1").addEventListener("click", function(){
counter = counter + 1;
document.getElementById("cnt1").innerHTML=counter;
});
});
$(document).ready(function(){
var counter= Number($("#cnt2").html());
$("#btn2").click(function() {
counter = counter + 1;
$("#cnt2").html(counter);
});
});
document.addEventListener("DOMContentLoaded", function(event) {
var btnCSS = {
width: '60px',
textAlign:'center',
padding:0,
border:0
};
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0};
}
incrementCount() {
this.setState( {count: this.state.count + 1});
}
render() {
return (
<div> Count:{this.state.count}
<button type="button" style={btnCSS}
onClick={ this.incrementCount.bind(this) }>React</button>
</div>
);
} };
ReactDOM.render(
<Counter />,
document.getElementById('react-example')
)
});
