Using React JSX

In a new project I would like to use React. The JSX code in my main.js file needs to be compiled to regular js in order to work in the browser.

I’ve added gulp-react to the dependencies and changed jsTasks to this:

var jsTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.init());
    .pipe(function() {
      return $.if(filename === "main.js", $.react());
    .pipe($.concat, filename)
    .pipe(function() {
      return $.if(enabled.rev, $.rev());
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.write('.'));

This seems to work. However I couldn’t figure out how to use it with jshint task, therefore I had to disable it for now.

Has anyone here tried to use React in the Sage theme and successfully changed the gulpfile or could point me in the right direction?

What was the problem? Does it give you errors?

I usually have to:

/* jshint ignore:start */
/* jshint ignore:end */

Yes, the problem is when jshint encounters JSX code it gives errors. I was trying to run main.js through gulp-react and then feed that into jshint, that was what I couldn’t figure out…

The ignore tags work for now though, thanks!

The previous defacto was to use but it has fallen out of favor

I would say the jshint ignore solution is pretty solid going forward.

1 Like