Führen Sie einfach reagieren js im Browser lokal

-1

Ich bin neu zu reagieren, und ich versuche nur eine einfache Antwort js-Datei in meinem Browser zu laufen. Aber ich bin nicht in der Lage zuFühren Sie einfach reagieren js im Browser lokal

Bitte beachten Sie, dass ich nicht erstellen-react-app möchte ich es nur auf meinem lokalen System versuchen.

Ich habe folgende

in meinem /Users/me/reactwork, habe ich 2 Dateien clock.html und clock.js
dann in Chrome-Browser, ich eingeben /Users/me/reactwork/clock.html. Ich erwarte, meine Uhr zu sehen, aber ich nicht

Was mache ich falsch?

Ich bin sehr neu zu js und reagieren, fing gerade an zu lesen, also bitte geben Sie mir Schritt für Schritt Anweisungen.

Hier sind meine Dateien

clock.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello World</title> 
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> 
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
    </head> 
    <body> 
    <div id="root"></div> 
    <script type="text/babel" src="clock.js"> 

    </script> 
    </body> 
</html>

clock.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

function tick() { 
    const element = (
     <div> 
      <h1>Hello, world!</h1> 
      <h2>It is {new Date().toLocaleTimeString()}.</h2> 
     </div> 
    ); 

    ReactDOM.render(
     element, 
     document.getElementById('root') 
    ); 
} 

setInterval(tick, 1000);

Chrome Developer Tools zeigt dieser Fehler

Failed to load file:///Users/me/reactwork/clock.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

ich diesen Fehler reasearched und fand, dass ich Server brauchen, damit ich von der Stelle Befehl folgenden ausgegeben, in denen meine HTML und JS-Dateien sind

python -m SimpleHTTPServer

dies einen Server auf Port 8000 beginnt, dann ging ich in Chrome und tippte

http://localhost:8000/clock.html

, aber dies zeigt Fehler in Chrome Dev-tools

clock.js:1 Uncaught ReferenceError: require is not defined 
    at <anonymous>:3:14 
    at n (https://unpkg.com/[email protected]/babel.min.js:12:27049) 
    at r (https://unpkg.com/[email protected]/babel.min.js:12:27558) 
    at e.src.i.(anonymous function).error (https://unpkg.com/[email protected]/babel.min.js:12:27873) 
    at XMLHttpRequest.i.onreadystatechange (https://unpkg.com/[email protected]/babel.min.js:12:27316)

UPDATE Ich habe es aufgegeben zu versuchen, es funktionieren zu lassen, wie react Seite auf diesem Link vorschlägt, es auf eigene Faust zu versuchen, die "Try React" verwenden und meinen eigenen Texteditor (https://reactjs.org/docs/installation.html) verwenden. Das hat nicht funktioniert, wie ich oben in meinem Beitrag erklärt habe.

Obwohl ich wünschte, ich könnte es auf diese Weise funktionieren, war ich nicht in der Lage, so habe ich dann beschlossen, es als "Create New App" Registerkarte Abschnitt, dann modifizierte index.js Datei, um den Code, den ich hatte meine clock.js-Datei wie oben beschrieben. Das hat funktioniert.

Quelle

2017-09-30 pixel

Zumindest müssen Sie React (und ReactDOM) in clock.html laden. Einige Anweisungen sind in der React installation docs verfügbar.

Wenn Sie schnell loslegen möchten, ist es möglicherweise einfacher, create-react-app zu verwenden.Sie müssen nur node + npm installieren und dann die wenige Befehle in dem create-reagieren-App Readme aufgeführt laufen:

npm install -g create-react-app 

create-react-app my-app 
cd my-app/ 
npm start

, dass ein einfaches „Hallo Welt“ app erstellen und sie in Ihrem Browser öffnen. Dann können Sie Änderungen daran vornehmen und die Aktualisierung im Browser in Echtzeit sehen.

Quelle

2017-09-30 20:17:34

Ich aktualisierte meine HTML-Datei wie oben. Was ich jetzt vermisse? Danke – pixel

Danke Mann, ich gab es auf, es auf eigene Faust zu tun, ging stattdessen diesen Weg und bearbeitet erstellt index.js Datei, um meine Uhr anzuzeigen. Das funktionierte – pixel

Zuerst hat Ihre HTML-Datei eine falsche Syntax. head Tag wird für nicht visuelle Elemente verwendet. Sie müssen das h1 Tag innerhalb eines body Tags hinzufügen. Wenn Ihr HTML-Wissen nicht so gut ist, schlage ich vor, dass Sie sich mit HTML und Javascript vertraut machen, bevor Sie in React eintauchen.

Das zweite Problem ist, dass Sie erforderliche Reagieren Skripts in Ihrem HTML fehlen. Sie müssen der Datei react und erforderliche JavaScript-Bibliotheken hinzufügen, bevor Sie react verwenden. Sie können weitere Informationen darüber finden here

Das dritte Problem, das ich sehen kann, ist, dass Sie ein Tag mit ID root in Ihrem HTML-Code fehlt. Linie mit document.getElementById('root') versuchen, ein Element mit der id Wurzel in Ihrem HTML zu finden, um reagierendes Element innerhalb zu machen.

Ich empfehle Ihnen zu überprüfen, W3Schools für schnelle und einfache Möglichkeit, grundlegende HTML und Javascript zu lernen, wenn Sie nicht vertraut sind. Danach können Sie React mit der offiziellen Tool Create-React-App lernen. Dies hilft Ihnen, die Projektstruktur zu verstehen und wie die Dinge besser funktionieren.

Quelle

2017-09-30 20:42:14 bennygenel

Ich aktualisierte meine HTML-Datei wie oben, aber ich sehe noch keine Ausgabe? Danke – pixel

Quelle Ihres Skripts ist am falschen Ort für den Anfang. Es sollte '' – bennygenel

Ich habe es verschoben und aktualisiert wie oben, aber immer noch keine Ausgabe sehen? Danke – pixel

Führen Sie einfach reagieren js im Browser lokal

Antwort

Verwandte Themen