Menu
I'm learning ReactJS and trying to run the code at https://raw.githubusercontent.com/kirupa/kirupa/master/reactjs/helloworld_batman.htm (this is from the instructions at https://www.kirupa.com/react/building_your_first_react_app.htm).
Using Chrome, "Batman" is never displayed and Chrome developer tools logs the following error:
Access to script at 'https://unpkg.com/[email protected]/umd/react-dom.development.js' (redirected from 'https://unpkg.com/react-dom@16/umd/react-dom.development.js') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Sure enough, when requesting react-dom.development.js directly the Network tab reveals that the header is missing.
Other items of note:
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React! React! React!</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 {
font-size: 144px;
font-family: sans-serif;
color: #0080a8;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(React.createElement(
"h1",
null,
"Batman"
), destination);
</script>
</body>
</html>
860
react-dom : ReactDOM.render has been deprecated. Using it will warn and run your app in React 17 mode.
unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like: unpkg.com/:package@:version/:file.
React will assign the current property with the DOM element when the component mounts, and assign it back to null when it unmounts. ref updates happen before componentDidMount or componentDidUpdate lifecycle methods.
DOM: DOM stands for 'Document Object Model'. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app. DOM represents the entire UI of your application. The DOM is represented as a tree data structure.
It turns out if I take out "crossorigin" then it works in Chrome!
There's a discussion of this at With <script crossorigin='anonymous'>, why is a script "blocked by CORS policy"?
83
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
