LB777

Маленькое дополнение, не забываем указать интерпретатор php

На самом деле, организация файлов в проекте - очень важный вопрос.
У меня есть отличная дока по теме: Best Practice Recommendations for Angular App Structure.
Сквозь огонь и воду, на практических примерах, для себя, понял, что лучше организовывать проект как "дерево модулей" (фрактальная иерархия).

Например для сборки можно использовать Browserify или Webpack, который для проектов на реакте более предпочтителен, так как поддерживает горячую замену обновленных модулей и конечно же оба они поддерживают создание sourcemap

я тоже сталкивался с подобным вопросом. я делал так:
1. где-то в стороне от public-html (web-root) создал js-файл, в котором буду писать свой jsx-код
src/app.js
2. установил плагин FileWatchers link
3. установил глобально через npm react-tools - после этого будет доступна тулза jsx (у меня линукс) link
4. создал вотчер, который следит за моим созданным файлом и который генерирует обычный js-файл в webroot/js/app.jslink
5. подключил этот генерируемый файл в свою html-страничку
6. когда IDE увидит, что код похож на JSX она предложит Вам изменить language level на JSX Harmony. (Возможно, я допустил ошибки в коде, но это не столь важно)

Вы соглашаетесь и после этого у Вас корректное отображение синтаксиса

возможно, придется переоткрыть файл (мне пришлось выделить весь код, вырезать его и вставить обратно)
в итоге периодически пока Вы пишете JSX-код, вотчер следит за файлом генерирует обычный js-код в указанный файл
такой же вотчер можно запустить и гульпом

Вопрос был, как это делается, если на выходе все файлы минимизируются и конкатинируются, не какие есть сборки

Конкретно для react.js вот кусок gulpfile:

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify'),
    reactify = require('reactify');

gulp.task('react', function () {
    var bundleStream = browserify('./react/app.js')
        .transform(reactify)
        .bundle();

    bundleStream
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/js'));
});

vinyl-source-stream, browserify и reactify надо установить при помощи npm
В react/app.js находится реакт-приложение с модулями, объявленными через CommonJS

Посмотрите на генераторы yeoman.io

А как и где вы потом подключаете скомпилированный из jsx шаблон?
По идее, если вы не используете реалтаймовый JSX Transformer, а используете прекомпиляцию на сервере, при помощи react-tools, то достаточно только подключить скомпилируемый файл в конце body

....
      <script src="build/from_jsx.js"></script>
  </body>
</html>

Т.е., если вы не используете jsx в чистом виде, в сочетании с JSXTransformer

<script type="text/jsx">
      ...
      render: function() {
        return (
          <h1 onClick={this.goodbye}>{this.state.message}</h1>
        );
      }
      ...
    </script>

то необходимо подключать уже скомпилированный js.

Посмотрите в сторону ASP.NET SignaR она для этого и разрабатывалась.