ReactJS Workflow in WebStorm

Question

Huge fan on Intellij for Java(love it and love shortcuts).

Trying to get my head around using WebStrom for ReactJS.

• Is there any additional tuning that can be done ?
• How to quickly create new react class without copy/paste, what is the short cut ?
• How to navigate around classes quickly ?
• How to use imports with ease e.g. require that with quick understanding of my project structure while I type ?
• How to build gulp from Webstorm ?

Thanks, Peter

Answer 1

• set Javascript language version to 'JSX harmony' in Settings/Languages&Frameworks/JavaScript, make sure that react.js is available in your project (or configured as a library)
• I can suggest creating the corresponding live template (Settings/Editor/Live Templates)
• Navigate/Symbol
• no auto-imports functionality provided. The only help you can get is paths completion
• see http://blog.jetbrains.com/webstorm/2014/11/gulp-in-webstorm-9/

Answer 2

1. Do try jetbrains-react live templates. They are really useful.
2. To get enhance code completion with typed parameter information, add a TypeScript definition file. Go to Preferences | Languages & Frameworks | JavaScript | Libraries, click Download…, search for react and click Download and Install. You can also download all associated react libraries like redux, react-redux etc
3. Check all the React coding assistance provided by WebStorm in this blog post.

Also make sure to use the latest Webstorm 2016.2 as it provides enhanced support for React.