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($.uglify)
.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?
austin
March 31, 2015, 4:05pm
2
What was the problem? Does it give you errors?
I usually have to:
/* jshint ignore:start */
<div><span></span></div>
/* jshint ignore:end */
3 Likes
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!
austin
March 31, 2015, 6:00pm
4
The previous defacto was to use https://github.com/CondeNast/JSXHint but it has fallen out of favor
# THIS PROJECT IS NO LONGER MAINTAINED
JSHint 2.2.0 supports an "ignore" statement which can be used to wrap blocks of code which should be passed over by the linter.
```javascript
/* jshint ignore:start */
<div><span></span></div>
/* jshint ignore:end */
```
I feel this is a much better solution than transforming and wrapping JSHint with a series of transforms since the code produced by JSX's transpiler might produce code which does not comply to your internal lint/hint guidelines.
If you feel you need to use a wrapper around JSHint and want to have JSHint run on your transformed JSX code, please see [STRML/JSXHint](https://github.com/STRML/JSXHint/)
I would say the jshint ignore solution is pretty solid going forward.
1 Like