리액트에 적용시 html을 브라우저로 어떻게 열어야 할까요..?
1298
작성한 질문수 2
실전 리액트 프로그래밍 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 "../".
답변 2
1
안녕하세요
브라우저가 `import React from 'react';` 부분에서 react 파일을 가져오다가 실패하는 메시지 입니다
`<script type="module" ...` 이런 식으로 작성하셨는데요
이렇게 브라우저에서 모듈 방식으로 동작하게 하려면 경로 처리를 다른 방식으로 해야합니다
(지금처럼 절대 경로말고 상대 경로로 수정 필요)
이런 방식으로 하시는 것보다는 책에서처럼 create-react-app 이나 next.js 를 사용하실 것을 추천드립니다.
lodash 가 안될때
0
90
1
에궁 처음부터 막히네요...ㅜㅜ
0
76
1
[함수타입2] 함수 this에 대한 타입 부분, 제가 제대로 이해했을까요?
0
265
1
객체 할당 관련 질문 있습니다.
0
326
1
퀴즈 관련 질문이 있습니다.
0
343
1
공변성 강의
0
255
2
시간 4:31 인터페이스 타입가드에 대해
0
231
1
리턴값이 연산인 제네릭 에러 해결
0
428
2
code runner 사용 시 output이 깨지는 문제
0
2456
2
2: 38
0
196
1
5:55 내용에 대하여 질문드립니다.
0
440
2
extends에 관하여
0
293
1
return 타입
0
177
1
/bin/sh: node_modules/.bin/ts-node: No such file or directory 오류
0
363
1
Person 과 Product
0
208
1
tsc 기본이 es3
0
313
1
[#다시질문] Person과 Product 관계
0
160
1
타입스크립트 부분실행 질문드립니다
0
711
1
함수 타입2 에서 1:53
0
329
2
1:19 에서 interface String
1
272
2
안녕하세영 정리
0
166
1
this 질문
0
221
1
function add
0
177
2
타입스크립트 사용하는 이유 : 높은 생산성
0
197
2