Menu
Hi There I am new to react, I am trying to run this trivial snippet but it's not working:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script type="text/babel">
var Hello = React.createClass({
render: function() {
return(
<div>Hello World!</div>
);
}
});
ReactDOM.render(<Hello />, document.getElementById("app_root"));
</script>
</body>console do not show any error messages and I do not get any output after running the script
613
As alluded to in the other answers, it's because JSX needs babel. In your case it is simply a matter of including babel and not just the browser-polyfill:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script type="text/babel">
var Hello = React.createClass({
render: function() {
return(
<div>Hello World!</div>
);
}
});
ReactDOM.render(<Hello />, document.getElementById("app_root"));
</script>
</body>If you do not want to use JSX, Babel ... you have to replace the JSX definition <Hello /> by React.createElement(Hello, null, null)
I did not test the following code but in my eyes this should be correct:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script>
var Hello = React.createClass({
render: function() {
return React.createElement('div', null, `Hello World`);
}
});
ReactDOM.render(React.createElement(Hello, null, null),
document.getElementById("app_root"));
</script>
</body>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