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.
PyCharm 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, PyCharm 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.
PyCharm supports Emmet in JSX code
thus enabling some ReactJS-specific twists.
For example, the abbreviation
div.my-class would expand in JSX to
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:
.jsxfile to write your code in. PyCharm 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
react.d.tsfile to your project.
Using ReactJS with Typescript
PyCharm recognizes and supports ReactJS syntax in TypeScript context (TSX)
.tsx files. To use ReactJS with TypeScript code:
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.jsto your project.
Write your code in