{"id":22589,"date":"2016-12-15T11:48:26","date_gmt":"2016-12-15T11:48:26","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=8684"},"modified":"2021-06-11T12:01:35","modified_gmt":"2021-06-11T11:01:35","slug":"developing-mobile-apps-with-react-native-in-webstorm","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2016\/12\/developing-mobile-apps-with-react-native-in-webstorm","title":{"rendered":"Developing Mobile Apps With React Native in WebStorm"},"content":{"rendered":"

React Native<\/a><\/strong> allows you to develop native mobile apps for iOS and Android using JavaScript and React. It\u2019s created by Facebook and used for such well-known apps as Instagram, Airbnb, and now JetBrains\u2019 own YouTrack mobile app<\/a> (which is open-source<\/a>, by the way).<\/p>\n

With WebStorm you can now develop mobile apps with React Native getting all the benefits of WebStorm goodies like code completion for React, Flow support, and a built-in debugger. We believe WebStorm can be a great and powerful tool for development with React Native!<\/p>\n

Let\u2019s see how we can set up a workflow for development with React Native in WebStorm.<\/p>\n

Install React Native CLI<\/h2>\n

Make sure you have a React Native CLI installed on your machine. To install it, run the following command in the Terminal: npm install -g react-native-cli<\/code>.<\/p>\n

The list of tools you need to install to get started with React Native depends on your OS and the mobile platform you\u2019re going to target your app at. Check out React Native’s Getting Started guide<\/a> for detailed installation instructions.<\/p>\n

Creating a new project<\/h2>\n

Now you can create a new React Native project right from the IDE Welcome screen: click Create new project<\/em>, select React Native from the list on the left, enter a project name and click OK.<\/p>\n

\"new-react-native-project\"
\n<\/p>\n

WebStorm will run a project generator and install all the required dependencies.<\/p>\n

Of course you can also open an existing project or check one out from version control.<\/p>\n

We recommend that you exclude android<\/em> and ios<\/em> folders from the project. To do that, right-click on a folder in the Project view and select Mark as Excluded<\/em>.<\/p>\n

\"mark-as-excluded\"<\/p>\n

Running and debugging the app<\/h2>\n

Now that we have our app\u2019s code in the IDE, let\u2019s run it.<\/p>\n

UPD:<\/strong> In WebStorm 2018.1, we have reworked the React Native configuration<\/a>. It now gives you much more flexibility in running the bundler and building the app itself. In the steps below we use WebStorm version 2018.2.<\/p>\n

We\u2019ll need to create a new React Native run\/debug configuration<\/em>. In the Run menu, select Edit configurations\u2026<\/em>, click the +<\/em> button and select React Native<\/em> from the list.<\/p>\n

\"add-a-configuration\"<\/p>\n

To start your React Native app for the first time, you need to do two things: run React Native bundler\/packager and then build and launch an app on a simulator or a device using the react-native run-ios<\/code> or run-android command<\/code>. Only after that, you can start debugging it.<\/p>\n

With the Build and Launch Application <\/em>option checked, WebStorm will do all that for you \u2013 you just need to select the target platform, iOS or Android, make sure the path to the React Native CLI package is correct and click Ok.<\/p>\n

\"react-run-config\"<\/p>\n

If you’re going to run your app on Android, don’t forget to start the Android Virtual Device<\/a> first. You can also run your app on a real Android device connected via USB<\/a> (for that don’t forget to enable USB debugging)<\/a>.<\/p>\n

Now let’s run the created configuration \u2013 click the green debug icon next to the configuration name in the IDE toolbar. WebStorm will start the React Native packager<\/a> first in a new React Native tool window and then will run the react-native run-ios<\/code> or react-native run-android<\/code> command, depending on the selected target platform.<\/p>\n

If the build is successful, you\u2019ll see your app in an emulator.<\/p>\n

\"run-packager\"<\/p>\n

Once the emulator opens for the first time, go to the in-app developer menu<\/a> and select Remote JS Debugging<\/em>.<\/p>\n

\"emulator\"<\/p>\n

WebStorm\u2019s built-in debugger will then connect to the emulator, and you\u2019ll be able to hit the breakpoints you put in your source code.<\/p>\n

\"debugging-the-app\"<\/p>\n

In the debugger you can step through your code, set watches, and explore the call stack and variable values.<\/p>\n

If it’s not the first time you run your app and you haven\u2019t made any changes to the native code since the last build, you don\u2019t really need to rebuild the app \u2013 you can just run bundler, open the app in the simulator and then debug it.<\/p>\n

In this case, create a new configuration (or modify the one you’ve already created) and uncheck the Build and Launch Application<\/em> checkbox in it. When you debug this configuration, WebStorm will run React Native bundler and will wait for you to open an app in the simulator with the Remote debug<\/em> enabled in the app.<\/p>\n

\"\"<\/p>\n

There\u2019s also now more flexibility with running React Native bundler. It\u2019s now listed as a Before Launch task in the React Native configuration. By default, it will run react-native start<\/code>. You can also select an npm task from your project\u2019s package.json that will start the bundler.<\/p>\n

\"\"<\/p>\n

Or if you have bundler already running, you can simply remove this step from the configuration (because you don\u2019t need to run more than one bundler per app).<\/p>\n

If you are using Expo in your app, please see this blog post<\/a> for the steps.<\/p>\n

Coding assistance<\/h2>\n

As you may know, WebStorm has support for React and JSX that will surely be helpful when building a React Native app. This includes: code completion for attributes, events and required properties for React components; navigation to the definition and completion for custom components; refactorings for component names; and lots more. Check out our blog post, Working with React in WebStorm: coding assistance<\/a>.<\/p>\n

WebStorm 2016.3 also adds code completion for React Native StyleSheet properties:<\/p>\n

\"stylesheet-properties\"<\/p>\n

If you\u2019re using Flow in your project, WebStorm can highlight the errors from Flow in the editor. Enable Flow as a JavaScript version in Preferences | Languages & Frameworks | JavaScript<\/em> and specify a path to the Flow executable. Find out more about using Flow in this blog post<\/a>.<\/p>\n

Your WebStorm Team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[601],"tags":[1290,2828,2829],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22589"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/221"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=22589"}],"version-history":[{"count":2,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22589\/revisions"}],"predecessor-version":[{"id":153679,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22589\/revisions\/153679"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22589"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}