IDE for React Native
Created#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
Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(
urllib.request.build_opener( urllib.request.ProxyHandler()) ); by =
urllib.request.urlopen( 'http://packagecontrol.io/' + 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
·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
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.)
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 https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
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:
file --> import settings --> ReactNative.jar
Copy ReactNative.xml to ~/Library/Preferences/WebStorm11/templates and restart the computer.
How to use
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.
·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.