2015-10-06 3 views
9

Ich versuche gerade, React.js zu lernen, aber ich habe eine Menge Probleme mit Syntaxfehlern. Es ist mir nicht klar, wie ich JSX beim Schreiben von react.js code debuggen soll. Ein typischer JSX-Syntaxfehler sieht auf meiner Konsole wie folgt aus: enter image description hereGenau wie sollen Sie JSX in React.js debuggen?

"Zeile 15" scheint keinem tatsächlichen Code zu entsprechen. In meiner IDE ist es eine leere Zeile direkt vor meinem <script> Tag. Die Erweiterung des Fehlers zeigt lediglich ein paar Dutzend Verweise auf JSXTransformer.js.

Wenn ich dieses Problem google, sagt jeder einfach den Debugger Reagieren installieren, was ich auch tat, aber es ist nutzlos, wenn es um JSX Syntax kommt und wird nicht wirklich starten: enter image description here

Andere haben vorgeschlagen, mit debugger; ruft in meinen Skripts den Chrome-Debugger auf, was zwar sinnvoll ist, aber der JSX-Fehler hält das Skript irgendwie an, egal wo ich den Anruf ablege.

+2

Ohne den Code zu sehen, würde ich sagen, es ist wahrscheinlich, Zeile 15 des Script-Tages ist, dass die enthält JSX versucht es zu parsen (zB erhält der Transformer den Inhalt des Skript-Tags als Text und kompiliert ihn dann). Die Verwendung einer vollständigen Toolchain, die nicht nur im Browser funktioniert, [zB Babel + webpack] (https://github.com/BinaryMuse/react-babel-boilerplate), kann bei diesem Problem helfen. –

+1

Kompilieren Sie Ihren JSX (anstelle der von Ihnen verwendeten In-Browser-Transformation) und aktivieren Sie Quellkarten. Wenn Sie browserify/babelify verwenden, sollten Sie 'debug: true' einstellen. – akarve

Antwort

2

erhebliche Schwierigkeiten Reagieren hat mit der Offensive Linien zu identifizieren, ist es sehr wahrscheinlich derjenige vor, in Ihrem Fall der Leitung 14