2017-11-19 6 views
1

Plunker를 사용하여 나의 React Example을 생성하고 있습니다.Plunker Uncaught ReferenceError : React가 정의되지 않았습니다.

반응 라이브러리는 Plunker에서 제공하는 "찾기 및 외부 라이브러리"에 포함되어 있습니다.

https://plnkr.co/edit/U3soXYgU2ek8j2IA22WE?p=preview

index.html을는

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/cjs/react.development.js"></script> 
    <script data-require="[email protected]*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/cjs/react-dom.development.js"></script> 
    <script data-require="[email protected]*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> 
    <script data-require="[email protected]*" data-semver="0.13.1" src="cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
    <div id="app"></div> 
    <script src="script.js"></script> 
    </body> 

</html> 

script.jsx 콘솔에서

class App extends React.Component { 
    render(){ 
    return (<h1>Hello World!</h1>) 
    } 
} 

ReactDOM.render(
    <App/>, 
    document.getElementById("app") 
); 

, 그것은 아래 예외를 발생

0,123,052,532,

그러나이 예제는 unpkg.com에서 제공 한 것과 같은 다른 반응 라이브러리를 시도한 경우 작동합니다.

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> 
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> 
+0

그런 다음 어떻게 모듈을 가져올 수 있습니까? 'react'에서 React를 가져올 수 있습니까? –

+0

가져 오기 '반응'에서 반응합니다. 또한 예외를 throw합니다. 필요가 정의되지 않았습니다. –

+1

React v16 라이브러리가 제대로 작동하지 않았습니다. 이 작업은 Troglo

답변

0

코드에 type="text/jsx"가 없습니다. type="text/jsx"을 스크립트에 <script type="text/jsx" src="script.jsx"></script>으로 추가하고 시도하십시오. 그리고 개발을 위해 umd 빌드를 사용하십시오.

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.development.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.development.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
    <div id="app"></div> 
    <script type="text/jsx" src="script.jsx"></script> 
    </body> 

</html> 

CJS (commonjs2) 아래의 작업 코드를 참조하십시오 사용자가 build tool에서이 형식을 사용, 그것은 번들 파일에서 node_modules 폴더에있는 모든 모듈을 제외합니다.

umd : 사용자는이 형식 directly in browser을 사용하며 모든 타사 패키지가 번들로 제공됩니다.

+0

귀하의 제안에 따라 테스트되었습니다. 여전히 "Uncaught ReferenceError : 프로세스가 정의되지 않았습니다." " –

+0

@BenCheng - 업데이트 된 답변을 참조하십시오. 희망이 당신을 도울 것입니다! –

+0

전에 예외가 있습니다. –

관련 문제