Debugging React | IDeaJ – clickety-clack.click

https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

Debugging React apps created with Create React App in WebStorm

Ekaterina PrigaraJanuary 23, 2017

With Create React App you can quickly bootstrap a new React project. And you don’t have to configure anything to get the app running – it comes with the preconfigured dev environment that uses Webpack, Babel, ESLint and other tools.

In this post, we’ll go through the steps required to debug such apps right in WebStorm (or IntelliJ IDEA, PhpStorm, PyCharm, or RubyMine). If you have never used JavaScript debugger in WebStorm before, we recommend watching this video first to learn how to get started.

Open an app generated with create-react-app.
Run npm start to get the app running in the development mode.
You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.
Wait till the app is compiled and the Webpack dev server is ready. Open http://localhost:3000/ to view it in the browser.

Create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug). Paste http://localhost:3000/ into the URL field. Please note that the debugger in WebStorm only works together with Chrome.
Save the configuration, place breakpoints in your code and start a new debug session by clicking the Debug button next to the list of configurations on the top right corner of the IDE.
Once a breakpoint is hit, go to the debugger tool window in the IDE. You can explore the call stack and variables, step through the code, set watcher, evaluate variables and other things you normally do when debugging.

This app is using Webpack Hot Module Replacement by default and that means that when the dev server is running, the app will automatically reload if you change any of the source files and hit Save. And that works also together with the WebStorm debugger! Have a look:

Please take note of these known limitations:

The breakpoints put in the code executed on page load might not be hit when you open an app under debug session for the first time. The reason is that the IDE needs to get the source maps from the browsers to be able to stop on a breakpoint you’ve placed in an original source, and that only happens after the page has been fully loaded at least once. As a workaround, reload the page in the browser.
Webpack in Create React App generates source maps of the type cheap-module-source-map. This kind of source maps do not guarantee the most precise debugging experience. We recommend using devtool: 'source-map' To make changes to the app’s Webpack configuration, ‘eject’ the app (refer to the Create React App manual to learn more).

If you’re using WebStorm 2016 (.1, .2 and .3)

After the third step, in the newly created JavaScript debug configuration you need to configure the mapping between the files in the file system and the paths specified in the source maps on the dev server. This is required to help WebStorm correctly resolve the source maps.

The mapping should be between the src folder and webpack:///src

Add this value to the table with the project structure in the debug configuration like this:

If you’re wondering how we got this mapping, check http://localhost:3000/static/js/bundle.js.map file. This is a source map file for the bundle that contains the compiled application source code. Search for index.js, the main app’s file; its path is webpack:///src/index.js.

ReactUltimate

Last modified: 05 May 2021

React is a JavaScript library for building complex interactive User Interfaces from encapsulated components. Learn more about the library from the React official website.

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

Before you start

Make sure you have Node.js on your computer.
Make sure the JavaScript and TypeScript bundled plugin is enabled on the Settings/Preferences | Plugins page, see Managing plugins for details.

Create a new React application

The recommended way to start building a new React single page application is create-react-app package, which IntelliJ IDEA downloads and runs for you using npx. As a result, your development environment is preconfigured to use webpack, Babel, ESLint, and other tools.

Of course, you can still download Create React App yourself or create an empty IntelliJ IDEA project and install React in it.

Learn more about installing React and creating React applications from the React official website.

Generate a React application with create-react-app

Select File | New | Project from the main menu or click the New Project button on the Welcome screen.
In the New Project dialog, select JavaScript in the left-hand pane.
In the right-hand pane, choose React and click Next.
On the second page of the wizard, specify the project name and the folder to create it in.

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

From the create-react-app list, select npx create-react-app.

Alternatively, for npm version 5.1 and earlier, install the create-react-app package yourself by running npm install --g create-react-app in the Terminal ⌥F12. When creating an application, select the folder where the create-react-app package is stored.
Optionally:
In the create-react-app field, add a custom package to use instead of react-scripts during the project generation, for example:
```
npx create-react-app react-awesome-scripts
```
Copied!

This can be one of the packages forked from react -scripts, for example, react-awesome-scripts, custom-react-scripts, react-scripts-ts, and so on.

IntelliJ IDEA guarantees running and debugging Jest tests only with the react-scripts package.
Optionally:
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.
When you click Finish, 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 JavaScript Debug configurations with default settings for running or debugging your application.

Alternatively, open the built-in Terminal and type:

