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:
- Working with ReactJS in WebStorm: Linting, refactoring and compiling
- Debugging React apps created with Create React App
- Developing mobile apps with React Native
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 MyComponent.my-class 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:
var $NAME$ = React.createClass({
render: function () {
return (
<div>$END
<pre wp-pre-tag-0="">
lt;/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.
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
Subscribe to WebStorm Blog updates
