Comment by hunterb123

5 years ago

JSX is JS. Nested brackets are simply converted to nested function calls & objects, attributes convert to properties.

This is evident when comparing conditionals, loops, etc. Instead of learning template syntax you simply use JS syntax, albeit a declarative subset (no branches).

JSX is simply syntactical sugar for nested JS, you can use it without, but it's prettier with.

One could add this syntactical sugar natively to the language spec, in fact E4x (ECMAScript for XML) share some properties w/ JSX and was once proposed to the spec.

edit: instead of downvoting, please voice how you disagree with my assessment

5 comments

hunterb123

Reply
wruza  5 years ago

Jsx is not js, it’s python!

  <div className={red}>
    {text}
  </div>

  import react
  react.create_element("div", {"className":red}, text)

By the same logic we could call any structured format “is js”, because it is homomorphic to some js expressions. Are xml, pug, plist, dbf, all js? Nope, it’s all python.

cphoover  5 years ago

I agree 100%... Adding JSX to the language spec would be interesting. It might be too heavy to include within the language spec as many JS applications do not involve the DOM at all, so then you have to essentially bundle DOM functions into every application... or common.js would omit this subset of the language.

  • hunterb123  5 years ago

    It's actually a fairly small change (two new PrimaryExpressions), the spec is here:

    https://github.com/facebook/jsx

    Example parser from Acorn:

    https://github.com/acornjs/acorn-jsx/blob/master/index.js

    No part of JSX uses the DOM, it doesn't share anything with HTML.

    The JS engine itself would need the modification.

    Also JSX doesn't have to be for the UI, it could be for dialogs for an NPC in a game, for configs, etc.

    edit: I agree with @proxyon, I'm really disappointed with HN that this simple fact is downvoted without retort.

    The common sentiment here is wrong, JSX is a small extension to the grammar of JS. It is JS.

  • kall  5 years ago

    One nice thing about JSX is that it is pretty straightforward to write the function (React.createElement replacement) that it transforms to, so you can use it to construct any complex tree-like structure. No DOM stuff is needed. For example writing a JSX factory to output a static html string is maybe 20 lines of code.

  • DonHopkins  5 years ago

    Mozilla Xulrunner and Rhino (a JavaScript interpreter implemented in Java) used to support E4X: ECMAScript for XML, the ISO/IEC standard 22537:2006, and it was removed in 2014.

    >bastawhiz on Sept 4, 2014 | parent | context | un‑favorite | on: JSX: XML-like syntax extension to ECMAScript – Dra...

    >So..uh...this was a thing. And nobody wanted it. So it was deprecated and killed. See the "Prior Art" section at the bottom of the page.

    http://en.wikipedia.org/wiki/ECMAScript_for_XML

    >Brendan Eich was quoted as saying something along the lines of "E4X is crazyland". Parsing it is hard as hell to do right. Think of all the tooling that's out there for JavaScript right now that will either a.) not support JSX code or b.) bloat up beyond belief as it takes into account the suddenly absurd requirements necessary to deal with a similar-but-not-quite-XML-or-even-HTML-for-that-matter syntax. Oh, you want to lint that JavaScript? Bless your heart! You want to add syntax highlighting? Love will find a way. You want to use other static analysis tools, sweet.js macros, or anything else non-trivial? How cute!

    >So essentially, it's a great way for Facebook to push React.js without making React.js a standard.