npx create-react-app <application-name> to create an application.

cd <application-name> to switch to the application folder.

npm start to start the Node.js server.

Download the project dependencies

In the embedded Terminal (⌥F12), type:

npm install
Alternatively, select Run 'npm install' from the context menu of the package.json file in your project root.

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 below. Learn more about adding React to a project from the React official website.

Create an empty IntelliJ IDEA project

Select File | New | Project from the main menu or click the New Project button on the Welcome screen.
In the New Project dialog, select JavaScript in the left-hand pane.

In the right-hand pane, again choose JavaScript and click Next.
On the second page of the wizard, specify the project folder and name and click Finish.

Install React in an empty project

Open the empty project where you will use React.
In the embedded Terminal (⌥F12), type:

npm install --save react react-dom

You can also install the packages on the Node.js and NPM page as described in npm, pnpm, and Yarn.

Start with an existing React application

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

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.

Check out the application sources from your version control

Click Get from VCS on the Welcome screen or select VCS | Get from Version Control from the main menu.
In the invoked dialog, select your version control system from the list and specify the repository to check out the application sources from.

Download the dependencies

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

You can use npm, Yarn 1, or Yarn 2, see npm and Yarn for details.

Code completion

IntelliJ IDEA provides code completion for React APIs and JSX in JavaScript code. Code completion works for React methods, React-specific attributes, HTML tags and component names, React events, component properties, and so on. Learn more from the React official website.

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:

In JSX tags, IntelliJ IDEA provides coding assistance for React-specific attributes, such as className or classID, and non-DOM attributes, such as key or ref. Moreover, auto-completion also works for names of classes defined in the project’s CSS files:

All React events, such as onClick or onChange, can also be completed automatically together with curly braces ={}:

Gif

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

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 also works for imported components with ES6 style syntax:

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:

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.

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

Gif

This also works for TSX:

Gif

To copy HTML code to JSX or TSX "as is", use Paste Simple ⌥⇧⌘V or open the Settings/Preferences dialog ⌘,, go to Editor | General | Smart Keys | JavaScript, and clear the Convert attributes when pasting HTML to JSX files checkbox.

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. The example below shows how you can use the rcjc abbreviation to create a class that defines a new React component:

Gif

Create a React code construct from a snippet

Type the required abbreviation in the editor and press ⇥.
Press ⌘J and choose the relevant snippet. To narrow down the search, start typing the abbreviation and then select it from the completion list.

See Live Templates for details.

View the list of all available React snippets

In the Settings/Preferences dialog ⌘,, click Live Templates under Editor, and then expand the React node.

Emmet in JSX

With IntelliJ IDEA, you can use Emmet 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:

Gif

Navigate through a React application

Besides the basic navigation, IntelliJ IDEA helps you jump between React-specific code elements.

To jump to the declaration of a method or a JavaScript expression inside curly braces {}, select the method or expression and press ⌘B.
To jump to the declaration of a component, select the component name and press ⌘B. Learn more from Go to declaration and its type.
To view component definition, press ⌥Space.
To view quick documentation for a component, press F1. Learn more from JavaScript documentation look-up.
IntelliJ IDEA lets you easily navigate through JSX tags using breadcrumbs and colorful highlighting for the tag tree in the editor gutter. See Navigating with breadcrumbs for details.

Lint a React application

All the IntelliJ IDEA built-in code inspections 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.

For some inspections IntelliJ IDEA provides quick-fixes, for example, suggests adding a missing method. To view the quick-fix popup, press ⌥⏎.

To customize the list of inspections, open the Settings/Preferences dialog ⌘,, 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 and Change inspection severity.

ESLint

Besides providing built-in code inspections, IntelliJ IDEA also integrates with linters, such as ESLint, 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 as well as lint your TypeScript code.

See ESLint for details.

To have ESLint properly understand React JSX syntax, you need 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:

If you created your application with create-react-app, your development environment is already preconfigured to use ESLint.

Install and configure ESLint in a React project

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

npm install --save-dev eslint

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

Add a ESLint configuration file .eslintrc.* to your project. This can be a .eslintrc, .eslintrc.json, or .eslintrc.yaml file, or a file in another supported format, see the ESLint official website for details.
In the Settings/Preferences dialog ⌘,, go to Languages and 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 for details.

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

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.
In the plugins object, add react.

In the rules object, you can list ESLint built-in rules that you would like to enable, as well as rules available via the react plugin.

