React

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose React.

3. In the right-hand pane:

   1. Specify the path to the folder where the project-related files will be stored.

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

   3. 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 Alt+F12. When creating an application, select the folder where the create-react-app package is stored.

   4. Optionally:

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

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

tip

Alternatively, open the built-in Terminal and type:

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

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

3. npm start to start the Node.js server.

Create an empty WebStorm project

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Empty Project. In the right-hand pane, specify the application folder and click Create.

Install React in an empty project

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

2. In the embedded Terminal (Alt+F12) , type:

   npm install --save react react-dom

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

3. In the Settings dialog (Ctrl+Alt+S), go to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select Automatic ESLint configuration. WebStorm 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 WebStorm for details.

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 that you would like to enable, as well as rules available via the react plugin.

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

1. Place the caret within the component name and press Shift+F6 or select Refactor | Rename from the main menu of from the context menu.

2. Specify the new component name in compliance with React naming conventions.

1. Place the caret within the name of the state value and press Shift+F6 or select Refactor | Rename from the main menu of from the context menu.

2. Specify the new value name and press Enter. The focus moves to the setter where the new name of the value is suggested. Press Enter to accept the suggestion.

1. 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 Ctrl+Alt+Shift+T and select Extract Component from the popup.

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

3. Click OK. The new component will be defined next to the existing one and used in it.

4. Optionally: use the Move Symbol refactoring to move the new component and all the required imports to a separate file.

5. Optionally: modify the code templates that WebStorm uses for new components. In the Settings dialog (Ctrl+Alt+S), go to Editor | File and Code Templates, open the Code tab, and update the templates as necessary using the Apache Velocity template language.

• 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 Ctrl+Alt+Shift+T and select Convert to Class Component from the popup.

• 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 Ctrl+Alt+Shift+T and select Convert to Functional Component from the popup.

1. 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 Alt+F12 or double-click the start task in the npm tool window (View | Tool Windows | npm).

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

   

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

3. Select the autogenerated Debug Application configuration from the list and click next to the list.

   

   Gif

Debug applications running on localhost

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.

3. The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:3000/. Hold Ctrl+Shift and click this URL link. WebStorm starts a debugging session with an automatically generated Debug Application configuration of the type JavaScript Debug.

   

   Gif

Debug applications running on custom URLs

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.

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

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

5. To launch your newly created configuration, select it from the list of configurations and click next to the list.