New WebStorm features for React developers

A few new features have landed in WebStorm today that add nicely to the React workflow. Here they are…

As always, you get auto complete for components that you have imported into the current module (e.g. I have a <Button/> component available in the gif below). But now, when adding that component, it will pre-populate with all of the required props defined on that component. Here my <Button/> component has two required props, label and onClick.

Unfortunately it still defaults to a string for onClick even though I’ve defined it as a function. Little things.

You will also now get a warning if you haven’t supplied all props.

You also get code completion for all props that you have defined on a target component. Here defaultValue and onChange are two props on my <Input/> component.

This time, when I take one of the suggested props, I get an equals sign and curly braces (a small thing but a most welcome improvement).

Finally, the pesky messages telling you that ‘ref’ and ‘key’ aren’t valid attributes are gone (if you hadn’t already suppressed that warning).

So if you write React and haven’t tried WebStorm yet, give it a crack.