Working with ReactJS in WebStorm: Coding Assistance

Ekaterina Prigara October 5, 2015

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.

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

#JSX #React

Comments below can no longer be edited.

134 Responses to Working with ReactJS in WebStorm: Coding Assistance

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: https://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.
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
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.
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….
- Ekaterina Prigara says:
  January 4, 2016
  That issue has been addressed several months ago (https://youtrack.jetbrains.com/issue/WEB-17686), please use the latest version of PhpStorm.
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
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?
- Ekaterina Prigara says:
  January 8, 2016
  Thanks! Yeah, Live templates are really useful.
  We have a similar request, hope we’ll address it soon, will ping my colleagues: https://youtrack.jetbrains.com/issue/WEB-14576
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.
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.
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.
  - Whippy says:
    July 4, 2016
    Not yet 🙁
    - Ekaterina Prigara says:
      July 5, 2016
      Please try WebStorm 2016.2 Beta: https://www.jetbrains.com/webstorm/nextversion/#react
      - Batist Leman says:
        August 29, 2016
        Seems like this is not solved in 2016.2?
  - Dmitry says:
    November 16, 2016
    Not yet in 2016.3
    - Ekaterina Prigara says:
      November 16, 2016
      Please send a sample code to reproduce the problem to https://youtrack.jetbrains.com/issues/WEB
      Thank you!
- 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.
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
- Ekaterina Prigara says:
  April 6, 2016
  Thanks for your comment. I’ve reported an issue: https://youtrack.jetbrains.com/issue/WEB-21151
  Please follow it for the updates.
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.
- Ekaterina Prigara says:
  April 8, 2016
  Hi, thank you! Here’s a related issue that you can vote for and follow for updates: https://youtrack.jetbrains.com/issue/WEB-20884
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).
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?
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
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?
- Ekaterina Prigara says:
  July 14, 2016
  Hi,
  Unfortunately, WebStorm doesn’t provide any specific support for debugging JSX. Please vote for and follow this feature request: https://youtrack.jetbrains.com/issue/WEB-13986
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.
  - Peter says:
    May 10, 2017
    all u need:
    https://twitter.com/webstormide/status/705688309079654400
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
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？
- Ekaterina Prigara says:
  November 30, 2016
  You need babel-react-preset when using Babel with JSX: https://facebook.github.io/react/docs/installation.html#enabling-es6-and-jsx
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 🙂
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
- Ekaterina Prigara says:
  March 20, 2017
  Sorry, WebStorm doesn’t support properties passed to the component using Redux. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-22957
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).
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.
    - Ekaterina Prigara says:
      April 19, 2017
      Please send us the content of your IDE log folder (menu Help – Show log) to https://youtrack.jetbrains.com/issues/WEB as well as an example of the HTML file with JSX in it. Thank you!
      
      Update: it seems that your issue is similar to this one: https://youtrack.jetbrains.com/issue/WEB-26445
      The fix will be available in WebStorm 2017.1.3 bug-fix update.
      - Oana says:
        April 19, 2017
        Thank you!
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
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.
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.
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.
Bunja says:
August 18, 2017
The feature is pretty cool
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.
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!
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.
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
- lena_spb says:
  May 1, 2018
  Doesn’t currently work, please vote for https://youtrack.jetbrains.com/issue/WEB-31621 to be notified on any progress with it

Working with ReactJS in WebStorm: Coding Assistance

Component names

Attributes and events

Component properties

Emmet in JSX

Live templates

134 Responses to Working with ReactJS in WebStorm: Coding Assistance

Cian says:

Constantin says:

Ekaterina Prigara says:

Ekaterina Prigara says:

Cian says:

Cian says:

Ekaterina Prigara says:

Cian says:

Randy says:

Ekaterina Prigara says:

qingguoing says:

Ekaterina Prigara says:

bunny says:

Ekaterina Prigara says:

Akhilesh says:

Akhilesh says:

Ekaterina Prigara says:

Charles Merriam says:

Ekaterina Prigara says:

Wagner Camarao says:

Ekaterina Prigara says:

Wagner Camarao says:

Constantin says:

Constantin says:

Constantin says:

Constantin says:

Ekaterina Prigara says:

Janek says:

Ekaterina Prigara says:

Marwan Aziz says:

Marwan Aziz says:

Marwan Aziz says:

Janek says:

Ekaterina Prigara says:

Janek says:

Andrey Starovoyt says:

Everett Griffiths says:

Ekaterina Prigara says:

Larry says:

Ekaterina Prigara says:

Scags says:

Ekaterina Prigara says:

Gaetan s says:

Ekaterina Prigara says:

bin Hong says:

Ekaterina Prigara says:

WillemX says:

Ekaterina Prigara says:

Whippy says:

Ekaterina Prigara says:

Batist Leman says:

Dmitry says:

Ekaterina Prigara says:

Tatsu says:

Ekaterina Prigara says:

Tatsu says:

Dennis Ushakov says:

Carsten Dietzel says:

Klaus Lynggaard Hougesen says:

Ekaterina Prigara says:

Deniz Oğuz says:

Ekaterina Prigara says:

Olga says:

Dennis Ushakov says:

Jay Barra says:

Ekaterina Prigara says:

Michael Offenbecher says:

Ekaterina Prigara says:

Ori Avraham says:

Ekaterina Prigara says:

zhangl says:

Ekaterina Prigara says:

Michael Caputo says: