This feature is supported in the Ultimate edition only.
On this page:
- Installing ReactJS
- Enhancing code completion with typed parameter information
- Using ReactJS with TypeScript
Download the ReactJS Starter Kit and extract the files from the archive.
IntelliJ IDEA recognizes JSX code and provides syntax highlighting, code completion, navigation, and code analysis for it. Code completion and navigation is also provided for ReactJS methods. See Auto-Completing Code and Navigating to Declaration or Type Declaration of a Symbol.
Completion also works for imported components with ES6 style syntax. You can navigate from a component name to its definition with Ctrl+B or see a definition in a popup with Ctrl+Shift+I.
In JSX tags, IntelliJ IDEA provides coding assistance for ReactJS-specific attributes such as
classID. Moreover, for class names you can autocomplete classes defined in the project’s CSS files.
IntelliJ IDEA supports Emmet in JSX code thus enabling some ReactJS-specific twists. For example, the abbreviation
div.my-class would expand in JSX to
<div className=”my-class"></div> and not to
<div class=”my-class"></div> as it would in HTML.
- Make sure you have the
react.jsfile anywhere under the project root folder, possibly copy it from the downloaded ReactJS Starter Kit after extraction. Alternatively, configure
- Do one of the following:
- Create a
.jsxfile to write your code in. IntelliJ IDEA recognizes this file type and provides coding assistance in it.
- To use the same coding assistance in
- Create a
Enhancing code completion with typed parameter information
To see information on parameters that you can use in a method, configure a TypeScript definition file
- Copy the
react.d.tsfile to your project.
Using ReactJS with TypeScript
IntelliJ IDEA recognizes and supports ReactJS syntax in TypeScript context (TSX) only in
.tsx files. To use ReactJS with TypeScript code:
- Add a TypeScript definition file
react.d.tsto your project as described above in the section Enhancing Code Completion with Typed Parameter Information or add the
react.jsto your project.
- Write your code in