다른 JSX 파일에서 JSX 파일 가져 오기

저는 React에서 매우 초보자입니다. JSX 파일에 일반 React Component를 만든 다음 다른 JSX 파일로 가져 오려고합니다. 그러나 가져올 때 다음 오류가 반환됩니다 ReferenceError: require is not defined.다른 JSX 파일에서 JSX 파일 가져 오기

이 내 일반 객체입니다

class Footer extends React.Component{ 
    render(){ 
     return (
      <div>Footer</div> 
     ); 
    } 
} 
export default Footer;

그리고 이것은 다른 JSX 파일입니다

import Footer from './generalPageFooter.jsx'; 
const contentNode = document.getElementById('div-content'); 
class AdminPanel extends React.Component{ 
    render(){ 
     return (
      <div> 
       <h3>Sample Text</h3> 
      </div> 
     ); 
    } 
} 
class AdminPage extends React.Component{ 
    render(){ 
     return (
      <div> 
       <h3>Sample Text</h3> 
      </div> 
     ); 
    } 
} 
ReactDOM.render(<AdminPage />, contentNode);

되는 HTML 코드를 파일에 다음입니다 :

<body> 
    <div id="div-content"> 
    </div> 
    <script type="text/babel" src="/adminPage.jsx"></script> 
</body>

출처

2017-12-21 Guilherme Resende

오류가 발생한 행은 무엇입니까? 코드에 포함되어 있습니까? – theJuls

파일에 어딘가에 require를 사용하면 문제가 될 수 있습니다. ES6을 사용하는 경우 import를 사용하십시오. – theJuls

당신 브라우저에서 ES6/JSX를 직접 실행할 수 없습니다. 그들은 "순수한"JS로 옮겨 져서 브라우저가 이해하고 실행할 수 있어야합니다.

Babel을 살펴보십시오.

P/S : React로 시작하는 경우 Facebook에서 create-react-app을 제안합니다.

출처

2017-12-21 03:40:48 haitran

Babel 형식을 사용하여 'webpack'을 살펴보고이 도구는 사용자에게 반응하는 신입니다. –

다른 JSX 파일에서 JSX 파일 가져 오기

답변

관련 문제