Plunker Uncaught ReferenceError: Reaktion ist nicht definiert

Ich verwende Plunker, um mein Reaction-Beispiel zu erstellen.Plunker Uncaught ReferenceError: Reaktion ist nicht definiert

Die React Libraries sind in "Find and external libraries" von Plunker enthalten.

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") 
);

in der Konsole führt Sie das unten stehende Ausnahme

Uncaught ReferenceError: React is not defined 
    at VM26837 script.js:32 
(anonymous) @ script.js:32

Dieses Beispiel funktioniert jedoch, wenn ich eine andere react-Bibliothek wie die von unpkg.com bereitstellte.

<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>

Quelle

2017-11-19 Ben Cheng

Dann, wie kann ich das Modul importieren? Kann ich React von 'react' importieren? –

importieren Reagieren von 'reagieren'. Es löst auch eine Ausnahme aus. Require ist nicht definiert. –

Die React v16 libs funktionierte nicht für mich. Diese hat funktioniert: – Troglo

In Ihrem Code fehlt type="text/jsx". Fügen Sie Ihrem Skript type="text/jsx" als <script type="text/jsx" src="script.jsx"></script> hinzu und versuchen Sie es. Und verwenden Sie umd Build für die Entwicklung. Siehe den Arbeitscode unten

<!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): Benutzer dieses Format in einem build tool verwenden, schließt es alle Module in node_modules Ordner aus gebündelten Dateien.

umd: Der Benutzer verwendet dieses Format directly in browser, alle 3rd-Party-Pakete werden gebündelt.

Quelle

2017-11-19 14:55:04

Getestet mit Ihrem Vorschlag. Es wird immer noch die Ausnahme von "Uncaught ReferenceError: Prozess ist nicht definiert " –

@BenCheng - Siehe die aktualisierte Antwort. Hoffe das wird dir helfen! –

gleiche Ausnahme wie zuvor –

Plunker Uncaught ReferenceError: Reaktion ist nicht definiert

Antwort

Verwandte Themen