Set up React IDE with WebStorm9

 

This is a summary of steps to take to set up a React project in WebStorm 9.
 
This setup will enable instant JSX translation using React-tools and instant module packaging with Browserify (Watchify).
 
1. Download and Install WebStorm 9.0
2. Create React web project in WebStorm (Create a new folder)
3. Install package.json: npm init
4. Install Browserify: npm install -g browserify
5. Install watchify: npm install -g watchify
6. Install jQuery, react, bootstrap (and any other JavaScript libraries from npm)

npm install jquery --save
npm install react --save
npm install bootstrap --save

7. Install react-tools from npm for JSX translation: npm install -g react-tools
8. Enable WebStorm Live Edit
9. Install JetBrains IDE Support for Chrome
10. Install React Developer Tools for Chrome
11. Go to http://facebook.github.io/react/html-jsx.html for HTML to JSX converter. (optional for JSX development)

After coding is done: 
12. Run Browserify: browserify main.js -o all.js -d
13. Run JSX translation: jsx --watch src/ build/
14. Run Watchify: watchify main.js -o all.js -d
7. Use WebStorm Live Edit: must run in debug mode (not work very well with Watchify and JSX translation)