Working with ReactJS in WebStorm: Coding Assistance

Posted on by Ekaterina Prigara

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.

switch-to-react-jsx

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:

react-completion

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.

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

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.

react_classname

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

react-events

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

Component properties

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

props-react-640

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

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:

react_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

Comments below can no longer be edited.

134 Responses to Working with ReactJS in WebStorm: Coding Assistance

  1. Cian says:

    October 6, 2015

    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:

      October 7, 2015

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

    • Ekaterina Prigara says:

      October 7, 2015

      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.

      • Ekaterina Prigara says:

        October 7, 2015

        I would also recommend to add react.js library file itself as JavaScript library via the same Preferences | Languages and Frameworks | JavaScript | Libraries configuration. You can read about that here: http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/

      • Cian says:

        October 10, 2015

        Hi Ekaterina – The thing is – as I mentioned in the comment I’ve done the steps in this blog post and I’m not getting code completion. I’ve noticed that if I follow the


        let MyComponent = React.createClass({...});
        module.exports = MyComponent

        es6 pattern it works, but I’m not using that pattern. I’m using


        export default React.createClass({...});

        pattern, and then including each component into parent components with


        include MyComponent from './components/MyComponent'

        export default React.createClass({
        ...
        render: function() {
        ...
        return (
        ...

        ....
        )
        }

        });

        • Cian says:

          October 10, 2015

          Sorry about the terrible formatting – I tried to format it well but the formatting got removed after posting.

        • Ekaterina Prigara says:

          October 13, 2015

          Thanks for letting us know. I will look at that closer and will let you know what can be done.

          • Cian says:

            October 15, 2015

            Thanks!

          • Randy says:

            November 15, 2015

            Same issue, i’m importing react from node modules but get no completion. It’s a pretty common workflow so i’m surprised webstorm doesn’t support it

            • Ekaterina Prigara says:

              November 16, 2015

              What WebStorm version do you use? node_modules folder is not excluded from the project, right?

          • qingguoing says:

            March 17, 2017

            same issue, the code assistance can’t work, the version of WebStorm is 2016.3.4 on macOS sierra 10.12.3

            • Ekaterina Prigara says:

              March 17, 2017

              What exactly doesn’t work as you expect? Do you have react in your project’s package.json file?

      • bunny says:

        December 25, 2015

        sorry,i have not fount ‘react’ library in the TypeScript community stubs…

        • Ekaterina Prigara says:

          December 28, 2015

          Please try typing “react” in the list of stubs to search for it, it should be there.

          • Akhilesh says:

            March 5, 2016

            Hi,

            I tried.. Could find react under TS community stubs.

          • Akhilesh says:

            March 5, 2016

            Correction. Couldn’t find react.

            • Ekaterina Prigara says:

              March 8, 2016

              Which WebStorm version do you use?

    • Charles Merriam says:

      December 16, 2016

      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

      • Ekaterina Prigara says:

        December 19, 2016

        Can you please provide more details on what exactly should be fixed. Thank you!

        • Wagner Camarao says:

          October 19, 2017

          I can confirm this is still not supported as of today:
          import React, { Component } from ‘react’;

          WebStorm gives the following warning:
          Cannot resolve symbol ‘Component’

          • Ekaterina Prigara says:

            October 19, 2017

            I’ve replied to you on the issue tracker. Please reply to me there what WebStorm and React versions you use.

          • Wagner Camarao says:

            October 19, 2017

            Great, thanks.

  2. Constantin says:

    October 7, 2015

    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.

    • Constantin says:

      October 7, 2015

      ah, shoot. comment engine discarded and img src="" alt="" because of wrong quotes.

      • Constantin says:

        October 7, 2015

        are you kidding me? 🙂 – will it post like this?

        • Constantin says:

          October 7, 2015

          ok, there’s also a bug in your comment posing, backticks create inline code blocks but html tags in their content evaporate after posting. no preview either to see what’s gonna happen. can you change it to markdown please?

    • Ekaterina Prigara says:

      October 7, 2015

      Thanks for your feedback.
      I’ve created 2 issues, please follow the updates on them: https://youtrack.jetbrains.com/issue/WEB-18459 and https://youtrack.jetbrains.com/issue/WEB-18458

  3. Janek says:

    October 7, 2015

    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:

      October 8, 2015

      WebStorm doesn’t resolve Webpack imports now, please see the corresponding issue: https://youtrack.jetbrains.com/issue/WEB-14019 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:

        October 8, 2015

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

        • Marwan Aziz says:

          October 8, 2015

          CORRECTION:

          It looks like this works if I create a new file but not with existing files.

          • Marwan Aziz says:

            October 8, 2015

            Please disregard my last reply. The only valid case is the first comment. Sorry for the confusion

      • Janek says:

        October 9, 2015

        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:

          October 9, 2015

          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:

            October 9, 2015

            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:

            import React from 'i-do-not-exists';
            React.- // => no completions (or only weak)
            
            React.- // => completions available through Typescript stubs/React library
            
        • Andrey Starovoyt says:

          October 13, 2015

          Hi.
          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:

    January 4, 2016

    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:

    January 6, 2016

    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.

    • Ekaterina Prigara says:

      January 11, 2016

      Hello Larry, at the moment we don’t have any precise plans to support JSX in CoffeeScript, sorry. You can vote for the corresponding issue and follow the updates on it: https://youtrack.jetbrains.com/issue/WEB-12464

  6. Scags says:

    January 7, 2016

    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:

    January 27, 2016

    Hi,
    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:

      January 28, 2016

      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:

    March 1, 2016

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

    • Ekaterina Prigara says:

      March 1, 2016

      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:

    March 26, 2016

    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

    • Ekaterina Prigara says:

      March 28, 2016

      Thank you for your feedback! That are known issues that we hope to fix some time soon.

    • Tatsu says:

      October 9, 2016

      I would like to see this feature as well.

      • Ekaterina Prigara says:

        October 10, 2016

        These issues have been addressed in WebStorm 2016.2: https://www.jetbrains.com/webstorm/whatsnew/#v2016-2-react
        Please give it a try!

        • Tatsu says:

          October 10, 2016

          I am running WebStorm 2016.2.3 Build #WS-162.1812.21.

          Upon further investigation, I think what I’m seeing is that it correctly handles “props” and “state”, but not “params”.

          Thanks.

          • Dennis Ushakov says:

            October 11, 2016

            Do you mean this.props.params from the react-router?

    • Carsten Dietzel says:

      October 11, 2016

      Yeah, there is. You can define all props in a propTypes-object, see https://facebook.github.io/react/docs/reusable-components.html#prop-validation. Atleast works for me.

  10. Klaus Lynggaard Hougesen says:

    April 6, 2016

    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:

    April 7, 2016

    Hi,

    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:

    May 25, 2016

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

    • Dennis Ushakov says:

      May 27, 2016

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

      • Jay Barra says:

        June 1, 2016

        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:

          June 1, 2016

          Sorry, it’s a known issue, we hope to get it fixed soon: https://youtrack.jetbrains.com/issue/WEB-14576

          • Michael Offenbecher says:

            October 8, 2017

            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:

              October 10, 2017

              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:

          September 7, 2016

          Hey,

          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() {
          return
          {
          hi
          }
          }
          }

          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:

            September 7, 2016

            Completion for lifecycle methods is not yet supported when using extends React.Component, here’s a related issue: https://youtrack.jetbrains.com/issue/WEB-22052 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:

    July 1, 2016

    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?

    • Ekaterina Prigara says:

      July 4, 2016

      Do you have React installed in node_modules or anywhere else in the project?

  14. Michael Caputo says:

    July 13, 2016

    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:

      July 13, 2016

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

      • Tred Reprak says:

        August 14, 2016

        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:

          August 16, 2016

          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: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

          • Ruslan Prokopchuk says:

            September 5, 2016

            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:

              September 5, 2016

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

          • Ruslan Prokopchuk says:

            September 5, 2016

            Thank you!

          • Julian says:

            October 20, 2016

            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:

            October 20, 2016

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

            • Ekaterina Prigara says:

              October 20, 2016

              Good that it’s solved now.

          • Jonathan Moody says:

            November 2, 2016

            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:

              November 2, 2016

              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: https://youtrack.jetbrains.com/issue/WEB-17571

  15. Dean Hristov says:

    July 14, 2016

    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:

    August 11, 2016

    Hi,
    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.

    Thanks!

    • Ekaterina Prigara says:

      August 12, 2016

      Hi! Sorry, what do you mean by backtick auto-formatting? If you’d like to disable adding a pair quote, uncheck this option in Preferences | Editor | General | Smart keys.

  17. George Karanikas says:

    August 26, 2016

    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:

      August 26, 2016

      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:

    November 30, 2016

    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:

    December 1, 2016

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

    • Ekaterina Prigara says:

      December 1, 2016

      Great to hear that 🙂

  20. Taylor says:

    March 19, 2017

    > 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 (https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options). 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:

    April 2, 2017

    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:

      April 3, 2017

      This code style option is not currently supported in WebStorm, but we plan to fix that. Here’s an issue you can follow: https://youtrack.jetbrains.com/issue/WEB-16776
      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:

    April 18, 2017

    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:

      April 18, 2017

      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:

        April 19, 2017

        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:

        April 19, 2017

        Update:

        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:

    May 25, 2017

    Hi,
    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:

      May 25, 2017

      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:

    June 7, 2017

    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:

      June 7, 2017

      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:

    June 14, 2017

    Hi, good post, but there is a broken link:
    (Developing mobile apps with React Native) http://https//blog.jetbrains.com/webstorm/2016/12/developing-mobile-apps-with-react-native-in-webstorm/

    Thank you.

    Brice

    • Ekaterina Prigara says:

      June 14, 2017

      Thanks for noticing. Fixed that.

  26. David says:

    June 20, 2017

    Hey!
    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,
    David

    • Ekaterina Prigara says:

      June 20, 2017

      Hello,
      unfortunately, WebStorm doesn’t support this case now. Here’s a related issue on our tracker: https://youtrack.jetbrains.com/issue/WEB-24773 Please vote for it and follow the updates. We’ll try to add the support in the future, but there is not ETA.

  27. Bunja says:

    August 18, 2017

    The feature is pretty cool

  28. Todd Corley says:

    October 9, 2017

    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:

      October 10, 2017

      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:

        October 10, 2017

        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:

          October 16, 2017

          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:

            October 17, 2017

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

          • Todd says:

            October 17, 2017

            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:

              October 17, 2017

              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:

        November 16, 2017

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

        • Ekaterina Prigara says:

          November 16, 2017

          In WebStorm 2017.3 (now available as a Release candidate) you can disable adding {} and “” in Preferences | Editor | Smart keys.

  29. Rahul Rastogi says:

    October 30, 2017

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

    • Ekaterina Prigara says:

      October 30, 2017

      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:

    November 8, 2017

    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:

      November 9, 2017

      Hi!
      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:

        November 9, 2017

        react-router v3 exports it directly. [It’s explained here in the docs]( https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#link)

        The other package is called react-draft-wysiwyg. [Link](https://github.com/jpuri/react-draft-wysiwyg/tree/master/src/controls/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:

          November 9, 2017

          Whoops, thought this was markdown 🙂

          But you get the idea

        • Ekaterina Prigara says:

          November 9, 2017

          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:

            November 9, 2017

            > 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:

              November 9, 2017

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

  31. Brie says:

    April 30, 2018

    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. https://gist.github.com/brieb/97b3c993b0df904f6a75c48458fa4772
    Would be great if there could also be completion for the props defined in the TypeScript interface.

    Thank you,
    Brie

    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