{
    "parser"
:
    "babel-eslint",
            "env"
:
    {
        "browser"
    :
        true
    }
,
    "ecmaFeatures"
:
    {
        "jsx"
    :
        true
    }
,
    "plugins"
:
    [
        "react"
    ],
            "rules"
:
    {
        "semi"
    :
        2
    }
}

Copied!

Learn more about ESLint and react plugin configuration from the ESLint official website.

Code refactoring in a React application

Besides the common IntelliJ IDEA refactorings, in a React application you can also run Rename for React components and use Extract Component to create new components.

Rename a component

Below is an example of renaming a component that is defined and used in only one file:

Gif

In the same way, you can rename components defined in one file and then imported to another file using a named export:

Gif

Place the caret within the component name and press ⇧F6 or select Refactor | Rename from the main menu of from the context menu.
Specify the new component name in compliance with React naming conventions.

Extract a component

You can create a new React component by extracting the JSX code from the render method of an existing component. The new component can be defined as a function or as a class, see Function and Class Components on the React official website.

Gif

Select the code you want to extract and choose Refactor | Extract Component from the context menu.

Alternatively, go to Refactor | Extract/Introduce | Extract Component on the main menu or press ⌃T and select Extract Component from the popup.
In the dialog that opens, specify the name of the new component and its type. By default, a functional component is created. If you want to define the new component as a class, select Class.
Click OK. The new component will be defined next to the existing one and used in it.
Optionally: use the Move Symbol refactoring to move the new component and all the required imports to a separate file.
Optionally: modify the code templates that IntelliJ IDEA uses for new components. In the Settings/Preferences dialog ⌘,, go to Editor | File and Code Templates, open the Code tab, and update the templates as necessary using the Apache Velocity template language.

Convert a function to a class component

With the Convert to Class Component refactoring, IntelliJ IDEA generates a ES6 class with the name of the function which you want to convert. This class extends React .Component and contains a render() method where the function body is moved. Learn more from the React official website.

Gif

Place the caret anywhere inside the function to convert and select Refactor | Convert to Class Component from the main menu or from the context menu.
Alternatively, press ⌃T and select Convert to Class Component from the popup.

Convert a class to a functional component

With the Convert to Functional Component refactoring, IntelliJ IDEA generates a function with the name of the class which you want to convert and moves the contents of the render() method to the function body.

Gif

Place the caret anywhere inside the class to convert and select Refactor | Convert to Functional Component from the main menu or from the context menu.
Alternatively, press ⌃T and select Convert to Functional Component from the popup.

Destructuring in a React application

Destructuring lets you easily unpack values from arrays and objects into variables. This functionality has a very concise syntax that is often used when you need to pass data in your application.

When working with React class components, consider using the Introduce object/array destructuring intention action. Learn more from Destructuring in JavaScript.

Gif

Run and debug a React application

The recommended way to start building a new React single page application is Create React App. Only in this case your development environment is preconfigured to use webpack and Babel. Otherwise, you need to configure a build pipeline first.

For applications created with Create React App as described above, IntelliJ IDEA generates two run/debug configurations with default settings:

An npm configuration with the default name npm start. This configuration runs the npm start command that launches the development server and starts your application in the development mode.
A JavaScript Debug configuration with the default name Debug Application. This configuration launches a debugging session.

Run a React application

Only for applications created with create-react-app.

Select the npm start run configuration from the list on the toolbar and click next to the list.

Alternatively, run npm start in the Terminal ⌥F12 or double-click the start task in the npm tool window (View | Tool Windows | npm ).
Wait till the application is compiled and the Webpack development server is ready.

The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:3000/. Click this link to view the application.

Thanks to the Webpack Hot Module Replacement, when the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

Debug a React application

Only for applications created with create-react-app.

Set the breakpoints in your code.
Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.
Select the autogenerated Debug Application configuration from the list and click next to the list.

Gif

You can start a debugging session in different ways depending on where your application is running.

Debug applications running on localhost

Set the breakpoints in your code.
Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.
The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:3000/. Hold ⌘⇧ and click this URL link. IntelliJ IDEA starts a debugging session with an automatically generated Debug Application configuration of the type JavaScript Debug.

Gif

Debug applications running on custom URLs

Set the breakpoints in your code.
Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.
The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL address, you will later specify it in a debug configuration. To view your application, just click the link.
Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations on the main menu, click , and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog, paste the saved URL in the URL field and save the configuration.
To launch your newly created configuration, select it from the list of configurations and click next to the list.

