WebStorm 2017.3 Help

React Native

React Native allows you to 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 React Native Official website.

WebStorm integrates with React Native providing assistance in configuring, editing, linting, running, debugging, and maintaining your applications. In addition, WebStorm also provides code completion for React and Flow symbols.

Before you start, download, install, and configure Node.js as described in Configuring Node.js Interpreters.

Installing react-native-cli globally

Open the built-in Terminal (View | Tool Windows | Terminal) and type npm install -g react-native-cli at the command prompt.

Creating a new React Native application

You can create a React Native application from WebStorm using a dedicated project generator or create an empty WebStorm project and install React Native in it.

Creating a React Native application using a WebStorm generator

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.
  2. In the left-hand pane, choose React Native.
  3. In the right-hand pane, specify the project folder, the Node.js interpreter to use, and the path to the react-native-cli package.
    ws_react_native_generate_app.png
  4. When you click Create, WebStorm generates a React Native-specific project with all the required configuration files.
  5. Install other tools to get started with React Native. 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.

Installing React Native in an empty WebStorm project

To create an empty WebStorm project

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Create 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.

To install React Native in an empty project
Set up the directory structure, install the react, react-native, and other required packages as described on the React Native Official website.

Starting with an existing React Native application

If you are going to continue developing an existing React Native application, open it in WebStorm and download the required dependencies.

If the application sources are already on your machine
Click Open on the Welcome screen or choose File | Open on the main menu. In the dialog that opens, select the folder where your sources are stored.

If the application sources are under version control

  1. Click Check out from Version Control on the Welcome screen or choose VCS | Check out from Version Control on the main menu.
  2. Select your version control system from the list.
  3. In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.

To download the dependencies
Open the embedded Terminal (View | Tool Windows | Terminal) and type npm install at the command prompt.

To exclude the android and the iOS folders from the project

  1. In the Project tool window, select the android or the iOS folder.
  2. On the context menu of the selection, choose Mark Directory As, and then choose Excluded.
    ws_react_native_mark_as_excluded.png

To get a complete React Native development environment
Install other tools to get started with React Native. 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

WebStorm 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, etc. Learn more from React: Completing Code.

Code completion for React Native StyleSheet properties is also available:

ws_react_native_style_sheet_properties_completion.png

If you are using Flow in your project, WebStorm can highlight the errors from this type checker in the editor. Learn more from Configuring Flow in WebStorm and Using Flow in WebStorm.

Last modified: 28 December 2017

See Also