import 경로 설정에 대해 궁금합니다.

예리하게 보셨네요. 바벨 스탠드얼론을 사용하면서 여러번 시행착오를 한 결과인데요. 각 폴더의 index.html 파일을 보실까요?

바닐라 예제:

<script type="module" src="./js/main.js"></script>

type="module"로 스크립트를 로딩하면 main.js가 import 구문을 사용한다고 생각하고 모듈을 가져옵니다. 브라우져는 main.js에서 상대 주소로 import 한 모듈을 찾아 다운로드하고요.

리액트 예제(바벨 스탠드얼론):

<script
      type="text/babel"
      data-presets="react"
      data-type="module"
      src="js/main.js"
    ></script>

jsx 문법을 사용하면서 바벨 라이브러를 사용했는데요. 바벨 스탠드얼론 버전을 사용할때는 type="text/babel"로 바꿔 주어야합니다. 그리고 data-presets과 data-type 속성을 사용해서 리액트이고 모듈을 사용하는 코드라는것을 명시해 주는데요. 이렇게 하면 main.js에서 import할 때 상대 주소를 사용하면 모듈을 못찾는 현상이 생기더라고요. 그래서  절대 주소로 표기한 것입니다.