Menu
Trying to learn React.js right now but I'm having a lot of trouble with syntax errors. It is not clear to me how to debug JSX when writing react.js code. A typical JSX syntax error will look like this on my console:
"Line 15" does not appear to correspond to any actual code. In my IDE it's a blank line right before my <script> tag. Expanding the error simply shows a couple dozen references to JSXTransformer.js.
When I google this issue, everyone says to simple install the React debugger, which I did, but it is useless when it comes to JSX syntax and won't actually start:
Others have suggested using debugger; calls in my scripts to call the Chrome debugger, which is sensible, but the JSX error somehow halts the script no matter where I put the call.
919
You can view this source code under source tab in browser developer tools. (If you are using chrome/firefox then in source tab you can press Ctrl + P to quickly search for the file you want to debug/analyze.)
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.
Set a breakpointOpen DevTools and go to the Sources tab. Press Command + P (Mac) Ctrl + P (Windows / Linux) to open the file with the component you want to debug. Pick the place in your code which you are interested in, and click on the line number to set a breakpoint.
React has significant trouble with identifying the offensive lines, it's very likely the one before, in your case line 14.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
