Phpstorm React

admin



With React Native you can develop native mobile applications for iOS and Android using JavaScript and React. It is created by Facebook and used for such well-known apps as Instagram, Airbnb, and now JetBrains’ own YouTrack mobile application. Learn more from the React Native official website.

React

Reading Time: 2 minutes Last updated on 2020-12-01. Learn how to set up IntelliJ to edit a React project, including code formatting and run configurations. For additionally If you put a breaking point in a loop or react life-cycle methods. That debugging is freeze first time.You can click the Resume program button and see the next step of. PhpStorm ignore the TODO and consider it as simple comment, there is a way to insert a TODO with PhpStorm in React JSX file or there is a lack in PhpStorm support for react.

Create new react project

PhpStorm helps you create, edit, lint, run, debug, and maintain your React Native applications. PhpStorm also provides code completion for React and Flow symbols.

Before you start

  1. Make sure you have Node.js on your computer.

  2. Make sure the JavaScript and TypeScript bundled plugin is enabled on the Settings/Preferences | Plugins page, see Managing plugins for details.

Creating a new React Native application

The recommended way to create a React Native application in PhpStorm is to use a dedicated project generator, for example, the React Native CLI.

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

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

  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 React Native list, select npx --package react-native-cli react-native.

      Alternatively, for npm version 5.1 and earlier, install the react-native-cli package yourself by running npm install -g react-native-cli in the TerminalAlt+F12. When creating an application, select the folder where the react-native-cli package is stored.

  4. When you click Create, PhpStorm generates a React Native -specific project with all the required configuration files, downloads the dependencies, and creates a run/debug configuration of the type React Native with default settings..

  5. Install other tools to get started with React Native, for example, an iOS simulator. The list of these tools depends on your operating system and the mobile platform you are going to target your application at. See React Native Getting Started guide for detailed installation instructions.

Starting with an existing React Native application

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

Open the application sources that are already on your machine

Phpstorm React Native

  • Click Open on the Welcome screen or select File | Open Directory 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

  1. Click Get from VCS on the Welcome screen or select VCS | Get from Version Control from the main menu.

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

To exclude the android and iOS folders from the project

  1. In the Project tool window, select the android or the iOS folder.

  2. From the context menu of the selection, choose Mark Directory As, and then choose Excluded.

Install other tools to get started with React Native, for example, an iOS simulator. The list of these tools depends on your operating system and the mobile platform you are going to target your application at. See React Native Getting Started guide for detailed installation instructions.

Coding assistance

PhpStorm 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. See React: Completing Code for more information.

Code completion for React Native StyleSheet properties is also available:

If you are using Flow in your project, PhpStorm can highlight the errors from this type checker in the editor. See Configuring Flow in PhpStorm and Using Flow in WebStorm for details.

Running and debugging a React Native application

You can run and debug your application on a physical device or on a simulator. Before you launch your application, make sure that the simulator is already running or, if you are using a physical device, it is already connected to your computer.

PhpStorm makes running and debugging React Native applications very flexible. For example, if you are starting your application for the first time, you can choose to run the React Native bundler, build the application, and open it on the simulator - all that as part of a running or debugging session. You can also skip launching the bundler if it is already running or refuse building the application if you have not made any changes to its native code since the previous run.

Create a React Native run/debug configuration

  1. On the main menu, go to Run | Edit Configurations, click and select React Native from the list. The Run/Debug Configuration: React Native opens.

  2. Choose whether you want PhpStorm to build and launch the application for you:

    • Select the Build and launch checkbox if you are launching your application for the first time or if you have updated its native code since the last run.

    • Clear this checkbox if you haven't made any changes to the native code of your application since the last build. When you start debugging, PhpStorm waits for you to open your application in the simulator with the Remote debug enabled as described on the React Native official website

    • If your application uses Expo, clear the checkbox because this bundler takes care of the process itself. See Debug a React Native application that uses Expo.

  3. If you selected the Build and launch checkbox, choose the target platform, Android or iOS. Depending on your choice, PhpStorm will run the bundler with react-native run-ios or with react-native run-android.

    Optionally, type the arguments to be passed to React Native, for example, specify the simulator type through the ‑‑simulator flag: ‑‑simulator='iPhone 4s'.

  4. In the Bundler host field, specify the host where the React Native bundler runs, the default value is localhost.

    If you are using Expo, you may need to change the default bundler host to ensure successful connection with the debugger. This connection may fail because PhpStorm by default uses localhost to start debugging while Expo expects 127.0.0.1 or an external IP address depending on what is selected in Connection field of the Metro bundler configuration. See Debugging a React Native application that uses Expo for details.

  5. In the Bundler port field, specify the port on which the React Native bundler runs, by default 8081 is chosen, learn more from the React Native official website.

    If your application uses Expo, you may need to change the port to 19000 or 19001, depending on the Expo configuration. See Debug a React Native application that uses Expo below.

  6. Choose the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.

    Specify the path to react-native-cli and the working directory of the application. Optionally, type the environment variables for react-native run-android or react-native run-ios.

  7. By default, PhpStorm starts the React Native bundler automatically when you invoke the run/debug configuration. If you have already started the bundler from outside PhpStorm, for example, from the command line, you can re-use it without stopping and restarting. Select your bundler in the Before Launch area and click .

