Reagieren JS in HTML

Ich bin völlig neu zu reagieren JS oder eine beliebige serverseitige Technologie. Und jetzt möchte ich lernen, wie man in React JS entwickelt.Reagieren JS in HTML

Einführung

Ich begann mit React JS tutorials auf der offiziellen Website. Jetzt versuche ich React toolbox oder jede andere Komponente von Drittanbietern in meinen JSX-Code zu importieren. Aber ich stehe vor dem Problem von uncaught exception error: require not defined.

Als ich danach suchte, lernte ich verschiedene Build-Mechanismen kennen (browserify, webpack, gulp), zu denen ich (wieder) total neu war. Nachdem ich über diese gelesen und some examples gesehen hatte, konnte ich meinen Browser kompilieren require() Anweisungen geschrieben in meine .jsx Dateien.

Problem

Was ich versuche zu tun:

eine .html Datei schreiben.
Starten Sie es über meine server.js Datei.
Fügen Sie ein <script>-Tag in es, die meinen .jsx Code in meine .html Datei injizieren wird.

Die Beispiele, die ich bisher (1, 2, und einige andere ...) laden eine .js Datei am Anfang und schreiben ihre .html Code in .jsx Dateien (render() Funktion) gesehen haben.

Frage

Ist es möglich, eine .html Datei von server.js zu laden und .jsx von einem <script> Tag in dieser .html-Datei verwenden? Etwas wie folgt aus:

<html> 
. 
. 
<body> 
    <div id="container"></div> 
    <script src="path_to_reactjs_file"></script> 
</body> 
</html>

Es tut mir leid, wenn dies wie total dumme Frage klingt, aber wegen der völlig neu in dieser Technologie zu sein, ich bin nicht in der Lage zu verstehen, wie ich vorgehen sollte.

Jede Hilfe wäre willkommen.

Quelle

2016-03-04 DroidDev

Klingt, als könnte es ein Problem mit Dateinamenerweiterungen geben, Browserify versteht nur .js und .json Erweiterungen, es sei denn, Sie sagen es anders.

$ browserify --extension jsx src/main.js > bundle.js

Babel mit den richtigen Transformationen wird dies im Rahmen seines Moduls transpilation für Sie automatisch.

$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js

Beachten Sie, dass dies Ihr Einstiegspunkt geht davon hat eine .js Dateierweiterung, wenn es .jsx Sie den Erweiterungstyp einstellen müssten.

Diese Konfiguration kann durch Hinzufügen der Config zu Ihrem package.json

{ 
    babel: { 
    presets: [ 'es2015', 'react' ] 
    } 
}, 
{ 
    browserify: { 
    transform: 'babelify' 
    } 
}

Quelle

2016-03-04 13:07:28

Kann ich '.html' Datei als Einstiegspunkt haben? Das möchte ich wirklich machen. Verwenden Sie die HTML-Datei als Einstiegspunkt und verwenden Sie dann '.jsx'-Skripte darin. – DroidDev

Nein, das macht eigentlich keinen Sinn :) Browserify und babel und andere solche Tools bereiten einfach Ihren JS für den Browser vor. Der html "hustet" die Skripte (wenn du willst), React und viele andere Bibliotheken arbeiten dann, indem sie mehr html erstellen und in das dom einspeisen. –

Oh, ok. Ich werde Ihre Antwort akzeptieren, wenn etwas in 1 oder 2 Tagen nicht angezeigt wird. Wenn du einen Link zu einem guten Tutorial hast, von dem ein Anfänger (ich) lernen kann, React zu lernen, lass es mich wissen. Seit dem, was Facebook erzählte, war es absolut nicht hilfreich für absolute Anfänger. Danke für deine Zeit :) – DroidDev

Ohne Bündelung können Sie jsx nicht direkt in HTML einfügen, aber Sie können Komponenten ohne jsx Syntax (verwenden Sie einfach js) und es wird funktionieren.

Quelle

2016-03-04 12:53:37

Eigentlich vereinfacht werden, können Sie, wenn Sie die [JSX Transformator] zusätzlich enthalten (https://facebook.github.io/react/blog /2015/06/12/deprecating-jstransform-and-react-tools.html#jsxtransformer) (oder sein Babel-Äquivalent), um Ihr Skript zu kompilieren, wenn es den Browser erreicht. Es ist sicherlich nicht für die Produktion (oder sogar Entwicklungsumgebung) empfohlen, aber es ist sinnvoll für schnelle Prototypen. –

Ich versuchte mit Babel oder JSX Transformer (durch Skript-Tag im Kopf) @MattStyles. Es funktioniert gut, bis ich alles in '.jsx' entwickle. Aber wenn ich 'require()' Anweisung oder 'import' Anweisung in das, es gibt mir Fehler (wie ich in Einführung Teil geschrieben) – DroidDev

Oh, es klingt wie ein Dateinamen Problem. Der "require" -Algorithmus von Browserify (im Grunde genommen Knoten) versteht nur '.js'- und' .json'-Dateien, Sie müssen ihm ausdrücklich sagen, dass er Dateien mit '.jsx' importieren soll, ich schreibe eine Antwort auf, wie es sich anhört könnte dein Problem sein. –

Reagieren JS in HTML

Antwort

Verwandte Themen