Warum wird meine ReactJS-Seite nicht geladen?

Ich möchte eine Praxis-Web-App mit ReactJS erstellen, aber ich kann nicht einmal diesen einfachen Test laden, um zu sehen, ob die Dinge funktionieren, so kann ich weitergehen & die App erstellen.Warum wird meine ReactJS-Seite nicht geladen?

Hier ist die index.html Datei:

<!DOCTYPE html> 
<html> 

    <head> 
    <title>My website</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script type="text/babel" src="index.js"></script> 
    </head> 

    <body> 
    <div id="example"></div> 
    </body> 

</html>

Hier ist die index.js Datei:

ReactDOM.render(<h1>Testing.</h1>, document.getElementById('example'));

Bearbeiten Titel:

Hier ist die index.html Datei:

<!DOCTYPE html> 
<html> 

    <head> 
    <title>My website</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <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://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script> 
    </head> 

    <body> 
    <div id="example"></div> 
    <script type="text/babel" src="index.js"></script> 
    </body> 

</html>

Hier ist die index.js Datei:

ReactDOM.render(<h1>hiii</h1>, document.getElementById('example'));

Quelle

2017-01-24 chompy

Welche Fehlermeldungen erhalten Sie? irgendwelche auf der Seite oder in der Konsole? einschließlich dieser wird Ihnen normalerweise helfen, eine Antwort schneller zu bekommen – Jayce444

Ihr Code funktioniert, aber ich denke, Sie laden nicht richtig. Wie öffnest du deine Bewerbung? Öffnen Sie gerade die HTML-Datei? Sieht Ihre URL wie file:///path-to-your-html-file.html aus?

Dateipfad funktionierte nicht für mich; Ich würde Ihnen daher empfehlen, einen Webserver zu verwenden, um Ihre Dateien zu verwalten. Eine einfache Möglichkeit, dies zu verwalten, ist die Ausführung von NodeJS http-server. Führen Sie einfach npm install -g http-server. Wechseln Sie dann zu Ihrem Anwendungsverzeichnis im Terminal und führen Sie http-server aus.

Quelle

2017-01-24 09:09:50 Gasim

Danke, es funktioniert! Ich benutzte zuerst die Sublime IDE und es funktioniert gut. Aber dann entschied ich mich, auf die Atom IDE umzusteigen. Als ich zur Atom IDE wechselte, hörte es auf zu arbeiten. Wie kann das sein? – chompy

Überprüfen Sie die Fehlerausgabe. Ich habe deine App in Atom getestet und es hat gut funktioniert. Um ehrlich zu sein, wenn ich du wäre, hätte ich gelernt, wie man es mit Webpack einrichten kann. Viel einfacher IMO zu pflegen. – Gasim

Versuchen Sie das Skript für index.js nach Ihrem Beispiel div in Körper setzen!

Quelle

2017-01-24 02:11:26

Ich tat, es hat nicht funktioniert :( – chompy

Erhalten Sie irgendwelche Fehlermeldungen? –

Nein, keine Fehlermeldungen. – chompy

Wie/u/Peter Qiu sagte, Sie müssen <script type="text/babel" src="index.js"></script> nach dem <div id="example"></div> Element platzieren, damit es funktioniert.

Sie werden auch in der babel Transpiler, um für Ihre babel Code im Browser arbeiten müssen hinzufügen:

https://github.com/babel/babel/tree/master/packages/babel-core

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>

Sie können es im Kopfbereich hinzufügen nach Ihren Reagieren/Reagieren-dom Abhängigkeiten.

Um die reaktive App korrekt auszuführen, müssen Sie die Datei index.html über einen statischen Server ausführen. Hier ist ein einfaches zu beginnen mit:

https://www.npmjs.com/package/http-server

Öffnen der Datei index.html in Ihrem Browser (durch Doppelklick) wird wieder ein Cross-Origin-Anforderungsfehler.

Quelle

2017-01-24 02:16:53 dommmm

Ich habe versucht, es funktioniert nicht. Ich werde posten was ich in meinem ursprünglichen Beitrag getan habe. – chompy

bearbeiten gepostet, überprüfen Sie es. – chompy

das ist seltsam. Ich habe es auf meinem Computer versucht und es funktioniert gut. Kann ich wissen, welche Ordnerstruktur Sie für Ihr Projekt verwenden? Ist der 'Index. js' Datei im selben Verzeichnis wie 'index.html'? – dommmm

Warum wird meine ReactJS-Seite nicht geladen?

Antwort

Verwandte Themen