Previous | See Also

ReactJS introduces JSX and TSX, an XML-like syntax that you can use inside your JavaScript and TypeScript code respectively.

On this page:

Installing ReactJS

Download the ReactJS Starter Kit and extract the files from the archive.

Enabling ReactJS Support in JavaScript Code

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.

IntelliJ IDEA can also provide code completion for HTML tags and component names that you have defined inside methods in JavaScript or inside other components.

Completion also works for imported components with ES6 style syntax. You can navigate from a component name to its definition with Ctrl+B, Ctrl+Button1 Click or Button2 Click 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 className or classID. Moreover, for class names you can autocomplete classes defined in the project’s CSS files.

Code completion is also provided for JavaScript expressions inside curly braces. Code completion applies to all methods and functions that you have defined.

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.

To get coding assistance with JSX or JavaScript:

  1. Make sure you have the react.js file anywhere under the project root folder, possibly copy it from the downloaded ReactJS Starter Kit after extraction. Alternatively, configure react.js as an external JavaScript library, see Configuring JavaScript Libraries.
  2. Do one of the following:
    • Create a .jsx file to write your code in. IntelliJ IDEA recognizes this file type and provides coding assistance in it.
    • To use the same coding assistance in .js files, change the language level to JSX Harmony: Open the Settings / Preferences Dialog by choosing File | Settings for Windows and Linux or IntelliJ IDEA | Preferences for OS X, and click JavaScript under Languages&Frameworks. On the JavaScript page that opens, choose JSX Harmony from the JavaScript Language Version drop-down list.

Enhancing Code Completion with Typed Parameter Information

To see information on parameters that you can use in a method, configure a TypeScript definition file react.d.ts as a JavaScript library and add it to your project:

  1. Open the Settings / Preferences Dialog by choosing File | Settings for Windows and Linux or IntelliJ IDEA | Preferences for OS X. Expand the Languages&Frameworks node, and then click Libraries under JavaScript.
  2. On the JavaScript. Libraries page that opens, click Download on the toolbar.
  3. In the Download Library dialog box that opens, select react from the list of stubs, and click Download and Install. You return to the JavaScript. Libraries page where the library is added to the list as Global and is already activated.
  4. Copy the react.d.ts file 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:

  1. Add a TypeScript definition file react.d.ts to your project as described above in the section Enhancing Code Completion with Typed Parameter Information or add the react.js to your project.
  2. Write your code in .tsx files.