Inflearn Community Q&A
asked
시작부터 안됩니다.
Written on
·
352
1
codepen.io에서 Add External Scripts/Pens 에서
react로 검색해서 https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js
이거랑 https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js
이렇게 두가지가 나오고 save and close도 아니고 close만 있구요 close만 해도 상태는 유 지되는건지 모르겠네요 ..그래서인지 몰라도 코드넣고 실행해보면 에러납니다.
class CodeLab extends React.Component {
render() {
return (
<div>CodeLab</div>
);
}
}
class App extends React.Component {
render() {
return (
<CodeLab />
);
}
}
ReactDOM.render(<App />, document.getElementById('root'))
Uncaught ReferenceError: React is not defined 에러나고 그래서 강좌에 없는
import React from 'react' 넣고 나면
Uncaught ReferenceError: require is not defined 이 에러가 납니다. 도무지 진행이 안되네요 ㅠ
Uncaught ReferenceError: React is not defined
Uncaught ReferenceError: React is not defined
Answer 2
0
코드펜이 제공하는 cdn이 버전이 너무 최신이라서 그런 오류가 나는 것 같더라고요!
여기 들어가셔서 react 랑 react-dom cdn 링크 복사한 다음에 setting>js>Add External Scripts/Pens 에 복붙하면 됩니다!
정리하자면
https://unpkg.com/react@18/umd/react.development.jshttps://unpkg.com/react-dom@18/umd/react-dom.development.js이거 두 개 setting>js>Add External Scripts/Pens 여기에 붙여 넣어 주세요
0
안녕하세요, 인프런 AI 인턴입니다.
odark님의 문제를 해결하기 위해 몇 가지 제안드립니다.
먼저, CodePen에서 외부 스크립트를 추가한 후에는 CodePen이 자동으로 React와 ReactDOM을 전역 변수로 설정합니다. 그럼에도 불구하고 “React is not defined” 오류가 발생한다면, 스크립트가 제대로 로드되지 않았을 가능성이 높습니다.
- CodePen 설정에서 React와 ReactDOM의 URL이 정확한지 다시 확인해 주세요.
- CodePen이 제공하는 React 템플릿을 사용할 수 있습니다. CodePen 홈페이지에서 ‘Templates’를 검색하여 ‘React’ 템플릿을 찾아 사용할 수 있습니다. 이 방법을 사용하면 직접 URL을 추가할 필요가 없습니다.
import React from 'react'와 같은 모듈 import 구문은 CodePen과 같은 브라우저 환경에서는 작동하지 않습니다. 이 구문들은 보통 Create React App과 같은 개발 환경에서 사용됩니다. 따라서 이러한 코드는 CodePen에서 제거해야 합니다.
문제가 지속될 경우, CodePen이 아닌 로컬 개발 환경에서 Create React App을 이용하여 React 프로젝트를 시작하는 것을 고려해 보시는 것도 좋은 방법입니다. Create React App은 모듈 시스템을 올바르게 설정하고 관리해줍니다.
참고로, CodePen에서 일반적으로 React 코드를 실행하기 위해서는 React와 ReactDOM 링크를 추가한 뒤 직접 React 코드를 작성하기만 하면 됩니다. “require”나 “import” 같은 Node.js의 모듈 시스템은 CodePen에서 지원하지 않습니다.
도움이 되었길 바라며, 추가 질문이 있으시다면 또 문의주세요.