[React] HTMLでCDNでReact入れた時、外部ファイルに書き出す方法が知りたい
Q&A
解決したいこと
HTMLでCDNでReact入れた時、外部ファイルに書き出す方法が知りたい
発生している問題・エラー
Access to XMLHttpRequest at 'file:///Users/moridaisuke/Desktop/React/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, chrome-untrusted, https.
browser.min.js:3 GET file:///Users/moridaisuke/Desktop/React/index.js net::ERR_FAILED
該当するソースコード
※切り離さなければ問題なくReactが導入できる
こちらのコードをそのままコピペすれば、モーダル表示できる
<!DOCTYPE html>
<html>
<head>
<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 crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/modal.css">
</head>
<body>
<div class="container">
<div id="drawer"></div>
</div>
<!-- React -->
<script type="text/babel">
// #drawer
const Drawer = () => {
const [open, setOpen] = React.useState(false);
const [close, setClose] = React.useState(false);
const openFunc = () => {
setOpen(true);
setClose(false);
}
const closeFunc = () => {
setOpen(false);
setClose(true);
}
return (
<React.Fragment>
{ !open && <div className="modal-open" onClick={openFunc}><img src="./assets/img/open.svg" alt="open" /></div> }
{ open && (
<div className="modal">
<div className="modal-form-set">
<div className="modal-head">
<div className="modal-title">Title</div>
<div className="modal-close" onClick={closeFunc}><img src="./assets/img/close.png" alt="close" /></div>
</div>
<div className="modal-contents">
Contents
</div>
</div>
</div>
)}
</React.Fragment>
);
}
ReactDOM.render(<Drawer />,document.getElementById('drawer'));
// #...
</script>
</body>
</html>
scriptの部分だけ切り離したいけどできない。
自分で試したこと
実際切り離したが上記エラーが発生。
0
