[React] CDNで読み込んでReactを使う際、外部ファイルにできない

CDNでHTMLに直接、Reactを読み込ませて使うことは可能なのですが
Reactのデータを外部ファイルに読み込ませて使おうとするとエラーになります。

console
1Access to XMLHttpRequest at 'file:///Users/moridaisuke/Desktop/React/js/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.
2browser.min.js:3 GET file:///Users/moridaisuke/Desktop/React/js/index.js net::ERR_FAILED

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
5    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
7  </head>
8  <body>
9    <div class="container">
10      HTML要素
11      <div id="componentA"></div>
12      <div id="componentB"></div> 
13    </div>
14
15    <script type="text/babel" src="./js/index.js"></script>
16  </body>
17</html>

js
1// js/index.js
2const ElementA = () => {
3    return (
4      <React.Fragment>
5        <h1>React要素A</h1>
6      </React.Fragment>
7    );
8}
9ReactDOM.render(<ElementA />,document.getElementById('componentA'));
10
11const ElementB = () => {
12    return <p>React要素B</p>;
13}
14ReactDOM.render(<ElementB />,document.getElementById('componentB'));