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. This post has been updated with some of the features introduced in WebStorm 2016.2 and further updates. In this blog post we’d like to show how WebStorm can help you write code with React.

More on using React in WebStorm:

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 React JSX so that it may understand JSX syntax in .js files. That’s it, now you can write JSX code and enjoy code completion for JSX tags, navigation and code analysis.


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

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


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

To enhance code completion we recommend that you add a TypeScript definition file for React with npm install --save @types/react

Component names

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


Completion also works for imported components with ES6 style syntax:


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).


Attributes and events

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


All React events like onClick or onChange can be also autocompleted together with ={}.


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


Component properties

WebStorm 2016.2 can provide code completion and resolve for component properties defined using propTypes.


When you autocomplete component name, all its required properties will be added automatically. If the component usage misses some of the required properties, WebStorm will warn you about that.

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 would expand in JSX into tag with className=”my-class” and not to class=”my-class” like it would in HTML.


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:

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.


We also need to specify the kind of files in which this template can be invoked; in our case it will be JSX.

Now when you type rC and press Tab, the code snippet will expand. Type the component name and press Tab again to jump to the end edit location:


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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , . Bookmark the permalink.

134 Responses to Working with ReactJS in WebStorm: Coding Assistance

  1. Cian says:

    This is great news! I’ve recently started working with React and I love all the extra support I’m getting with it.

    I have one question (they are really both the same)
    I’m using browserfy to allow me use React in the browser. Thus, React.js is sitting in my node_modules folder.
    At work, we use a buildstep which concats React onto the top of our js file (and then minifies it). As such, I don’t ever have React.js actually in the project.

    Will WebStorm support code completion in these cases? I’ve tried using the above guide, and it doesn’t look like it does currently.

    • Constantin says:

      Settings -> Languages&Frameworks -> Javascript -> Libraries maybe?

    • Ekaterina Prigara says:

      Like I’ve mentioned in the blog post, you can add TypeScript definition file for React as JavaScript library in Preferences | Languages and Frameworks | JavaScript and WebStorm will provide you with code completion for React APIs.

    • Charles Merriam says:

      As a note, WebStorm still cannot handle idiomatic React code:

      import React, {Component} from ‘react’;

      class Boxy extends Component

      Instead, use:

      class Boxy extends React.Component

      until this is someday fixed

  2. Constantin says:

    Emmet in JSX doesn’t always work right, at least in PhpStorm 9.0.2. ‘label’ expands to ” – notice for instead of htmlFor. ‘img’ expands to ” – notice lack of /> at the end. All these is html5-isms, they aren’t valid in JSX.

  3. Janek says:

    I get nice automcompletion when manually adding typescript stubs and/or distributed version of react.js to Preferences | Languages and Frameworks | JavaScript | Libraries.

    BUT: Once I import react via “import React from ‘react'” autocompletion is broken as Webpack tries to do autocompletion using the npm import which does not work well…

    Is there a way to change this behavior? I’d like to have better react autocompletion when using es6 imports.

    • Ekaterina Prigara says:

      WebStorm doesn’t resolve Webpack imports now, please see the corresponding issue: import React from ‘react’ would be now resolved either to node_modules or to react file on the same level in project structure. However, I believe, if you still have a react.js in you project, coding assistance for React methods should work anyway.

      • Marwan Aziz says:

        ES6 imports also breaks autocompletion for me regardless of whether I have react and/or react.d.ts in my libraries.

      • Janek says:

        I’m using simple es6 style imports. They are not webpack specific.
        Webstorm *does* resolve them correctly (CTRL-Click navigates to corresponding file in node_modules folder).

        But: Webstorm tries to use resolved file in node_modules for autocompletion instead of configured typescript stubs or react.js.
        And this doesn’t work well.

        That might usually be the desired behavior but in this case I get much better completions when I don’t import React from node_modules but rely on typescript stubs/react.js library configured in settings.

        • Ekaterina Prigara says:

          Thank you for your comment. That’s a valid point, we’ll think what we can do. My suggestion would be to exclude node_modules from the project. That way WebStorm would fully rely on react.d.ts file for completion.

          • Janek says:

            That didn’t helped either.

            I’ve disabled the “node_modules” library and excluded the node_modules directory.

            Nevertheless typescript still does not use TypeScript react stub library if React is imported with an es6 import statement.

            This even happens if “React” is importet from a non existing module. Like:

        • Andrey Starovoyt says:

          Unfortunately WebStorm cannot resolve js es6 imports to typescript files so there is no way to get the typescript autocompletion for import * as React from ‘react’. I guess we will fix the problem soon.

  4. Everett Griffiths says:

    There appears to be a bug in PHPStorm that prevents the react library from being visible in the downloads. In the TypeScript community stubs, it only shows libraries from A to P. In other words, you can scroll down through the ABC’s down to libraries beginning with P, but no React is visible. This is sort of the classic complexity and confusion that seems to be standard in JetBrains stuff unfortunately….

  5. Larry says:

    Do you know if CJSX (CoffeeScript JSX) support is on the roadmap? I am currently forced to use Atom for writing CJSX since it seems to be the only editor with full support for it. I still use WebStorm for all of my backend, tests, etc. because WebStorm has great CoffeeScript support. I tried a WebStorm plugin for CJSX but it was not well done.

  6. Scags says:

    Great article! Thanks. The LiveTemplates I’m finding especially useful. Using IntelliJ here, but there is little difference.

    One thing is annoying me a bit though, wonder if you have a similar issue:
    IntelliJ is complaining about unused properties on my React classes (render, componentDidUpdate, etc). I’d like to squelch these warnings, and if it’s a React class, have IntelliJ give a pass to the standard property list of React classes. Any ideas?

  7. Gaetan s says:

    I don’t use typescript.

    The simple “import React from ‘react’;” don’t work even when I add react.js to the libraries.
    I have “Default export is not declared in imported module”

    Thank you

    • Ekaterina Prigara says:

      Hello, we don’t use TypeScript and TSX in this blog post.
      This warning shows that React is not exported using ES6 module syntax. That doesn’t mean that the import is not working, it’s just a warning.
      Unfortunately, you can’t disable this warning in WebStorm 11 (fixed in WebStorm 12 EAP). Sorry for the inconvenience.

  8. bin Hong says:

    I can not find ‘react’ library in the TypeScript community stubs…

    • Ekaterina Prigara says:

      What WebStorm version do you use?
      Please make sure that the library is not downloaded and listed in the library list yet.

  9. WillemX says:

    Is there a way to make WebStorm more JSX-aware and suppress warnings like:
    ‘this.props’ and ‘this.state’ flagged as unresolved variables inside React,createClass method definitions,
    ‘key’ flagged as unallowed attribute key inside a JSX component tag

  10. Klaus Lynggaard Hougesen says:

    jscs -fix does not work in jsx files, due to .jsx files not matching the wildcard *.js that you use for checking if jscs rightclick menu should be shown

  11. Deniz Oğuz says:


    I also want to ‘this.props’ and ‘this.state’ ‘unresolved variable’ issue to be solved. Is there an issue we can vote? Thanks for the great work by the way.

  12. Olga says:

    Is it possible to autocomplete React component methods, like: componentDidMount?

    • Dennis Ushakov says:

      What component style are you using? ES5 React.createClass or ES6 extends React.Component?

      • Jay Barra says:

        I’m seeing related with the ES6 extends method.

        import React,{Component,PropTypes} from ‘react’;

        class MyClass extends Component {
        componentDidMount() {}

        componentDidMount is listed as unused

        • Ekaterina Prigara says:

          Sorry, it’s a known issue, we hope to get it fixed soon:

          • Michael Offenbecher says:

            It’s been over a year, and I don’t see this fixed in version 2017.2. Any update and when this will be supported for the “ES6 extends React.Component” style?

          • Ekaterina Prigara says:

            Hello Michael! The issue has been fixed over a year ago. I have double-checked it in WebStorm 2017.2 and all seems fine – the lifecycle properties are not marked as unused. What JS language level do you have in your project (Preferences | Languages & Frameworks | JavaScript) – ES6 or React JSX?

        • Ori Avraham says:


          We try to create a large react project, using es6 style ‘extends’ components,
          Unfortunately it seems like all coding assistance only works for React.CreateClass() style, but no for es6 style:

          import React from “react”;

          class MyClass extends React.Component {
          render() {

          export default MyClass

          Inside the class scope declaration I don’t get any code assistance (I do get only when usinging ‘this.’ prefix or inside methods), I cant use command+P for class methods etc..

          Is this a known issue or not supported yet?

          • Ekaterina Prigara says:

            Completion for lifecycle methods is not yet supported when using extends React.Component, here’s a related issue: We are planning to work on that soon.
            The React Component methods that you can override in your class are available via Generate… – Override methods (when react.d.ts is added as a JavaScript library).

  13. zhangl says:

    I already switch javascript type to jsx harmony .And in jsx file,there was no error.But still no type assistant of react appear.what’s the problem?

  14. Michael Caputo says:

    One peeve I have with writing Jsx with Webstorm, is (I know it can be changed) when typing JSX attributes, it defaults to double quotes. Would be awesome if webstorm could automatically recognize that it’s JSX and use curly braces instead.

    • Ekaterina Prigara says:

      That’s been fixed in WebStorm 2016.2: for React events curly braces are now added instead of quotes.

      • Tred Reprak says:

        This doesn’t appear to be true, or it was a regression in 2016.2.1. Curly braces are not populated for className, double-quotes are.

        JavaScript language version: React JSX

        • Ekaterina Prigara says:

          In React className by default is a string attribute and className=“” is a valid code, that’s why we add quotes for it. Here’s an example from official React documentation:

          • Ruslan Prokopchuk says:

            Is it possible to switch to single quotes in settings? We have convention in team to use single quotes for string attributes in JSX, but from the quick scan I didn’t find relevant setting.

          • Ekaterina Prigara says:

            Yes, you can do that in WebStorm 2016.2 in Preferences | Editor | Code style | HTML – Generated quote marks.

          • Ruslan Prokopchuk says:

            Thank you!

          • Julian says:

            Is this also possible for auto imports inside a JSX file? Changed HTML & JavaScript Generated quote marks to Single, but still get double for imports.

          • Julian says:

            Well, I’ve found it directly after posting.. :D
            Had to check the ‘Enforce on format’ option under Code Style -> HTML

          • Ekaterina Prigara says:

            Good that it’s solved now.

          • Jonathan Moody says:

            Is it possible to use curly braces for className autocomplete instead? I use a React CSS library that requires className to be a JS object instead, so I never use the default string format.
            (i.e. )

          • Ekaterina Prigara says:

            WebStorm automatically adds curly braces only for event attributes like onChange – React requires them to be JavaScript objects. className can be a string. You can disable auto adding quotes in Preferences | Editor | General | Smart keys – Add quotes for attribute value on typing “=” or attribute completion. Please comment on this issue if you think that default behaviour should be changed:

  15. Dean Hristov says:

    Hi, everyone

    I’ve one question about the support on ReactJS in Webstorm (in current version by date on this message). How can I debug ReactJS file/project same JavaScript? Sometime I have to attach somewhere break point, but I can’t do this? Тhere it has it as support?

  16. Concerned Citizen says:

    Is there a way to disable backtick auto-formatting in phpstorm? Phpstorm adds backticks randomly which comments parts of the file. This makes it hard to use ES6 template strings.


  17. George Karanikas says:

    Hi my team and I are about to start a new large react project for which we are going to use flow as well.

    As I started prototyping I first had the language level to “React JSX” but then since I wanted to introduce flow to the game, I changed it to flow. The problem now is that react autocomplete does not work with my components.

    Is there is workaround to handle this or should I open an issue?

    • Dennis Ushakov says:

      Hi George,
      it would be better to file an issue with a small code sample, because it seems to be working for me

  18. TOM says:

    when i use React JSX and setting javaScript language version React.js . but it not work and /usr/local/bin/babel src/index.js –out-dir dist –source-maps –presets es2015
    SyntaxError: src/index.js: Unexpected token (20:16) ….so what’s wrong?

  19. Francis Kim says:

    I’ve FINALLY upgraded my WebStorm and I have to say I’m enjoying the React features a lot.

  20. Taylor says:

    > When you autocomplete component name, all its required properties will be added automatically. If the component usage misses some of the required properties, WebStorm will warn you about that.

    I am using Redux with React, some of my required props will be provided by the connect HOC ( Webstorm is not smart enough to understand this use case, so I have to entirely disable this warning via Preferences > Editor > Inspections > HTML > Missing Required Attributes

  21. Marek says:

    Can I enable eslint-compliant code style for JSX? E.g. I currently use eslint rule jsx-curly-spacing”: [2, “always”] to have extra space inside curly braces, yet WebStorm doesn’t reformat my JSX code this way.

    • Ekaterina Prigara says:

      This code style option is not currently supported in WebStorm, but we plan to fix that. Here’s an issue you can follow:
      As a workaround, since this ESLint rule is fixable, you can use ESLint: Fix current file action (hit Alt-Enter on the highlighted error from ESLint in the editor and select ESLint: Fix current file).

  22. oana says:

    Hi! I have just reinstalled my webstorm and now it will not let me use expressions enclosed in curly braces {} as attribute values.

    I works for some projects, but does not work with new projects.

    I am writing react/JSX in all of the projects and they all appeat to have the same settings.
    Any hints as to where to look?

    I have an HTML file and a tag inside it. The problem arises when, in teh script, I have something like:
    <element attr={…
    it doesn't even matter what is next. I will not allow me to write anything, nor use the "backspace" key.

    • Ekaterina Prigara says:

      Sorry, I’m not sure I understand correctly: do you have this issue in your React code in JS files? What WebStorm version do you use?

      • Oana says:

        Thank you for replying.

        I use the latest Webstorm (2017.1.1).

        I have a project with one HTML file and a tag inside it. In here I write JSX.
        At some point I need to write this:

        Inside the curly braces I can not write a thing. I would just ignore my typing.

        I checked my Settings (File>Settings>Language&Frameworks>Javascript) and I use ECMAScript6. I also tried with JSX, but I get the same.

        The issue is that in some projects it works properly and others not. I tried comparing settings. I even exported settings from a project and importing to another and nothing. I don’t know where/what to look for

      • Oana says:


        I thought about what I changed and that is: I updated Webstorm to 2017.1.1

        I just uninstalled that and reinstalled 2017.1 and it works as expected. I am not 100% sure that this was the problem, but this was my solution. later today I wil try to update again and see if I get the issue back.

  23. blaze says:

    I’m using Webstorm (version 2017.1.3) on a React project. I currently get a warning from the IDE to convert React component render function to a static function. Here is my code:

    class App extends React.Component {
    render () { // warning: can be static
    return React & Application

    Is there a way to configure WebStorm to prevent this warning message? Thanks.

    • lena_spb says:

      Known issue, please follow WEB-19028 for updates. I can suggest to either disable this inspection or suppress it for current method: hit Alt+Enter on render(), then hit Right, choose Disable Inspection or Suppress for statement

  24. Amrish says:

    Can we debug whole react.js application including route.js and all in webstrom? I am currently working webstrom 2016.2.4. Please help me out.

    • Ekaterina Prigara says:

      By route.js do you mean react-router? If possible provide a sample project. WebStorm JavaScript debugger should be able to debug the whole app running in the browser. Note that we highly recommended using the latest WebStorm version, it’s 2017.1.3.

  25. Brice says:

    Hi, good post, but there is a broken link:
    (Developing mobile apps with React Native) http://https//

    Thank you.


  26. David says:

    Thanks for this great feature!

    I have a question about inheritance of propTypes. To be clear about that I give you an example.
    I have a component Text and LabeledText.
    LabeledText is suppossed to have all propTypes of Text. I write this like:

    class LabeledText extends React.Compoment {
    propTypes: { …Text.propTypes, label: PropTypes.string }

    Unfortunately, autocompletion doesnt work for this. Is anything planned in this direction or is there a better way to achieve this behavior?

    Thanks in advance and best regards,

  27. Bunja says:

    The feature is pretty cool

  28. Todd Corley says:

    In 2017.2.4 and now 2017.3
    All react attributes are defaulting to {} braces and it is driving me crazy. The above animated example with className now ends up as className={}. Working with a an input field is doing the same that makes no sense at all.
    Is there a way to turn this off? Or how far back to I have to revert the installation to get it to work like it did before? (meaning just adding quotes)

    • Ekaterina Prigara says:

      In the latest WebStorm 2017.3 EAP for className we don’t add either {} or “”, so that you can type what you need in this particular case. We think that it’s the best solution for everyone: for those who often use {} for className, those who use quotes and those who use both. What do you think?

      • Todd says:

        that only address className. why is every other JSX/HTML attribute now using {} now?
        again with my input example.. If I type input then hit tab it creates the input tag and type attribute with quotes, but when I add the next attribute, label in this case, if I tab to select it from the pop up list, it adds label={}. How can I turn off braces for ALL ATTRIBUTES. I need quotes more often than I need braces and replacing them is a pain. Or as previously asked what is the last release before this “feature” was added. I will just stick with that version.

        • Todd says:

          2017.1.4 seems to be the most stable for me. Fixes the “” vs {} issue and another problem another problem where individual imports were not recognized. Does jetbrains have a QA team????

          • Ekaterina Prigara says:

            Can you please provide more details on the problems with the individual imports. We are not aware of it. Thank you!

          • Todd says:

            Java Script setting: JSX in ECMAScript 6

            import {Link} from ‘react-router’;

            Works in 2017.1.x but not in 2017.2+

            My problem with “” vs {} well documented above.
            2017.1.4 works like I expect and I will not be upgrading from there.

          • Ekaterina Prigara says:

            What react-router version do you have? Is it listed as a project dependency in package.json? I’ve tested it in WebStorm 2017.1 and 2017.2 and for me it’s resolved correctly with react-router 4.2. Thanks!

      • Ed says:

        This is driving mental. How do I turn this feature off?

  29. Rahul Rastogi says:

    React components like: , don’t work with Webstorm autocomplete. Infact, classes import and complent properties having autocomplete feature. Any suggestion?

    • Ekaterina Prigara says:

      Sorry, but I can’t see the code sample in your comment. Can you please wrap the code with the code tag? Or make a screenshot with the code sample and share a link. Please also let us know what WebStorm version do you use. Thanks!

  30. Aksel says:

    I am using two packages, which both export two completely different Link components.
    One is a router, the other is a draft.js wysiwyg.

    For some reason, WebStorm always assumes the component used is the draft.js one, and will autocomplete with its props, and warn when its required props are not used.

    This happens even when I import the correct Link component via autocompletion, both via import and the render function. When navigating to the component via ctrl-click, it opens the correct component, so it knows what component I am using.

    Invalidating caches and restarting does not fix the issue.

    Is there a way to specify which component to look at?

    • Ekaterina Prigara says:

      Can you please provide a bit more details on the modules you’re using and the import statements you have in your file.
      So far I tried to install “draft-js”: “^0.10.4”, but I haven’t found a Link component there.
      And for react-router, the Link component is only available in the react-router-dom package. Is that what you have?

      • Aksel Tórgarð says:

        react-router v3 exports it directly. [It’s explained here in the docs](

        The other package is called react-draft-wysiwyg. [Link](

        I’m not sure what its Link component is used for, but it doesn’t seem to be exported through the main package.

        Nonetheless, I get autocompletion for importing it, both from the package itself, and directly from from its folder, like so:

        [code]import Link from ‘react-draft-wysiwyg/src/controls/Link’;[/code]

        • Aksel Tórgarð says:

          Whoops, thought this was markdown :)

          But you get the idea

        • Ekaterina Prigara says:

          Thanks for the info.
          For me, if I have import {Link} from 'react-router-dom' on the top of the file the completion for Link’s props works as expected (doesn’t show any props from the react-draft-wysiwyg module).
          If there’s no import statements, the Link is correctly highlighted as unimported and in my opinion the import suggestions both from react-router-dom and react-draft-wysiwyg are valid.
          I wasn’t able to reproduce the case when wrong props are shown.
          Can you please share the whole file? Or at least the list of import statements you have in it. Thank you!
          If you want you can create an issue on our tracker or contact our tech support directly.

          • Aksel Tórgarð says:

            > If there’s no import statements, the Link is correctly highlighted as unimported and in my opinion the import suggestions both from react-router-dom and react-draft-wysiwyg are valid.

            Oh absolutely, I agree.

            This error doesn’t seem to be reproducible. I have created a new project for the example, but it doesn’t happen in it.

            I’ll open an issue if I can figure out how to reproduce the issue.

            Thank you for your help, by the way. It’s cool of you to follow the comments on this blog.

          • Ekaterina Prigara says:

            You’re welcome! Let us know if you stumble upon this issue again.

  31. Brie says:

    Hello! First off, thanks for these great features that help developers be more productive with React. :)

    The article mentions that “WebStorm 2016.2 can provide code completion and resolve for component properties defined using propTypes.”

    Do you know if it would be possible to add support for code completion for TypeScript declaration files added via “JavaScript libraries”?

    Here are some examples that show only getting completion when the component has propTypes.
    Would be great if there could also be completion for the props defined in the TypeScript interface.

    Thank you,

    IntelliJ IDEA 2018.1.2 (Ultimate Edition)
    Build #IU-181.4668.68, built on April 24, 2018
    JRE: 1.8.0_152-release-1136-b29 x86_64
    JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
    macOS 10.13.4

Leave a Reply to Ekaterina Prigara Cancel reply

Your email address will not be published. Required fields are marked *