Using ReactJS in JavaScript and TypeScript

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
• Enabling ReactJS Support in JavaScript Code
• Enhancing Code Completion with Typed Parameter Information
• Using ReactJS with Typescript

Installing ReactJS

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

Enabling ReactJS Support in JavaScript Code

WebStorm 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.

WebStorm 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 or see a definition in a popup with Ctrl+Shift+I.

In JSX tags, WebStorm 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.

WebStorm 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. WebStorm 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 WebStorm | 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 WebStorm | 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

WebStorm 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.