1. Code Completion
IntelliJ IDEA provides code completion for React API and JSX in JavaScript code. Code completion applies to React methods, React-specific properties, HTML tags and component names, React events, component properties, and more. Learn more from React official website.
To get code completion for React methods and React specific properties, you need the react.js library file somewhere in your project. Usually the library is already in your node_modules folder.
Completing React methods, properties and events By default, the code completion popup is automatically displayed as you type. E.g:
In JSX tags, IntelliJ IDEA provides coding assistance for React-specific properties (like className or classID) and non-DOM properties like key or ref, in addition, auto-completion also works for the names of classes defined in the project's CSS files :
All React events (like onClick or onChange) can also be autocompleted using curly braces (={}):
Code completion also works for JavaScript expressions inside curly braces. This applies to all methods and functions you define:
Code Completion HTML Tags and Component Names IntelliJ IDEA provides code completion for HTML tags and component names that you define in JavaScript or within methods inside other components:
Completion also works for imported components using ES6-style syntax
Completing component properties IntelliJ IDEA provides code completion for component properties defined with propTypes and parses them so you can quickly jump to or preview their definitions:
When you autocomplete the name of the component, IntelliJ IDEA will automatically add all the required properties. IntelliJ IDEA will alert you if certain required properties are missing from component usage.
2. Transfer HTML attributes to JSX
When you copy a piece of HTML code and paste it into JSX using class attributes or event handlers, IntelliJ IDEA automatically replaces those attributes with React-specific attributes (className, onClick, onChange, etc.).
3. Run and debug React applications
The recommended way to start building a new React single page application is to create a React application. Only in this case will your development environment be preconfigured to use webpack and Babel. Otherwise, you need to configure the build pipeline first.
3.1. To run a React application, do one of the following:
In the npm tool window (View|tool window| npm), double-click the start task [see http://www.cnblogs.com/bjlhx/p/8967531.html ]. Thanks to Webpack Hot Module Replacement, when the development server is running, the application will automatically reload whenever you change any source files and save the update.
3.2. Debugging React applications
1》
Wait for the app to compile and the Webpack development server to be ready. Open a browser at http://localhost:3000/ to view the application.
Copy the URL address of the running application (http://localhost:3000/ by default), you will need this URL later when creating a debug configuration.
2" Create a new JavaScript debugging configuration: select Run | Edit Configurations, click, and then select "JavaScript Debuging" from the list. In the run/debug configuration: JavaScript debugging dialog, save the URL (http:/ /localhost:3000/) into the URL field. Save the configuration.
3> Set a breakpoint in the code and start a debugging session by clicking next to the configuration list.
4" When the first breakpoint is hit, switch to the debug tool window and proceed as usual: step through the program, stop and resume program execution, inspect it when paused, explore the call stack and variables, set watches, evaluate variables, see the actual HTML DOM etc.
For more details see: http://www.jetbrains.com/help/idea/react.html#react_code_completion