Prepare a device or a simulator

If you are using an Android device, you need to prepare it every time you start working with an application.

An iOS simulator has to be installed only once, after that PhpStorm starts it automatically with react-native run-ios.

  • To prepare an Android device, launch an Android virtual device or enable debugging over USB and connect to a physical Android device via USB.

    Learn more from the React Native official website.

  • To prepare an iOS simulator, open the embedded Terminal (Alt+F12) and type:

    npm install --global ios-sim

Run an application

Phpstorm React Jsx Not Working

  • Choose the newly created React Native configuration in the Select run/debug configuration list on the toolbar and click next to it. PhpStorm opens the Run tool window and first starts the React Native bundler in a new React Native tab. After that, the react-native run-ios or react-native run-android command is executed, depending on the selected target platform. If the build is successful, the simulator shows your application:

Debugging an application

With PhpStorm, you can debug applications that use the native React Native bundler and those that use Expo.

In debugging React Native applications, PhpStorm relies on the Chrome runtime, which is used by React Native itself. You can also use DevTools together with PhpStorm. When you initiate a debugging session, PhpStorm starts a new Chrome instance and attaches to it. If you don’t want to see any new Chrome windows, use the Chrome Headless mode.

Debug a React Native application that uses a native bundler

Idea react

  1. Set the breakpoints in your code as required.

  2. Create a new React Native run/debug configuration as described above. If the bundler is already running outside PhpStorm, select it in the Before Launch area and click .

  3. To start your application, select the newly created React Native configuration from the Select run/debug configuration list on the toolbar and click next to it. PhpStorm opens the Run tool window and runs the bundler in a new React Native tab.

  4. When the build is completed and the application appears in the simulator, open the In-App Developer Menu and choose Debug JS Remotely. Learn more from the React official website.

    The built-in PhpStorm debugger connects to the simulator.

  5. When the first breakpoint is hit, proceed with the debugging session — step through the breakpoints, switch between frames, change values on-the-fly, examine a suspended program, evaluate expressions, and set watches.

Debug a React Native application that uses Expo

With PhpStorm, you can start debugging such React Native applications in several ways:

Reactjs Ide

  • Create a script that runs Expo and then specify this script as a Before launch task in the React Native run/debug configuration.

  • First run Expo manually or via a script and then initiate a debugging session without any Expo-related Before launch tasks.

In either case, you may need to change the default bundler port, depending on how Expo is configured.

Phpstorm Active License

  1. Set the breakpoints in your code as required.

  2. Create a new React Native run/debug configuration as described above and change the default settings as follows:

    1. Clear the Build and launch checkbox because this bundler takes care of the process itself.

    2. In the Bundler host field, change the default localhost setting to 127.0.0.1 or an external IP address depending on what is selected in Connection field of the Metro bundler configuration.

    3. In the Bundler port field, change the default 8081 setting to 19000 or 19001, depending on the Expo configuration.

    4. In the Before launch area, select the default Start React Native Bundler task and click .

      To start Expo via a script automatically, click and select Run npm script from the list.

      In the NPM Script dialog that opens, select the npm script that starts Expo.

  3. Select the newly created configuration and click .

  4. Open your Expo client application on your phone or simulator, select the current application, and enable remote debugging, learn more from the Expo official website.

  5. When the first breakpoint is hit, proceed as when debugging an application that uses a native bundler.

To configure Chrome Headless in PhpStorm

The Headless mode is supported for Chrome versions 59 and later on macOS and Linux and for versions 60 and later on Windows.

Phpstorm Reactive

  1. Click next to the Browser for debugging field. The Web Browsers dialog opens.

  2. Select Chrome, click , and rename the copied configuration, for example, to Chrome Headless.

  3. Select the new browser configuration, click , and type --headless for macOS and Linux or --headless --disable-gpu for Windows in the Chrome Settings dialog.

  4. In the run/debug configuration, choose the new Chrome Headless configuration from the Browser for debugging list.

