IDE for React Native - Alibaba Cloud Developer Forums: Cloud Discussion Forums

  • UID619
  • Fans3
  • Follows2
  • Posts59

IDE for React Native

More Posted time:Aug 19, 2016 9:39 AM
Nuclide is an Atom-based RN plug-in developed by Facebook for React development. Therefore, Nuclide supports syntax completion and type inspection well.
Basically, Nuclide is a plug-in set based on Atom. Therefore, you need to install Atom before using Nuclide. Atom is Github's open source editor. It uses node.js as
the plug-in language.
1. Install Atom.
Download Atom from the official website of Github and install it.
2. Install Nuclide.
Start Atom, choose Preferences > Install, search for  Nuclide and install it.
The current Atom version fails to offer satisfactory performance, contributing to the idea of performing development with Sublime as well as React Native plug-ins.
1. Install Sublime Text 3.
Download Sublime Text from the official website of Sublime Text.
Select the corresponding platform and install Sublime Text.
2. Install Package Control.
In Sublime Text 3, Package Control is used
to install plug-ins.

Press Ctrl + or choose View > Show Console to open the command line and add the following code:
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package
; ipp = sublime.installed_packages_path(); urllib.request.install_opener(
urllib.request.build_opener( urllib.request.ProxyHandler()) );
by =
'' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating
download (got %s instead of %s), please try manual install'
% (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
3. Install the plug-ins required for React Native development.
The following are some plug-ins recommended for React
Native development:
·ReactJS: It supports React development, offers JSX code instructions and
content highlighting. (Official ReactJS introduction)
·Emmet: It is necessary for front-end development and can store and reuse
code blocks. (Emmet introduction)
·Terminal: It is used to open the terminal in Sublime and locate the
current directory. (Shortcut key:
cmd + shift + T)
·react-native-snippets: It provides React Native code snippets. (Official
react-native-snippets introduction)
1. Open Package Control, choose Preferences > Package Control or press the shortcut key Ctrl + Shift + T.
2. Enter Install and select Package Control: install package.
3. Wait a few seconds until a terminal is displayed and specify the plug-in to be installed.
The following figure shows the UI displayed after plug-ins are installed:

(The UI shown in the preceding figure is available after the Material Theme plug-in has been installed.)
If you have done web-related development before, you may be familiar with WebStorm IDE. This IDE is a JavaScriptdevelopment tool of JetBrains, and is called the "web front-end development master piece" by many Chinese JavaScript developers. It shares the same source with Interllij IDEA, and integrates some JavaScript functions of Interllij. Interllij supports React now. Therefore, in the development stage, WebStorm is the best supported IDE.
Setting WebStorm to Support JSX
After installing WebStorm, you are recommended to configure JSX as follows: Choose Settings and configure the settings as shown in the following figure.

WebStorm Live Template for React Native
The WebStorm live template is the most frequently used function of the IDE. To enable WebStorm to support the function, download ReactNative-LiveTemplate.
You can access the official installation and usage instructions using the following link:
git clone
The downloaded file is ReactNative.jar.
The template includes:
1. Component names
2. API names
3. All style sheet attributes
4. Component attributes
You can install the template using either of the following methods:
Installation Methods
Method 1
file --> import settings --> ReactNative.jar
Method 2
Copy ReactNative.xml to ~/Library/Preferences/WebStorm11/templates and restart the computer.
How to use
Common Method
Enter the initial of a component or API name. For example, if you want to enter View, you only need to enter V. View will then be displayed.
Style sheet attribute prompt
Press command + J and enter the initial of an attribute name.
For example,  enter f and fontSize,fontFamily,fontStyle... will appear.
The code prompts do not cover all methods (for example, the prompt for the AppRegistry.registerComponent method is unavailable) and some methods (such as the componentDidMount method for ListView) provided by the React Native framework report the "unused method" alarm. This may cause some inconvenience.

Because WebStorm requires about 500 MB memory. If memory is inadequate, it may not be the best choice.
This article compares three types of React Native IDEs and the comparison indicates that:
·Because the official Nuclide works based on Atom, which offers low performance, it is generally not the first choice for React Native development.
·WebStorm is a JavaScript tool from Interllij, and therefore it is helpful for Android developers to migrate and develop React Native. This IDE needs improvement because prompts are not complete and the "unused method" alarm is reported when some React Native methods are used.
·Sublime runs and closes fast, and offers great development convenience. However, it requires many plug-ins and Package Control takes time to read the plug-ins. In addition, Package Control sometimes cannot read remote plug-in
After using the three types of IDE for some time, I believe that Sublime installed with plug-ins offers a better startup mode and code UI than the other two, and therefore I would recommend Sublime for development.
I will keep updating details about comparison among the three types of IDE and details about development with them.