Getting Facebook's react.js library JSX syntax to play nicely with jslint?

Question!

I am playing around with the Facebook's react.js library. I am trying to use their JSX syntax which describes creating a view in the following way.

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);

JSLint obviously does not like this ("expected an identifier and instead saw ' <';" - JavaScript syntax error), so how do I get around this in my .jshintrc file?



Answers

Amey's answer is correct but also could be updated today:

Pair of eslint and eslint-plugin-react now support es6 jsx react so babel-eslint is needed only if you use some specific stuff like class properties, decorators, async/await, types.

Example .eslintrc configuration for react jsx es6 without babel-eslint:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 0
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"]
}

You can just look at eslint-plugin-react instructions for further details.



I use grunt react-tools jshint to lint the .js files built using react-tools. The output from react-tools is very good about keeping your spacing, indentation, etc, when converting your .jsx to .js, so it gives you an accurate file to lint against.

To setup, install grunt the normal way. Then install the grunt-contrib-watch, react-tools, grunt-react, and grunt-contrib-jshint.

npm install grunt-contrib-watch react-tools grunt-react grunt-contrib-jshint --save-dev

here is a sample grunt file:

'use strict';

module.exports = function (grunt) {
    // Project configuration
    grunt.initConfig({
        // Task configuration
        jshint: {
            options: {
                jshintrc: true,
            },
            react: {
                src: ['react/**/*.js']
            }
        },
        react: {
            files: {
                expand: true,
                cwd: 'react/',
                src: ['**/*.jsx'],
                dest: 'react/',
                ext: '.js'
            }
        },
        watch: {
            jsx: {
                files: ['react/**/*.jsx'],
                tasks: ['react', 'jshint:react']
            }
        }
    });

    // These plugins provide necessary tasks
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-react');

    // Default task
    grunt.registerTask('default', ['react', 'jshint:react']);
};

In this file, running "grunt" will compile your .jsx to .js and then lint the .js files. You can run "grunt watch" to run after every save.

Most of my usual .jshintrc settings work when running this way. I ran into a few issues initially, but most were resolved by making changes in your .jsx files. For exapmle, I have "newcap" set to true. When I followed the React tutorial's naming convention and capitalized the first letter of tags, this threw a lint error. It was fixed by lower-casing the first letter of tags.

I did have to set "trailing": false in my .jshintrc. The resulting .js files have trailing whitespaces where it converts tags to Javascript. I haven't figured out if there is a react-tools configuration to change this. You can use the method described in Dan's post if you don't want to change your .jshintrc.

In addition to linting, this process also helps catch issues with your .jsx to .js conversion.

The issue/downfall with this process is that you can't lint .jsx files in the editor. But keeping a terminal window open that you can see while editing is a helpful replacement. Uing TMUX with Vim and Grunt in different panes is my preferred way to use this.

By : shortpgh


Guys maintaining the repo are incredibly helpful. You just have to run it threw the JSX transform to produce valid javascript unless someone creates a fork of jshint. If there is enough interest, it might be put on the roadmap for future release of the react framework. Can look at the coversation thread here.



This video can help you solving your question :)
By: admin