Reputation: 20856
I get the following error while executing this piece of code -
Unreachable code after return statement.
<!DOCTYPE html>
<html>
<head>
<title>React Components</title>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel">
var MyComponent = React.createClass({
render: function(){ return
<div>MyComponent</div>; }
});
React.render(<MyComponent/> ,document.getElementById('react-container'));
</script>
</body>
</html>
Upvotes: 2
Views: 4563
Reputation: 5703
The problem was probably you are using newer version of babel(versions which comes after 6). Because i faced the same problem like you.Try using a version which is older like as follows,
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
Upvotes: 1
Reputation: 8125
JSX cannot be interpreted by browsers so you cannot do things like return <div>MyComponent</div>
directly in an HTML page that you intend to render on a browser like this. You will need to transpile the JSX into ES5 using Babel before gicing it to the browser to interpret.
Upvotes: 0