When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

Build a React application

You need to set up the build process if you installed React in an existing IntelliJ IDEA project. Learn about various ways to configure a build pipeline for your React application from React official website.

If you created your application with create-react-app your development environment is already preconfigured to use Webpack and Babel.

Test a React application

You can run and debug Jest tests in React applications created with create-react-app. Before you start, make sure the react-scripts package is added to the dependencies object of your package.json.

You can run and debug Jest tests via a run/debug configuration, or right from the editor, or from the Project tool window, see Jest for details.

Create a Jest run/debug configuration

Open the in the left-hand pane, and select Jest from the list. The Run/Debug Configuration: Jest dialog opens.

Alternatively, select a test file in the Project tool window and select Create from the context menu.
Specify the Node interpreter to use and the working directory of the application. By default, the Working directory field shows the project root folder. To change this predefined setting, specify the path to the desired folder or choose a previously used folder from the list.
In the Jest package field, specify the path to the react-scripts package.
In the Jest options field, type --env=jsdom.

Run tests

Select the Jest run/debug configuration from the list on the main toolbar and click to the right of the list.
The test server starts automatically without any steps from your side. View and analyze messages from the test server in the Run tool window.
Monitor test execution and analyze test rest=ults in the Test Runner tab of the Run tool window, see Explore test results for details.

Debug tests

Select the Jest run/debug configuration from the list on the main toolbar and click to the right of the list.
In the Debug tool window that opens, proceed as usual: step through the tests, stop and resume test execution, examine the test when suspended, run JavaScript code snippets in the Console, and so on.

Known limitations

When you open an application during a debugging session for the first time, it may happen that some of the breakpoints in the code executed on page load are not hit. The reason is that to stop on a breakpoint in the original source code, IntelliJ IDEA needs to get the source maps from the browser. However the browser can pass these source maps only after the page has been fully loaded at least once. As a workaround, reload the page in the browser yourself.

Article 2

https://raygun.com/blog/react-debugging-guide/

How to create a counter application with React

To keep things simple, I won’t teach you how to use React. After all, the official React tutorial covers that need well enough.

Instead, I’ll get straight into creating a counter application. To follow along, paste the following code adapted from React hook documentation to src/App.js:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

After pasting the code to the file, you should see a button labeled “Click me”. Pressing it should increment the value visible above the button. See the image below for what the application should look like after it’s running.

How to debug React using Console statements

One of the classic ways to debug an application is to log it. In the web, you can achieve this by using console.log, console.warn, console.error, and similar statements. Then, to examine application state, for example, you would do console.log(count). You’ll then see the result in the browser inspector. Developers use this method because it’s fast to implement and it relies on your reasoning skills. That said, using a browser inspector is a more powerful approach since it gives you a better picture of what’s going on.

Now, you might be wondering how to open the browser inspector. The inspector won’t be shown by default; you have to activate it either using a shortcut or a browser menu (usually named Developer or something similar).

How to debug React using the browser inspector

The browser inspector contains many powerful tools, including a debugger. It can be activated from the code by using a debugger; statement. Writing debugger; is the same as if you were adding a breakpoint to your code using the browser. Here’s what debugging using the browser inspector looks like:

To get started with this, do the following:

Modify the code above so that you have a debugger; line within the Counter function. Place it after the line with const, for example.
Open the code inspector of your browser, if it isn’t open already.
Refresh the page.
Note that instead of running the application, the browser will stop the execution. You should see Paused in debugger or similar wording. Also, the inspector should point to your code now.

Now that the application is in a frozen state, you can inspect it in various ways. Consider the following examples:

Hovering over an already executed statement should show you the current value.
You can step through statements one by one and dive into the execution of functions if you prefer.
The browser shows you the call stack, which reveals how the code arrived in the spot you’re currently debugging.

There’s functionality beyond this, including value watchers. But the above is enough to give you some idea of how powerful debugging within a browser can be.

How to debug using React DevTools

To debug React better, it can be a good idea to install React Developer Tools. It’s an extension for Chrome-based browsers and Mozilla Firefox that implements React-specific debugging functionality. After installing the extension, open the React tab in your browser. You should notice the Elements and Profiler tabs.

How to debug React Element Tree

