{"id":22351,"date":"2015-10-05T11:07:17","date_gmt":"2015-10-05T11:07:17","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=7832"},"modified":"2021-06-11T12:13:13","modified_gmt":"2021-06-11T11:13:13","slug":"working-with-reactjs-in-webstorm-coding-assistance","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2015\/10\/working-with-reactjs-in-webstorm-coding-assistance","title":{"rendered":"Working With ReactJS in WebStorm: Coding Assistance"},"content":{"rendered":"<p><a href=\"https:\/\/facebook.github.io\/react\/\" target=\"_blank\" rel=\"noopener\">ReactJS<\/a> is no doubt one of the trendiest JavaScript libraries released recently and as such is seeing wide adoption.<\/p>\n<p>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.&nbsp;In this blog post we\u2019d like to show how WebStorm can help you write code with React.<\/p>\n<p>More on using React in WebStorm:<\/p>\n<ul>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2015\/12\/working-with-reactjs-in-webstorm-linting-refactoring-and-compiling\">Working with ReactJS in WebStorm: Linting, refactoring and compiling<\/a><\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2017\/01\/debugging-react-apps\">Debugging React apps created with Create React App<\/a><\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2016\/12\/developing-mobile-apps-with-react-native-in-webstorm\">Developing mobile apps with React Native<\/a><\/li>\n<\/ul>\n<p>React introduces <strong>JSX<\/strong>, an XML-like syntax that you can use inside your JavaScript code, but you can also use React in pure JavaScript.<\/p>\n<p>If you\u2019re using JSX, WebStorm will suggest switching language version to<em>&nbsp;React JSX<\/em>&nbsp;so that it may understand JSX syntax in <em>.js<\/em> files. That\u2019s it, now you can write JSX code and enjoy <strong>code<\/strong> <strong>completion<\/strong> for JSX tags,<strong> navigation <\/strong>and<strong> code analysis<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9125\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-switch-to-react-jsx.png\" alt=\"switch-to-react-jsx\" width=\"629\"><\/p>\n<p>You can also switch language version to <em>React JSX<\/em>&nbsp;manually in <em>Preferences | Languages &amp; Frameworks | JavaScript<\/em>.<\/p>\n<p><strong>NB:<\/strong> Once you have <em>react.js<\/em> library file somewhere in your project, WebStorm will provide you code completion for <strong>React methods<\/strong> and <strong>React-specific attributes<\/strong>. By default, the code completion popup displays automatically as you type. For example:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9126\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react-completion.png\" alt=\"react-completion\" width=\"640\"><\/p>\n<p>From your code you can jump to the method definition in the library with <em>Cmd-click (Ctrl+click)<\/em>.<\/p>\n<p>To enhance code completion we recommend that you add a TypeScript definition file for React with <code>npm install --save @types\/react<\/code><\/p>\n<div id=\"reactdts\"><\/div>\n<h3>Component names<\/h3>\n<p>WebStorm can also provide code completion for HTML tags and component names that you have defined inside methods in JavaScript or inside other components.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react_component_competion.png\" alt=\"react_component_competion\" width=\"640\"><\/p>\n<p>Completion also works for imported components with ES6 style syntax:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react_imported_component_completion.png\" alt=\"react_imported_component_completion\" width=\"640\"><\/p>\n<p>From there you can also jump to the component definition with <em>Cmd-click<\/em> (<em>Ctrl+click<\/em> on Windows and Linux) on component name or see a definition in a popup with <em>Cmd-Y<\/em> (<em>Ctrl+Shift+I<\/em>).<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react_quick_definition.png\" alt=\"react_quick_definition\" width=\"640\"><\/p>\n<h3>Attributes and events<\/h3>\n<p>In JSX tags, the IDE provides coding assistance for <a href=\"https:\/\/facebook.github.io\/react\/docs\/tags-and-attributes.html#html-attributes\" target=\"_blank\" rel=\"noopener\">React-specific attributes<\/a> such as <em>className<\/em> or <em>classID <\/em>and <a href=\"https:\/\/facebook.github.io\/react\/docs\/special-non-dom-attributes.html\" target=\"_blank\" rel=\"noopener\">non-DOM attributes<\/a> like <em>key<\/em> or <em>ref<\/em>. Moreover, for class names you can autocomplete classes defined in the project\u2019s CSS files.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react_classname.gif\" alt=\"react_classname\" width=\"640\"><\/p>\n<p>All <a href=\"https:\/\/facebook.github.io\/react\/docs\/events.html#supported-events\" target=\"_blank\" rel=\"noopener\">React events<\/a>&nbsp;like <em>onClick<\/em> or <em>onChange<\/em>&nbsp;can be&nbsp;also autocompleted together with <code>={}<\/code>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8386\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react-events.png\" alt=\"react-events\" width=\"640\"><\/p>\n<p>Of course there is also code completion for JavaScript expressions inside the curly braces. That includes all methods and functions that you have defined:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react_javascript_expression.png\" alt=\"react_javascript_expression\" width=\"640\"><\/p>\n<h3>Component properties<\/h3>\n<p>WebStorm 2016.2 can provide code completion and resolve for component properties defined using <em>propTypes<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8387\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-props-react-640.png\" alt=\"props-react-640\" width=\"640\"><\/p>\n<p>When you autocomplete component name, all its required properties will be added automatically. If the&nbsp;component usage misses some of the required properties, WebStorm will warn you about that.<\/p>\n<h2>Emmet in JSX<\/h2>\n<p>With <a href=\"http:\/\/docs.emmet.io\/cheat-sheet\/\" target=\"_blank\" rel=\"noopener\">Emmet<\/a> 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 <em>MyComponent.my-class<\/em> would expand in JSX into tag with <em>className=&#8221;my-class&#8221;<\/em> and not to <em>class=&#8221;my-class&#8221;<\/em> like it would in HTML.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react_emmet.gif\" alt=\"react_emmet\" width=\"640\"><\/p>\n<h2>Live templates<\/h2>\n<p>Live templates work very similar to Emmet \u2013 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 <em>Preferences | Editor | Live templates<\/em>.<\/p>\n<p dir=\"ltr\">As an example let\u2019s create a live template for creating a new React component:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"default\" data-enlighter-linenumbers=\"false\" data-enlighter-title=\"\">var $NAME$ = React.createClass({\n    render: function () {\n        return (\n            &lt;div&gt;$END\n\n&lt;pre wp-pre-tag-0=&quot;&quot;&gt;<\/pre>\n<p>lt;\/div&gt;<br \/>\n)<br \/>\n}<br \/>\n});<br \/>\nLet\u2019s set the abbreviation to <em>rC<\/em>. With <em>$variable_name$<\/em> syntax, we can set the edit points for variable and function names (we have multiple edit points in one template), and with <em>$END$<\/em> we specify a location of the cursor at the end.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-new_live_template.png\" alt=\"new_live_template\" width=\"640\" name=\"\"><\/p>\n<p dir=\"ltr\">We also need to specify the kind of files in which this template can be invoked; in our case it will be JSX.<\/p>\n<p>Now when you type <em>rC<\/em> and press <em>Tab<\/em>, the code snippet will expand. Type the component name and press <em>Tab<\/em> again to jump to the end edit location:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/10\/webstorm-react_live_template1.gif\" alt=\"react_live_template\" width=\"640\"><\/p>\n<p>Another way to go is to import a set of templates created by community members for development with React in WebStorm. See <a href=\"https:\/\/github.com\/Minwe\/jetbrains-react\" target=\"_blank\" rel=\"noopener\">GitHub<\/a> for details on the installation process.<\/p>\n<p>In a<a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2015\/12\/working-with-reactjs-in-webstorm-linting-refactoring-and-compiling\"> follow-up blog post<\/a> we\u2019ll talk more about the available refactoring options, code quality analysis, and compiling code. Stay tuned!<\/p>\n<p><em>Develop with pleasure!<br \/>\n\u2013 JetBrains WebStorm Team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[601],"tags":[2802,1290],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22351"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/221"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=22351"}],"version-history":[{"count":2,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22351\/revisions"}],"predecessor-version":[{"id":153701,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22351\/revisions\/153701"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22351"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}