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