The Elements tab of the extension lets you see the application element structure and the state associated with it. In the case of our application, you can see the current count if you click on the Counter element. It’s also possible to narrow down the visible elements using a search.

How to debug React performance

In order to debug performance issues, the extension comes with a profiler designed for React. The functionality complements browser functionality (i.e., the Performance tab at the inspector) while providing React-specific insights. To use the profiler, do the following:

Begin recording a session by clicking the red circle
Operate on the application (i.e., press the button a couple of times)
To finish the session, press the circle again. As a result, you should see component-specific timings

In the case of this application, there isn’t much to see, but the functionality is valuable when you’re debugging something complex.

How to debug React networking issues

Usually, an application is connected to a remote backend. That brings a new source of bugs, as the data you receive from a backend might not be what you expect. Or perhaps you made a mistake in your query. To debug these sorts of issues, consider using the Networking tab of the inspector. You’ll see all sent network requests there, and you’ll be able to inspect their contents further.

Doing this work in tandem with another technique, such as inserting a debugger; statement into a good place, can be a decent way to debug these issues.

How to debug React and Redux

If you’re using Redux with your application, Redux DevTools Extension gives you insight into the state of your application at a given time. The extension also allows you to travel in time through different states. It requires a certain amount of setup in your application. but it’s all explained in the documentation of the extension.

How to debug React regressions

Assuming you’re using Git to manage the versioning of your application, there’s a special command that you can use to catch regressions in your application. If you know that a certain functionality worked in the past but is broken now, Git can help you to find the revision where the functionality broke. The command is called git bisect.

Bisection is a type of search where the search space is halved on every search. The way it works is as follows:

First, you tell Git which version was a good one (meaning it worked) using git bisect good.
Start the process with git bisect start. Git will check out the middlemost revision and then ask you if the current revision is good or bad. (Answer with git bisect good or git bisect bad.) Before answering, you should inspect your application visually to determine this.
Eventually, you should reach a result as Git is able to pinpoint where the functionality broke. Now that you know where things went wrong, you can check the changes introduced in the commit and be able to reason better why it broke the functionality.

When bisecting, you should take care to npm install the correct versions for each commit. This is particularly important if the package version changed during the commits, as it’s possible package APIs have changed during updates. Bisecting is also one of the reasons why it’s a good idea to keep your commits relatively small and focused: it’s easier to reason about your code.

Final considerations

When debugging React, you should first determine what you’re debugging. Then, you can decide what techniques to use based on that. Debugging is usually an interactive process, in which you interrogate the application to gain insight into why the behavior doesn’t match expectations.

There are further ways to perform the above in a more automated manner. For example, you could use the React APIs to measure rendering performance while testing or use tests to assert certain behavior. After debugging a fault, writing a test to assert the new behavior can help you avoid regressions in the future.

One last consideration is runtime behavior. Before you can fix an issue, you have to be able to know about it. That’s where services like Raygun Error Tracking come in, as they’ll let you track what happens when the application is in the hands of the user. You’ll want to capture possible issues for developers to fix. After all, if you don’t know what to fix, you can’t fix it.

Debugging React apps created with Create React App in WebStorm

React﻿Ultimate

Before you start﻿

Create a new React application﻿

Generate a React application with create-react-app﻿

Download the project dependencies﻿

Install React in an empty IntelliJ IDEA project﻿

Create an empty IntelliJ IDEA project﻿

Install React in an empty project﻿

Start with an existing React application﻿

Open the application sources that are already on your machine﻿

Check out the application sources from your version control﻿

Download the dependencies﻿

Code completion﻿

Complete React methods, attributes, and events﻿

Complete HTML tags and component names﻿

Complete component properties﻿

Transfer HTML attributes to JSX﻿

React code snippets﻿

Create a React code construct from a snippet﻿

View the list of all available React snippets﻿

Emmet in JSX﻿

Navigate through a React application﻿

Lint a React application﻿

ESLint﻿

Install and configure ESLint in a React project﻿

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

Code refactoring in a React application﻿

Rename a component﻿

Extract a component﻿

Convert a function to a class component﻿

Convert a class to a functional component﻿

Destructuring in a React application﻿

Run and debug a React application﻿

Run a React application﻿

Debug a React application﻿

Debug applications running on localhost﻿

Debug applications running on custom URLs﻿

Build a React application﻿

Test a React application﻿

Create a Jest run/debug configuration﻿

Run tests﻿

Debug tests﻿

Known limitations﻿