# React

> **TL;DR**
> Required plugins:
>
>
>
> `React`, `Vite` -   the plugins are bundled with IntelliJ IDEA and enabled by default.
>
>
>
> `JavaScript Debugger` -    install the plugin on the Settings | Plugins page, tab Marketplace.     The plugin is available only in IntelliJ IDEA with the Ultimate subscription.

React is a JavaScript library for building complex interactive User Interfaces from encapsulated components. Learn more about the library from the [React official website](https://facebook.github.io/react/).

IntelliJ IDEA integrates with React providing assistance in configuring, editing, linting, running, debugging, and maintaining your applications.

## Before you start

Procedure:

1. Make sure you have [Node.js](http://nodejs.org/)  on your computer.

2. Make sure the JavaScript and TypeScript, React, and Vite required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to [Managing plugins](managing-plugins.html).

## Create a new React application

> **Note:**
> The recommended way to start a new React single page application is the [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) package, which IntelliJ IDEA downloads and runs for you using [npx](https://www.npmjs.com/package/npx). As a result, your development environment is preconfigured to use Vite with React and TypeScript, learn more from the [Vite
> official website](https://blog.logrocket.com/build-react-typescript-app-vite/#benefits-using-react-vite).

### Generate a React application

Procedure:

1. Select `File | New | Project` from the main menu or click the New Project button on the Welcome screen.

2. In the New Project dialog, select Vite in the left-hand pane.

3. In the right-hand part of the wizard, specify the project name and the folder to create it in.

4. In the Node runtime field, specify the Node.js runtime to use. Select a configured runtime from the list or choose Add to configure a new one.

From the React CLI list, select the generator to use.

* Accept the default `[npx create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite)` to have your development environment preconfigured for using Vite.

* Select `[npx create-react-app](https://github.com/facebook/create-react-app)` to have your development environment preconfigured for using webpack, Babel, and ESLint.

* To use a custom previously downloaded generator, click Select and specify the path to the generator in the dialog that opens.

![Create React pp - select a generator](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_create_project_select_generator.png)

5. Optional:

To use TSX instead of JSX, select the Create TypeScript project checkbox. IntelliJ IDEA will generate `.tsx` files for your application and a `tsconfig.json` configuration file.

6. When you click Create, IntelliJ IDEA generates a React-specific project with all the required configuration files and downloads the required dependencies. IntelliJ IDEA also creates an npm start and a JavaScript Debug configurations with default settings for running or debugging your application.

> **Tip:**
> Alternatively, open the built-in Terminal, type `npm create vite@latest` to create an application, and then answer the questions of the wizard, learn more from the [Vite official website](https://blog.logrocket.com/build-react-typescript-app-vite/#creating-vite-project).

### Install React in an empty IntelliJ IDEA project

In this case, you will have to configure the build pipeline yourself as described in [Building a React application](#react_compiling_application) below. Learn more about adding React to a project from the [React official website](https://react.dev/).

Procedure: Create an empty IntelliJ IDEA project

1. Select `File | New | Project` from the main menu or click the New Project button on the Welcome screen.

2. In the New Project dialog, select New Project in the left-hand pane.

3. In the right-hand pane, select JavaScript in the Language area.

4. Name the new project and change its location if necessary, then click Create.

Procedure: Install React in an empty project

1. Open the empty project where you will use React.

2. In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)))  , type:

`npm install --save react react-dom`

## Start with an existing React application

To continue developing an existing React application, open it in IntelliJ IDEA and download the required dependencies.

Procedure: Open the application sources that are already on your machine

* Click Open or Import on the Welcome screen or select `File | Open`   from the main menu. In the dialog that opens, select the folder where your sources are stored.

Procedure: Check out the application sources from your version control

1. Click Clone Repository on the Welcome screen.

Alternatively, select  `File | New | Project from Version Control…` or  `Git | Clone…` or `VCS | Get from Version Control` from the main menu.

Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce.

2. In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. For more information, refer to [Check out a
project (clone)](manage-projects-hosted-on-github.html#clone-from-GitHub).

Procedure: Download the dependencies

* Click Run 'npm install' or Run 'yarn install' in the popup:

![Open an application and download the dependencies](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_npm_yarn_package_run_npm_install.png)

You can use [npm](https://docs.npmjs.com/), [Yarn 1](https://classic.yarnpkg.com/lang/en/), or [Yarn 2](https://yarnpkg.com/), refer to [npm and Yarn](installing-and-removing-external-software-using-node-package-manager.html) for details.

* Alternatively, select Run 'npm install' or Run 'yarn install' from the context menu of `package.json` in the editor or in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) .

### Project security

When you open a project that was created outside IntelliJ IDEA and was imported into it, IntelliJ IDEA displays a dialog where you can decide how to handle this project with unfamiliar source code.

Select one of the following options:

* Preview in Safe Mode: in this case, IntelliJ IDEA opens the project in a preview mode. It means that you can browse the project's sources but you cannot run tasks and script or run/debug your project. IntelliJ IDEA displays a notification on top of the editor area, and you can click the Trust project… link and load your project at any time.

* Trust Project: in this case, IntelliJ IDEA opens and loads a project. That means the project is initialized, project's plugins are resolved, dependencies are added, and all IntelliJ IDEA features are available.

* Don't Open: in this case, IntelliJ IDEA doesn't open the project.

Learn more from [Project security](project-security.html).

> **Tip:**
> Projects created from the Welcome screen or via `File | New | Project` as described in  are automatically considered trusted.

## Code completion

IntelliJ IDEA provides code completion for React APIs and [JSX](https://reactjs.org/docs/introducing-jsx.html) in JavaScript code. Code completion works for React methods, React-specific attributes, HTML tags and component names, [React events](https://facebook.github.io/react/docs/events.html#supported-events), component properties, and so on. Learn more from the [React official
website](https://facebook.github.io/react/docs/dom-elements.html).

To get code completion for React methods and React-specific attributes, you need to have the `react.js` library file somewhere in your project. Usually the library is already in your `node_modules` folder.

### Complete React methods, attributes, and events

By default, the code completion popup is displayed automatically as you type. For example:

![Completion popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_completion_methods_and_attributes.png)

In JSX tags, IntelliJ IDEA provides coding assistance for [React-specific attributes](https://facebook.github.io/react/docs/dom-elements.html), such as `className` or `classID`, and [non-DOM attributes](https://facebook.github.io/react/docs/dom-elements.html), such as `key` or `ref`. Moreover, auto-completion also works for names of classes defined in the project’s CSS files:

![Completion for CSS class names](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_classname.png)

All [React events](https://facebook.github.io/react/docs/events.html#supported-events), such as `onClick` or `onChange`, can also be completed automatically together with curly braces `={}` or quotes `""`.

![Complete React events](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_events.animated.gif)

By default, curly braces are inserted. You can have IntelliJ IDEA always add quotes or choose between quotes or braces based on the type from a [TypeScript
definition file (d.ts)](https://github.com/DefinitelyTyped/DefinitelyTyped). To change the default setting,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Code Style | HTML` and select the applicable option from the Add for JSX attributes list.

![Add for JSX attributes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_add_braces.png)

Completion also works for JavaScript expressions inside curly braces. This applies to all the methods and functions that you have defined.

![Completing JavaScript expressions inside curly braces](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_javascript_expression.png)

### Complete HTML tags and component names

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

![Completion for HTML tags and component names](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_component_completion.png)

Completion also works for imported components with ES6 style syntax.

![Completion for imported components with ES6 syntax](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_imported_component_completion.png)

### Complete component properties

IntelliJ IDEA provides code completion for component properties defined using `propTypes` and resolves them so you can quickly jump or preview their definitions.

![Completion for component properties](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_component_properties.animated.gif)

When you autocomplete the name of a component, IntelliJ IDEA adds all its required properties automatically. If some of the required properties are missing in the usage of a component, IntelliJ IDEA warns you about that.

## Add state to functional components

IntelliJ IDEA suggests a quick-fix to add `[useState](https://react.dev/reference/react/useState)` hooks to functional React components by defining unresolved references in certain places. IntelliJ IDEA automatically inserts `import` statements for the `useState` hook. The state type is inferred from the place where the reference is defined.

> **Note:**
> * The functionality is only available inside functional React component bodies in `.tsx` files.
>
> * The functionality is not available for class-based components.

Procedure:

* Place the caret at an unresolved reference, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Create <unresolved reference> state in < functional component name> component from the list.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_add_state.mp4)

## Add props

IntelliJ IDEA suggests a quick fix to add new properties to React components by defining unresolved references in certain places.

IntelliJ IDEA generates the code of components with the added properties. The type of a property is inferred from the place where the corresponding reference is defined.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_add_props.mp4)

The quick fix can be also applied in class-based components. In such cases, an unresolved reference is replaced with `this.props.${reference_name}` after a new property is inserted.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_add_props_class.mp4)

> **Note:**
> The functionality is only available in `.tsx` files.

Procedure:

* Place the caret at an unresolved reference, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Create <unresolved reference>prop in <component name> component from the list.

![Add props](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_add_props_steps.png)

## Transfer HTML attributes to JSX

When you copy a piece of HTML code with class attributes or on-event handlers and paste it into JSX, IntelliJ IDEA automatically replaces these attributes with React-specific ones (`className`, `onClick`, `onChange`, and so on.)

![Transfer HTML to JSX](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_paste_from_html_to_jsx.animated.gif)

This also works for TSX:

![Transfer HTML to TSX](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_paste_from_html_to_tsx.animated.gif)

When you copy a piece of HTML code that contains single tags and paste it into JSX, IntelliJ IDEA automatically adds a slash `/` at the end of each single tag.

![Transfer HTML to JSX: close single tags](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_paste_from_html_to_jsx_close_tags.animated.gif)

To copy HTML code to JSX or TSX as is, use Paste Simple `Ctrl+Alt+Shift+V` (Windows), `⌘ ⌥ ⇧ V` (macOS), `⌘ ⌥ ⇧ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ V` (macOS System Shortcuts), `Ctrl+Alt+Shift+V` (XWin), `Ctrl+Alt+Shift+V` (GNOME), `Ctrl+Alt+Shift+V` (KDE), `Ctrl+Alt+Shift+V` (Emacs), `Ctrl+V` (Sublime Text), `⌘ V` (Sublime Text (macOS)), `Ctrl+Alt+Shift+V` (NetBeans), `Ctrl+Alt+Shift+V` (Visual Studio), `⌘ ⌥ ⇧ V` (Visual Studio (macOS)), `Ctrl+Alt+Shift+V` (Eclipse), `⌘ ⌥ ⇧ V` (Eclipse (macOS)) or   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | General | Smart Keys | JavaScript`, settings page and clear the Close HTML single tags when pasting code into JSX files and the Convert HTML attribute names when pasting into JSX files checkboxes.

## React code snippets

IntelliJ IDEA comes with a collection of more than 50 code snippets that expand into different statements and blocks of code often used in React apps, including [React
Hooks](https://react.dev/reference/react). The example below shows how you can use the rcjc abbreviation to create a class that defines a new React component:

![Live template for a React component](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_live_template.animated.gif)

### Create a React code construct from a snippet

Procedure:

* Type the required abbreviation in the editor and press `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (NetBeans), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (Eclipse), `⇥` (Eclipse (macOS)).

* Press `Ctrl+J` (Windows), `⌘ J` (macOS), `⌘ J` (IntelliJ IDEA Classic (macOS)), `⌘ J` (macOS System Shortcuts), `Ctrl+J` (XWin), `Ctrl+J` (GNOME), `Ctrl+J` (KDE), `Ctrl+J` (Emacs), `Ctrl+J` (Sublime Text), `Ctrl+J` (Sublime Text (macOS)), `Ctrl+J` (NetBeans), `Ctrl+K, X` (Visual Studio), `⌘ E, L` (Visual Studio (macOS)), `Ctrl+Alt+Shift+J` (Eclipse), `Ctrl+J` (Eclipse (macOS)) and choose the relevant snippet. To narrow down the search, start typing the abbreviation and then select it from the [completion list](auto-completing-code.html).

For more information, refer to [Live Templates](using-live-templates.html).

### View the list of all available React snippets

Procedure:

* In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), click Live Templates under Editor, and then expand the React or React hooks node.

![Live templates: React and React hooks](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_code_snippets.png)

## React directives

IntelliJ IDEA recognizes and highlights the following [React directives](https://react.dev/reference/react-compiler/directives) at the top of a file and within functions:

* [use client](https://react.dev/reference/rsc/use-client)

* [use server](https://react.dev/reference/rsc/use-server)

* [use memo](https://react.dev/reference/react-compiler/directives/use-memo)

* [use no memo](https://react.dev/reference/react-compiler/directives/use-no-memo)

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_directives_highlight.mp4)

## Emmet in JSX

With IntelliJ IDEA, you can use [Emmet](https://docs.emmet.io/cheat-sheet/) not only in HTML but also in your JSX code taking advantage of some special React twists. For example, the abbreviation div.my-class expands in JSX to `<div className=”my-class"></div>` but not to `<div class=”my-class"></div>` as it would in HTML.

![Expand Emmet template in React](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_emmet.animated.gif)

## Navigate through a React application

Besides the [basic navigation](navigating-through-the-source-code.html), IntelliJ IDEA helps you jump between React-specific code elements.

Procedure:

* To jump to the declaration of a method or a JavaScript expression inside curly braces `{}`, select the method or expression and press `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)).

To jump to the declaration of a component, select the component name and press `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)).

> **Tip:**
> Alternatively, use `Ctrl+Click` (Windows), `Ctrl+Click` (macOS), `Ctrl+Click` (IntelliJ IDEA Classic (macOS)), `Ctrl+Click` (macOS System Shortcuts), `Ctrl+Click` (XWin), `Ctrl+Click` (GNOME), `Ctrl+Click` (KDE), `Ctrl+Click` (Emacs), `Ctrl+Click` (Sublime Text), `Ctrl+Click` (Sublime Text (macOS)), `Ctrl+Click` (NetBeans), `Ctrl+Click` (Visual Studio), `Ctrl+Click` (Visual Studio (macOS)), `Ctrl+Click` (Eclipse), `Ctrl+Click` (Eclipse (macOS)): keeping `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (NetBeans), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS)) pressed, hover over the symbol. When the symbol turns into a hyperlink, its declaration will be displayed in the tooltip. Click the hyperlink without releasing the key to open the declaration in the editor.  Learn more from [Go to declaration
> and its type](navigating-through-the-source-code.html#go_to_declaration).

* To view component definition, press `Ctrl+Shift+I` (Windows), `⌥ Space` (macOS), `⌘ ⇧ I` (IntelliJ IDEA Classic (macOS)), `⌘ Y` (macOS System Shortcuts), `Ctrl+Shift+I` (XWin), `Ctrl+Shift+I` (GNOME), `Ctrl+Shift+I` (KDE), `Ctrl+Shift+I` (Emacs), `Ctrl+Shift+I` (Sublime Text), `⌥ Space` (Sublime Text (macOS)), `Ctrl+Shift+I` (NetBeans), `Alt+F12` (Visual Studio), `⌥ Space` (Visual Studio (macOS)), `Ctrl+Shift+I` (Eclipse), `⌥ Space` (Eclipse (macOS)).

![View quick definition of a component in a popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_quick_definition.png)

* To view quick documentation for a component, press `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)). Learn more from [JavaScript documentation look-up](viewing-javascript-reference.html).

![Quick documentation popup for React component](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_quick_doc.png)

* IntelliJ IDEA lets you easily navigate through JSX tags using [editor breadcrumbs](using-code-editor.html#breadcrumbs)  and colorful highlighting for the tag tree in the editor gutter.

![Highlighting and breadcrumbs for JSX tags in a React application](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_jsx_tree_highlighting.png)

### Navigate with the structure view

The Structure tool window and the Structure popup provide you with clearer insights into React code structures, facilitating easier navigation, and promoting better understanding of React components and related elements.

The Structure tool window shows the following React-specific nodes:

* JSX and TSX tags with their names.

* React component nodes show React component declarations. A separate node is created for each class or function that matches a [React component definition](https://react.dev/learn/your-first-component). ![Structure view - component nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_navigation_structure_view_component.png)

* React hook nodes represent React hook declarations. A separate node is created for each function call inside React component that matches [rules of hooks](https://react.dev/warnings/invalid-hook-call-warning). Each node shows the name of a hook and its generic type. The variables initialized by a hook are shown as children under its node. ![Structure view - hook nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_navigation_structure_view_hooks.png) For hooks that return 2 variables in the format `[variableName, setVariableName]` the variable name is displayed gray next to the hook name: ![Structure view - hooks with setVariable](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_navigation_structure_view_hooks_setVariable.png)

* Conditional nodes represent conditionally rendered JSX tag nodes. Conditions that do not contain JSX are not displayed. ![Structure view - conditional nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_navigation_structure_view_conditional.png)

* Attribute nodes represent JSX inside other component props. Attributes that do not contain JSX are not displayed. ![Structure view - attribute nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_navigation_structure_view_attribute.png)

* Array nodes represent arrays that contain JSX. ![Structure view - array nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_navigation_structure_view_array.png)

* Variable nodes represent variables that contain JSX.

* Map nodes represent array maps inside JSX content. ![Structure view - map nodes](https://resources.jetbrains.com.cn/help/img/idea/2026.2/react_navigation_structure_view_map.png)

Procedure:

* To open the Structure tool window, press `Alt+7` (Windows), `⌘ 7` (macOS), `⌘ 7` (IntelliJ IDEA Classic (macOS)), `⌘ 7` (macOS System Shortcuts), `Alt+7` (XWin), `Alt+7` (GNOME), `Alt+7` (KDE), `Alt+7` (Emacs), `Alt+7` (Sublime Text), `⌘ 7` (Sublime Text (macOS)), `Ctrl+7` (NetBeans), `Ctrl+Alt+F` (Visual Studio), `⌃ ⌥ F` (Visual Studio (macOS)), `Alt+7` (Eclipse), `⌘ 7` (Eclipse (macOS)) or go to `View | Tool Windows | Structure` in the main menu.

* To open the Structure popup, press `Ctrl+F12` (Windows), `⌘ F12` (macOS), `⌘ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ 7` (macOS System Shortcuts), `Ctrl+F12` (XWin), `Ctrl+F12` (GNOME), `Ctrl+0` (KDE), `Ctrl+F12` (Emacs), `Ctrl+R` (Sublime Text), `⌘ R` (Sublime Text (macOS)), `Ctrl+F12` (NetBeans), `Alt+\` (Visual Studio), `⌥ \` (Visual Studio (macOS)), `Ctrl+F3` (Eclipse), `⌘ O` (Eclipse (macOS)) or go to `Navigate | File Structure` in the main menu.

* The Structure tool window and the Structure popup are synchronized with the file in the active editor tab. As you move through the structure view, the corresponding code elements in the file are highlighted. Also if you rename an item in the source code, the corresponding node is updated accordingly.

To jump from an item in the structure view to the source code, press `F4` (Windows), `⌘ ↓` (macOS), `F4` (IntelliJ IDEA Classic (macOS)), `F4` (macOS System Shortcuts), `F4` (XWin), `F4` (GNOME), `F4` (KDE), `F4` (Emacs), `F4` (Sublime Text), `F4` (Sublime Text (macOS)), `F4` (NetBeans), `F4` (Visual Studio), `⌘ ↓` (Visual Studio (macOS)), `F12` (Eclipse), `F3` (Eclipse (macOS)).

Learn more from [Source code
navigation: File structure](viewing-structure-of-a-source-file.html).

## Lint a React application

All the IntelliJ IDEA built-in [code inspections](code-inspection.html) for JavaScript and HTML also work in JSX code. IntelliJ IDEA alerts you in case of unused variables and functions, missing closing tags, missing statements, and much more.

![JavaSxript inspections in React application](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_inspection.png)

For some inspections IntelliJ IDEA provides quick-fixes, for example, suggests adding a missing method. To view the quick-fix popup, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)).

To customize the list of inspections,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Editor | Inspections, and disable the inspections you don’t want to see or change their severity levels.  Learn more from [Disable and suppress inspections](disabling-and-enabling-inspections.html) and [Change inspection severity](configuring-inspection-severities.html).

### ESLint

Besides providing built-in code inspections, IntelliJ IDEA also integrates with linters, such as [ESLint](http://eslint.org/), for JSX code.   ESLint brings a wide range of linting rules that can also be extended with plugins. IntelliJ IDEA shows warnings and errors reported by ESLint right in the editor, as you type.   With ESLint, you can also use [JavaScript Standard Style](https://standardjs.com/) as well as [lint
your TypeScript code](linting-typescript.html#ws_eslint_linting_typescript_files_with_eslint_intro).

For more information, refer to [ESLint](eslint.html).

To have ESLint properly understand React JSX syntax, you need [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react). With this plugin, you are warned, for example, when the display name is not set for a React component, or when some dangerous JSX properties are used:

![ESLint with React: errors and warnings are highlighted, the description of a problem is shown in a tooltip.](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_eslint_react.png)

> **Tip:**
> If you [created
> your application with create-react-app](#creating_react_app_with_generators), your development environment is already preconfigured to use ESLint.

Procedure: Install and configure ESLint in a React project

1. In the built-in Terminal (`View | Tool Windows | Terminal`), type:

```
npm install --save-dev eslint
npm install --save-dev eslint-plugin-react
```

2. Add an [ESLint configuration file](eslint.html#ws_eslint_configuration_file_format) to your project.

3. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select Automatic ESLint configuration. IntelliJ IDEA will automatically locate ESLint in your project `node_modules` folder, and then use the default configuration from `.eslintrc.*` file or from `eslintConfig` property in a `package.json`.

Alternatively, select Manual ESLint configuration to use a custom ESLint package and configuration.

See [Activating and configuring ESLint in IntelliJ IDEA](eslint.html#ws_js_eslint_activate) for details.

Procedure: Example of .eslintrc structure (ESLint 1.x with react plugin)

1. In the `ecmaFeatures` object, add `"jsx" = true`. Here you can also specify additional language features you’d like to use, for example, ES6 classes, modules, and so on.

2. In the `plugins` object, add `react`.

3. In the `rules` object, you can list [ESLint built-in rules](http://eslint.org/docs/rules/) that you would like to enable, as well as [rules
available via the react plugin](https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules).

```JSON
{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },

  "rules": {
    "arrow-parens": ["error", "as-needed", {
      "requireForBlockBody": true
    }],
    "react/jsx-props-no-spreading": "off",
    "react/jsx-sort-props": ["error", {
      "reservedFirst": ["key"]
    }],
    "react/require-default-props": "off",
    "react/sort-prop-types": "error",
    "react/state-in-constructor": ["error", "never"],
    "semi-spacing": "warn"
  },
  "overrides": [
    {
      "files": [
        "sample/**",
        "test/**"
      ],
      "rules": {
        "import/no-unresolved": "off"
      }
    }
  ]
}                
```

Learn more about ESLint and `react` plugin configuration from the [ESLint
official website](http://eslint.org/docs/2.0.0/user-guide/configuring.html#specifying-parser-options).

## Build a React application

You need to set up the build process if you [installed React in
an existing IntelliJ IDEA project](#install_react_in_empty_project). Learn about various ways to configure a build pipeline for your React application from [React official website](https://react.dev/).

> **Tip:**
> If you [created your
> application with create-vite](#creating_react_app_with_generators) your development environment is already preconfigured to use Webpack and Babel.

## Use several frameworks within a project

Sometimes you may need to use other frameworks within one React project.

To get context-aware coding assistance in each file, create a configuration file `.ws-context` and specify which framework should be used in each particular file or folder. The settings from this file will override the default configuration.

Procedure:

1. In the project root, select New | File from the context menu and specify `.ws-context` as the file name.

2. In `.ws-context`, use two types of properties:

* `<context-name>` with the context value string

* A GLOB pattern with a context details object

3. Use the following context values:

* `framework`: `vue`, `angular`, `react`, `svelte`, `astro`

* `angular-template-syntax`: `V_2`, `V_17`

* `nextjs-project`: `nextjs`

* `astro-project`: `astro`

* `vue-store`: `vuex`, `pinia`

* `vue-class-component-library`: `vue-class-component`, `vue -property-decorator`, `vue-facing-decorator`

* `jsdoc-dialect`: `jsdoc-typescript`, `jsdoc-closure`

4. Use path nesting for simplicity.

* The last segment of a GLOB path is the file name pattern, it only supports the `*` wildcard.

* If the last segment is a `**` it matches all nested directories and files.

* Top level context properties should have the `/**` pattern.

5. When several patterns match the same file name, the following rules are used for disambiguation:

* Choose the pattern with maximum number of path segments, excluding `**` segments.

* Choose the pattern that is a pure file name pattern, which means that it does not end in `**` or `/`.

* Choose the pattern that was defined first.

### Example

Suppose you have a project with a number of frameworks used in various folders.

![A project with different frameworks](https://resources.jetbrains.com.cn/help/img/idea/2026.2/several_frameworks_context_project_structure.png)

To get context-aware assistance for each file in the project, add the following code to `.ws-context`:

```JSON
{
  "framework": "vue",
  "angular-template-syntax": "V_2",
  "src/**/app/**": {
    "framework": null,
    "app.component.html" : {
      "framework": "angular",
      "angular-template-syntax": "V_17"
    }
  },
  "src/**/p*-editor/*.html" : {
    "framework" : "angular"
  }
}
```

## See also

### Language and Framework-Specific Guidelines

[JavaScript](javascript-specific-guidelines.html)  [Configure JavaScript libraries](configuring-javascript-libraries.html) [TypeScript](typescript-support.html)

### Reference

[JavaScript](settings-languages-javascript.html)

### External Links

[Working with React in WebStorm: Coding Assistance](http://blog.jetbrains.com/webstorm/2015/10/working-with-reactjs-in-webstorm-coding-assistance/)