Skip to end of metadataGo to start of metadata
PHP InspectionsBugWI-58588False positive 'Condition is never matched' in match expression when one of inferred types of match argument is empty or mixed
Plugin: Deployment _ FTP..BugWI-57672Change help tooltip in deployment options
Code Analysis. DuplicatesBugIDEA-255779Code duplicates in headless mode does not work in IntelliJ IDEA 2020.2.3
Core. IDE SettingsFeatureIDEA-247100Sync IDEA platform SDKs with those installed by asdf-java
BugIDEA-255402'Default project directory' setting is ignored
Core. IndexingBugIDEA-259783shared-indexes: unload exception in JDKs
Core. InstallationExceptionIDEA-257865CCE at com.intellij.database.actions.AddDataSourceFromPath$1.<init>
Core. Navigation and SearchBugIDEA-259121'Go to File' shows a lot of directories first but no files
Core. Password ManagementBugIDEA-258912OSX Keychain is not available on Apple ARM chips (aarch64)
Core. Project SettingsBugIDEA-260248Project Structure dialog: changes in module name aren't applied if module dependencies were changed at the same time
BugIDEA-262628Trusted host is not recognized if recorded with protocol
BugIDEA-260145Cannot rename module with custom (i.e. non project-default) JDK
BugIDEA-260512Android facets are gone
BugIDEA-249398Persistent AddDiffException on project open after quitting IDEA
PerformanceIDEA-252694Freeze during processing changed project configuration files
CosmeticsIDEA-263464The 'trust host' checkbox label in the Trust And Open Gradle/Maven Project dialog
Core. Run. ConfigurationsBugIDEA-261259Alternative coverage runner option disappears at reopening
BugIDEA-256715'Repeat N times' option in JUnit run configuration is shown twice
BugIDEA-256734Invalid got it tooltip for 'Repeat N times'
BugIDEA-259609'<no module>' can not be selected
BugIDEA-261930Run configuration's working directory disappeared after setting it to an empty value
CosmeticsIDEA-260033[new run config UI] extra artifacts on 'Got it' tooltip
Core. Run. TargetsBugIDEA-258084Run Targets: JUnit: attempt to run 'all in package' run configuration fails with SSH target
Editor. Diff and MergeBugIDEA-257651Diff view detects big diff but change was only small
Lang. MarkdownBugIDEA-258796Unnecessary backslash escape in triple-backticked bash block
Lang. XPath and XSLTBugIDEA-207408XSLT debugger broken on Java 9+
Tools. DockerBugIDEA-259303Docker. Settings on the Tools page are wrong red marked
BugIDEA-259400Log spamming by Docker integration when host is not available anymore
User InterfaceBugIDEA-255506Inline debugger dialog incorrectly sized on Ubuntu
BugIDEA-257834Cannot open cloned project while another one is being opened
User Interface. Embedded Browser (JCEF)BugIDEA-259096JCEF: window.cefQuery_XXXXXX_XX is not a function for query created after the browser is shown
User Interface. FocusBugIDEA-259513Extra editor tab lose focus when switch between source/header
User Interface. GraphicsUsabilityIDEA-256044Close All But Pinned Broken / Missing
Version ControlBugIDEA-169090Wrong highlighting of copy-pasted fragment in editor gutter
BugIDEA-251317Viewing a diff from 'Apply Patch' dialog sometimes shows a weird error
Version Control. GitBugIDEA-251265Search everywhere doesn't find action Annotate with Git Blame by request 'git blame'
BugIDEA-253049Git Staging Area: 'Delete Files from Git' dialog shouldn't pop up on deleting unversioned files
BugIDEA-257461Missing arrows in stash camper window
Version Control. LogUsabilityIDEA-254354Branch list doesn't focus item on right click
DB IntrospectionBugDBE-12264Code: 417, e.displayText() = DB::Exception: Expected ANY or ALL in JOIN section, because setting (join_default_strictness) is empty, e.what() = DB::Exception
TaskDBE-12513Error while introspecting H2 database: Syntax Error
DB RefactoringBugDBE-12422Renaming MySQL JSON column with default value
SQL CompletionExceptionDBE-12561Throwable at com.intellij.sql.psi.impl.SqlImplUtil.quoteIdentifier
SQL HighlightingFeatureDBE-12473Better highlighting in Run Configurations
FeatureDBE-12470Support MariaDB Compound Statements outside of Stored Programs
BugDBE-12492Ambiguous column name isn't reported in qualified with CTE name
BugDBE-12371MariaDB SQL dialect: Incorrect handling of 'FOR SHARE' and 'RETURNING'
BugDBE-12493Incorrect syntax with min_active_rowversion
BugDBE-12528TODO comments ignored in procedure bodies for PostgreSQL
BugDBE-12499Can't pass multiple values in the ROWS FROM clause
BugDBE-12500Can't use type cast inside 'PARTITION OF' clause
BugDBE-12553Analytic functions are marked as error for H2
HTMLBugWEB-36210Allow ARIA accessibility attributes in SVG elements
BugWEB-49001Support data-* attribute in SVG 2.0 files
JavaScriptBugWEB-49156Incorrect syntax error 'yield is not allowed as identifier in strict mode' in a generator function
BugWEB-49307Opening project in new version of IDE changes settings of JavaScriptSettings component in .idea/misc.xml
PerformanceWEB-48983Webstorm 2020.3.x MacOS slow and high CPU compared to 2020.2
TaskWEB-49259Show suggestions from string literals only on Ctrl-Space
JavaScript. FrameworksBugWEB-48038No autocompletion for makeStyles/createStyles
BugWEB-49137Quick fix 'Add import statement' doesn't work for 'React'
BugWEB-49135Incorrect import suggestions for React methods
Unit TestsBugWEB-48569Error debugging Mocha tests run with Vue CLI due to 'Unknown argument: jobs'
BugWEB-49314Cannot debug karma v6 test code (error in karma-intellij-debug.js)