IDE for React (JSX), JS, PHP

Hmmm... I am not sure if you already checked it out or not, but I do not think I can go with any other editor: Visual Studio Code - Code Editing. Redefined 

PS: I am sure there are plenty of opportunities to improve it but still... I think it is the Holy Grail of editors.

I am going to second Chinmay on this one.Switched to VS Code some time ago and have not looked back. The editor is lightweight - makes Visual Studio look like a wallowing behemouth but has the punches way above its weight. The extension support is extensive. For cross environment development - no other choice in my opinion.

Thanks Guys,

Does it consume JSX and compile it on the fly for React components?

I use IntelliJ Idea :
https://www.jetbrains.com/help/idea/react.html
https://www.jetbrains.com/help/idea/php-specific-guidelines.html
https://www.jetbrains.com/help/idea/using-git-integration.html
https://www.jetbrains.com/help/idea/uploading-and-downloading-files.html

You should also give a chance to this online editor :
https://stackblitz.com/

@Rob,

I have not used it in that context - however I have read several articles where it describes hot debugging of React using Node as the delivery mechanism. Is that in line what you are looking for?

I use PHP storm https://www.jetbrains.com/help/phpstorm/react.html#creating_react_app_with_create_react_app

This is the 2nd thread asking about an IDE in as many days. I think the guys have convinced me to try out VS Code (on both threads) as the main IDE.

With Jetbrains, I do have the all product pack and I would not pay what they are asking today. I think I started with it around 2013 and my yearly subscription is half of what it is today.

IDEs - Research PHP Storm + Jet Brains.

As for your criteria, which is a very odd...

1) git functionality

This relates to where your source lives. You'll use straight up Git for this.

Trying to use Git from inside an IDE... will create... massive complexities...

In Git error/problem will be glossed over by an IDE or worse, escalate into a requirement for a significant amount of time invested running manual Git commands trying to dig out of a hole created by some IDE Git interaction.

Git is complex enough by itself. Use Git on the command line, rather than integrating Git into other tools.

2) remote save

Typically this can be done in a variety of ways, where remote files are mounted using a local file system (my preference) or using some sort of IDE hook.

If you go the local filesystem route, you can use sshfs so all your remote source looks like a local directory, then with this approach you can interact with your remote files easily by using your IDE or local command line utilities.

3) PHP syntax support

If you use a PHP aware IDE, then this is normally handled by default.

4) Automatic JSX compiler

This will be as bad as Git integration.

Can you do this. Likely yes.

Should you do this. Likely no.

With IDEs, normally you'll work with... pure source code... so no minification, obfuscation, compilation... because when you're working in an IDE the entire point is to work with source code to quickly find + fix problems... which is impossible with non-source... or will require massive CPU cycles if your IDE is constantly reversing non-source back to source so reversing - minification, obfuscation, compilation.

Tip: Use an IDE for source debugging only. Run other tools outside your IDE.

@Scott

This is the 2nd thread asking about an IDE in as many days. I think the guys have convinced me to try out VS Code (on both threads) as the main IDE.

I have not used PHP Storm but I have seen it in videos of guys doing coding demos. I am going to go out on a limb here and say that on a PHP front you are probably going to find that the VC Code extension is not on a par with PHP Storm. It is way better than Notepad++ but from what I have seen Storm is definitely a better tool to use for PHP. I use Code because I am building projects that have some PHP, HTML and a lot of JavaScript (TypeScript) and in that respect VS Code is great as it allows me to do everything in one place. The TypeScript support is great - also the bit of development I have done using Dart has also been really easy in VS Code. The extension library is insane - literally anything that involves developing or editing is covered (in many cases more than once). I think the bottom line here is if you are going to e doing exclusive PHP development Storm probably has the edge - but for general editing or projects that require multiple disciplines then VS Code is definitely worth a look.

Let me give you some background... I've been using Netbeans for ages and it's been great... Has built in git with everything I need for that. It has remote update so that when I save it also sends a copy to my test server over ssh.And there's no issue with syntax support (though code completion could be better but meh)

What I've run into lately is the transcompiling that's required for React DOM JSX so that the coding is seamless.  I've pretty much given up and gone back to knockoutjs for the templating that I was working on though I really liked the React Component structure so really was looking for something that could do everything I have already with Netbeans but in the one package.
I did see that Babel has a standalone javascript library you can include in your pages but it does come with the recommendation to compile everything for production (which I would do anyway).  That's clunky to me.

If VS Code can do JSX transcompiling on save etc then that would be the solution here given my original post.

https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/#babelfilewatcher

Yeah so I could set it up like what I do with my scss. Makes sense

@Rob,
Not sure if I am missing something with what you are doing but I have found development with React in VS Code to be quite straight forward. I will admit I have not done much being more Angular focused but it seems from the little I have done to be well integrated.

At the risk of going over ground you have already covered - does this not provide some insight into what you are asking?
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

Appreciate the clarification Julian,

What it ultimately boils down to is I'm trying to avoid this code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));

reportWebVitals();

Select allOpen in new window

and instead use JSX

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

class Hello extends React.Component {  
   render() {    
      return (<h1 class="greeting">Hello, world!</h1>);
   }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

reportWebVitals();

Select allOpen in new window

I wonder... is this why the server side is Node.js? is it doing the react jsx rendering automatically when it serves the page?

Thanks Julian - definitely the missing link here was using Node.js as my server side is PHP and that's what I was missing.

Seems I either need to do the setup with Node.js like you've described or trascompile my code every time i want to upload to my server (if using PHP).

You are welcome Rob.