Menu
I am having problem with react setup via CDN.
Her is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
and here my app.js:
var myItems = {
items:
["Widget","Gear","Sprocket","Spring","Crank","Lever","Hose","Tube",
"Wheel","Housing","Case"]
}
var FilteredList = React.createClass({
filterList: function (event) {
var updatedList = this.props.initialItems.items;
updatedList = updatedList.filter(function (item) {
return item.toLowerCase().search(event.target.value.toLowerCase()) !== 1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
items: []
}
},
componentWillMount: function(){
this.setState({items: this.props.initialItems.items})
},
render: function(){
return (
<div className="myList">
<input type="text" placeholder="Search" onChange={this.filterList} />
<List items={this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.items.map(function (item) {
return <li key={item}>{item}</li>;
})
}
</ul>
);
}
});
ReactDOM.render(<FilteredList initialItems={myItems} />,
document.getElementById('container'));
When run it I get the following error:
app.js:31 Uncaught SyntaxError: Unexpected token <
Any idea how to fix it?
905
The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.
How do you enable JavaScript in react JS? In the “Settings” section click on the “Show advanced settings” Under the the “Privacy” click on the “Content settings”. When the dialog window opens, look for the “JavaScript” section and select “Allow all sites to run JavaScript (recommended)”.
Even though you have added babel-standalone to your page, you still need to tell it to transpile your app.js file.
You do it by adding type="text/babel" to your script tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"> </script>
<script type="text/babel" src="js/app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Just for reference you can also transpile your code inline with:
Babel.transform(input, { presets: ['es2015'] }).code;
182
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
