반응 파일을 가져 오는 방법

저는 JavaScript와 React.js를 처음 사용하며 가져 오기에 문제가 있습니다.반응 파일을 가져 오는 방법

나는 다음하는 index.js 파일이 있습니다

이

var Main = React.createClass ({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 


ReactDOM.render(
    <Main/>, 
    document.getElementById('content') 
);

다음 pub.js 파일 :

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

pub.js 파일과하는 index.js 파일이 동일에 포함됩니다 폴더 ->/scripts. 또한 다음과 같은 index.html 파일이 있습니다

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Application</title> 
    <!-- Not present in the tutorial. Just for basic styling. --> 
    <link rel="stylesheet" href="css/base.css" /> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/babel" src="scripts/index.js"></script> 
    </body> 
</html>

이, 즉 완벽하게 잘 작동이 '시험'

을 읽는 페이지를로드하지만 단순히 아래 (심지어 그것을 사용하지 않고) 펍 클래스를 가져 오는 경우 , 응용 프로그램이 중단되고 화면에 아무 것도 렌더링되지 않습니다.

ReactDOM.render(
    <Pub/>, 
    document.getElementById('content') 
);

사람이 더 나은 경우에도이 문제에 도움이 되거, 또는 수 있다면, 점 :

import Pub from './pub' 

var Main = React.createClass ({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 


ReactDOM.render(
    <Main/>, 
    document.getElementById('content') 
);

또한, 경우에 오류가 사용되지 않은 수입에 의해 발생, 나는 또한 다음을 시도했습니다 나를 구문 분석 React.js 코드에 대한 좋은 도구를 향해 나는 그것을 고맙게 생각합니다.

출처

2017-01-20 John Devitt

수입이 가져올 뭔가가 필요 (그렇지 않으면, 당신은 점점 정확한 오류를 제공하는) 당신을 위해 작동하는 경우

확인 웹팩/browserify/rollup – azium

https://github.com/facebookincubator/create-react-app 꽤 괜찮아요 및 실행 기지 webpack을 배우고 싶지 않다면 –

또한 - https://reactforbeginners.com/ 기본 사항을 배우는 훌륭한 자료입니다 (나중에 고급 자료도 포함). –

내 코드 작성/이동/서비스를 위해 웹팩을 사용하고 있습니다.

은 내가 샘플을 시도하고 그러한 설정에서 작동합니다

import React from 'react'; 

class Pub extends React.Component { 
    render() { 
     return <div>ĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄ</div>; 
    } 
} 

export default Pub;

그때 내가 같은 다른 구성 요소에 펍 구성 요소를 수입 : 내가 Pub.jsx 구성 요소를 생성하고 같은 방법으로 수출

디렉토리와 올바르게 렌더링 : https://www.screencast.com/t/Ojwrq3KNE

0 : 브라우저에서

import React from 'react'; 

import Pub from './Pub'; 

class ExplorableList extends React.Component { 
    render() { 
     return (<Pub />); 
    } 
} 

export default ExplorableList;

렌더링 결과

내 폴더 구조 : https://www.screencast.com/t/9Mi8LLdnv 당신이 좋아하는의 브라우저에서 작동하지 않습니다

출처

2017-01-20 17:31:15

반응 파일을 가져 오는 방법

답변

관련 문제