I suggest you ...

Add ReactJS JSX support

React JSX has embedded html in javascript. Provide support for JSX syntax in javascript.

2,705 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    dmat shared this idea  ·   ·  Admin →

    87 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Lenne commented  · 

        JSX support would be awesome!

      • wow0609 commented  · 

        Much needed addition. Please add

      • Anonymous commented  · 

        PRETTY PLEEEEEEEEEEEAAAAAAASE!

      • Anonymous commented  · 

        I really want this to happen!

      • Steen commented  · 

        This would be great!

      • Janusz Kacalak commented  · 

        For now I'm using WebStorm IDE for jsx, it handles JSX code pretty well (not perfect though), all typical JS editor features work for JSX there (code assist, using "require()".., etc.).

        One case when Webstorm editor has some problems is if JSX-xml code is somehow invalid.

      • Daniel Abramov commented  · 

        Mads, JSX is not like HTML at all.

        JSX a *lot* more like XML literals in VB .NET. It is “lowered” into the base language by obeying a certain syntax transform.

        http://facebook.github.io/react/docs/jsx-in-depth.html

        // Input (JSX):
        var app = <Nav color="blue"><Profile>click</Profile></Nav>;
        // Output (JS):
        var app = Nav({color:"blue"}, Profile(null, "click"));

        * JSX is a simple syntactic transform.
        * JSX neither provides nor requires a runtime library.
        * JSX does not alter or add to the semantics of JavaScript.

      • Daniel Lo Nigro commented  · 

        Also note that JSX is not HTML. It is inspired by HTML, but there are differences between the two. You still need JavaScript intellisense inside JSX tags as children and attribute values can be JavaScript code.

      • Daniel Lo Nigro commented  · 

        Back in April I released a library to use React from ASP.NET (including server-side rendering) and to do JSX compilation in MSBuild: http://reactjs.net/

        One thing I did not work on was editor integration since I lack experience in the area. I asked in the forum and the response was that the JavaScript tooling wasn't designed to be extensible. This would be fantastic to have.

      • Anonymous commented  · 

        Mads, if you do consider implementing this, be warned that the "HTML" in JSX isn't really HTML. Besides the ability to escape out of it back into JavaScript, there's a lot of sublte differences. For example, all attributes are called as they are in the DOM, not how they're called in HTML, f.ex. "className" instead of "class". Similarly, the contents of the style attribute has to be an object like { fontSize: "12pt" }, rather than a string like "font-size: 12pt".

        These little differences will probably make implementing true JSX-HTML support more work than it would seem.

        That said, if you look through this thread, it looks like most people would already be very happy if the JSX-HTML were just ignored (everything between a start and end tag) and the rest would be the plain old JS editor support we're familiar with. Basically, if you could fool the parser into thinking that anything between <tag> and </tag> is a block comment, we'd all do a little dance :-)

      • Konrad Dusza commented  · 

        JSX is amazing, React with Flux is the future of the web

      • Chris commented  · 

        Either implement it using the /** JSX comment as the indicator in a *.js file or implement it with npm -g react-tools that watch *.jsx files and translates (and nests them in VS) to *.js files. JSX files could then use VS "HTML editor" and **might** be easier to implement. http://facebook.github.io/react/docs/getting-started.html

      • Werner van Deventer commented  · 

        I personally think JSX is more JavaScript than HTML. Even the HTML can contain script wrapped in {} so it's not 100% HTML in that sense. That being said, the ultimate solution would be to have full JS support with the same full HTML support you would expect from both types of editors.

        This SublimeText plugin does a great job of mixing the two worlds which I would like to see in Visual Studio (including snippets): https://github.com/jgebhardt/sublime-react

      • Konstantin Tarkus commented  · 

        ..just figured out that having a dedicated .jsx file type is a more natural way of implementing JSX support.

      Feedback and Knowledge Base