리액트에 적용시 html을 브라우저로 어떻게 열어야 할까요..?

실전 리액트 프로그래밍 481~483페이지 부분 실행관련하여 질문이 있습니다.

일단 저는 타입스크립트 동영상 강의만 본 상태고요.
리액트 동영상은 초반부, 책은 가지고있지만 타입스크립트 해당부분만 본 상황입니다.

혹시 제 질문이 책이나 동영상에 관련내용이 있다면, 그부분 적어주셔도 감사할것같습니다..

----

책에서 참고한 파일.

src/App.tsx

import React from 'react';

function App({name, age}: {name: string; age: number}) {
    return (
        <div>
            <p>{name}</p>
            <p>{age}</p>
        </div>
    )
}

export default App;

src/index.tsx

------

컴파일된 파일

/dist/App.js

import React from 'react';
function App(_a) {
    var name = _a.name, age = _a.age;
    return (React.createElement("div", null,
        React.createElement("p", null, name),
        React.createElement("p", null, age)));
}
export default App;

/dist/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(React.createElement(App, { name: "seolys", age: 32 }), document.getElementById('root'));

------

직접 수정한 파일

tsconfig.json(오류로 헤메면서 일부 수정)

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "lib": ["dom","es5","scripthost","es2017"],
    "jsx": "react",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

index.html(직접 작성)

<html>
    <head>
        <script src="react.development.js"></script>
        <script src="react-dom.development.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/dist/index.js"></script>
    </body>
</html>

실행 : 브라우저로 index.html 실행 또는 npx serve로 진행.

브라우저 콘솔 오류메시지 :

127.0.0.1/:1 Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".

인프런 커뮤니티 질문&답변