With WebStorm 2016.3 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!
Let’s see how we can set up a workflow for development with React Native in WebStorm.
Install React Native CLI
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.
The list of tools you need to install to get started with React Native depends on your OS and the mobile platform you’re going to target your app at. Check out React Native’s Getting Started guide for detailed installation instructions.
Creating a new project
Now you can create a new React Native project right from the IDE Welcome screen: click Create new project, select React Native from the list on the left, enter a project name and click OK.
WebStorm will run a project generator and install all the required dependencies.
Of course you can also open an existing project or check one out from version control.
We recommend that you exclude android and ios folders from the project. To do that, right-click on a folder in the Project view and select Mark as Excluded.
Running and debugging the app
UPD: Starting with WebStorm 2017.2.1 there are 2 ways to debug React Native apps: using Node.js as debugging backend or using Chrome. You can select it in the React Native run/debug configuration. In either case, the debugging will take place in WebStorm and no changes to the app’s code are required.
Please note that you can use Node as a debugger process only with Node.js version 7 or below.
Now that we have our app’s code in the IDE, let’s run it.
We’ll need to create a new React Native run/debug configuration. In the Run menu, select Edit configurations…, click the + button and select React Native from the list.
Now select the target platform, iOS or Android, and click OK. Make sure the path to the React Native CLI package is correct.
If you’re going to run your app on Android, don’t forget to start the Android Virtual Device first. You can also run your app on a real Android device connected via USB (for that don’t forget to enable USB debugging).
Now run the created configuration. WebStorm will start the React Native packager first in a new React Native tool window and then will run the
react-native run-ios or
react-native run-android command, depending on the selected target platform. You can leave the packager running in the tool window, but stop and restart configurations for Android and iOS in other tabs.
If the build is successful, you’ll see your app in an emulator.
Once the emulator opens for the first time, go to the in-app developer menu and select Remote JS Debugging.
WebStorm’s built-in debugger will then connect to the emulator, and you’ll be able to hit the breakpoints you put in your source code.
In the debugger you can step through your code, set watches, and explore the call stack and variable values.
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.
WebStorm 2016.3 also adds code completion for React Native StyleSheet properties:
Your WebStorm Team