Working with ReactJS in WebStorm: Coding Assistance

ReactJS is no doubt one of the trendiest JavaScript libraries released recently and as such is seeing wide adoption.

React support was introduced in WebStorm 10 and has undergone continuous improvement since then. In this blog post we’d like to show how WebStorm can help you write code with React. We are using WebStorm 11 Early Access build that you can get here; WebStorm 11 will be released later this year.

React introduces JSX, an XML-like syntax that you can use inside your JavaScript code, but you can also use React in pure JavaScript.

If you’re using JSX, WebStorm will suggest switching language version to JSX Harmony so that it may understand JSX syntax even in .js files. That’s it, now you can write JSX code and enjoy code completion, navigation and code analysis.

jsx_language_level

You can also switch language version to JSX Harmony manually in Preferences | Languages & Frameworks | JavaScript.

Once you have react.js library file somewhere in your project, WebStorm will provide you code completion for React methods. By default, the code completion popup displays automatically as you type. For example:

react_code_completion

From your code you can jump to the method definition in the library with Cmd-click (Ctrl+click).

To enhance code completion with typed parameter information we recommend that you add a TypeScript definition file for react.d.ts as a JavaScript library for the project.

Go to Preferences | Languages & Frameworks | JavaScript | Libraries, click Download…, select TypeScript community stubs, search for react and click Download. The file will be added as JavaScript library for WebStorm to use in coding assistance.

Now when you type, you’ll also see information on parameters that you can use in this method:

react_param_info

Press Cmd-P to invoke a popup with information about arguments and types again.

WebStorm can also provide code completion for HTML tags and component names that you have defined inside methods in JavaScript or inside other components.

react_component_competion

Completion also works for imported components with ES6 style syntax:

react_imported_component_completion

From there you can also jump to the component definition with Cmd-click (Ctrl+click on Windows and Linux) on component name or see a definition in a popup with Cmd-Y (Ctrl+Shift+I).

react_quick_definition

In JSX tags, the IDE provides coding assistance for React-specific attributes such as className or classID. Moreover, for class names you can autocomplete classes defined in the project’s CSS files.

react_classname

Of course there is also code completion for JavaScript expressions inside the curly braces. That includes all methods and functions that you have defined:

react_javascript_expression

Emmet in JSX

With Emmet support in WebStorm, you can generate HTML markup really fast. You type an abbreviation that expands to HTML code when you press Tab. You can also use Emmet in JSX code, and that brings us to some special React twists. For example, the abbreviation div.my-class would expand in JSX to <div className=”my-class></div> and not to <div class=”my-class></div> like it would in HTML.

react_emmet

Live templates

Live templates work very similar to Emmet – type a special abbreviation and it will expand into a code snippet. WebStorm has a predefined set of templates for JavaScript and HTML, and you can also create your custom templates for React in Preferences | Editor | Live templates.

As an example let’s create a live template for creating a new React component:

var $NAME$ = React.createClass({
    render: function () {
        return (
            <div>$END$</div>
        )
    }
});

Let’s set the abbreviation to rC. With $variable_name$ syntax, we can set the edit points for variable and function names (we have multiple edit points in one template), and with $END$ we specify a location of the cursor at the end.

new_live_template

Another way to go is to import a set of templates created by community members for development with React in WebStorm. See GitHub for details on the installation process.

In a follow-up blog post we’ll talk more about the available refactoring options, code quality analysis, and compiling code. Stay tuned!

Develop with pleasure!
– JetBrains WebStorm Team