Before i start the question, here is what i already know to avoid answers along the same lines.
TL;DR: I already know I can use a webserver and serve the index.html as http://localhost:8081/index.html and it will work.
Now for the question details:
I have created a minimal react-js app, referencing babel-standalone in the index.html file as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minimal</title>
</head>
<body>
<div id='divRootComponent'></div>
<!-- react reasonably latest for oct/2018 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<!-- babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- react CUSTOM component.. i.e. myApp's entry point -->
<script type="text/babel" src="index.js"></script>
</body>
</html>
and the index.js contents are:
class YoSupComponent extends React.Component {
constructor () {
super();
this.state = {
message: 'whatever...'
};
}
componentDidMount() {
console.log('YoSupComponent.componentDidMount');
}
render () {
return (
<div>
Yo ! Dude or Dudette... sup ?
</div>
);
}
}
const props = {}; //none for now...
ReactDOM.render(<YoSupComponent {...props} />
, document.getElementById('divRootComponent'))
When I tried to access the index.html file in the Browser via file:///path/to/index.html, the error is:
Access to XMLHttpRequest at 'file:///D:/path/to/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. @ babel.min.js:24
So thinking the problem is related to the script tags referencing files remotely, I download react and babel locally, and make references local; then again I access file:///path/to/index.html.
Still get the same error ! whats going on? a) why does babel even use XMLHttpRequest (as per the error message) when the babel.js file is now local ? b) why no such message for react files ?
