My React Native Skill Tree Lighting Program のreact Native developing IDE selection and configuration

@author ASCE1885 's Github Weibo CSDN
This article starts with the InfoQ mobile technology public number: mobile development front
due to potential commercial purposes, the full text reprint license is not open without permission, thank you!

React Native for more than a year, many companies have online products or small range of test water, or a wide range of applications, many companies or developers in the React Native ecosystem to make their own contribution. The development of React Native is basically Javascript + system native Development language (Java,objective-c,swift), the IDE of native language development has no redundant choice, Android platform can only use Android Studio (Don't tell me you're still using Eclipse), the IOS platform only uses XCode, and the IDE's choice for developing Javascript is much more, from the official FaceBook Atom+nuclide, to the same series as the Android Studio Javascript IDE Webstorm to the powerful Sublime Text 3, as well as Microsoft's release of Visual Studio Code and Decosoftware dedicated to React Native's open source IDE Deco , even vim,nodepad++ and so on, can be used to develop React Native, the only premise that can support the identification of Javascript syntax, identify JSX and React Native API smart reminders. Next, let's introduce the configuration and selection of the five most commonly used Ides.

Atom1+nuclide2

Atom is a next-generation programming tool developed by Github that supports Windows, Mac OS X, and Linux on three desktop platforms, free and open source. Atom supports code highlighting in a variety of programming languages, with powerful code completion, which can greatly improve programming efficiency, and Atom is essentially a text editor, not an IDE, so you need to work with nuclide to develop React Native.

Nuclide is a plug-in IDE developed by Facebook based on Atom and can be used to develop React Native,ios and WEB applications that currently do not support the Windows platform and support only Mac OS X and Linux.

Nuclide has built-in support for React Native, including code completion, code diagnostics, etc., which are code-complete:

Nuclide is the official Facebook React Native IDE, support for React Native should be the best, so recommend this for everyone, if it doesn't stutter when it's running on your computer. The installation of nuclide is simple, after ensuring that the Atom is installed, execute it on the command lineapm install nuclide. Before using nuclide, it is recommended to take a good look at the description of the Xia Guan Network 3.

WebStorm4

Webstorm is the most intelligent Javascript integrated development environment developed by the renowned JETBRAINS5 company, which can be used for complex client application development as well as NODE.JS6-based service-side development. If you've ever developed an Android app using Android Studio, you'll be sure that Webstorm's interface is familiar, right, because Webstorm and Android Studio are jetbrains masterpieces. Webstorm supports Windows, Mac OS X, Linux three desktop platforms, but unlike Android Studio, which can be used for free, Webstorm is a paid-for, only 30-day trial period.

Since React Native is based on React, and React is using JSX syntax, before using webstorm to develop React Native, we first need to set the supported Javascript syntax, click on theWebStorm-Preferencesopen pair dialog box, selectJavascript language versiontoJSX Harmonyrecognize JSX in the Code Editor, as shown in:

Of course, to this point, you can only make the editor to recognize the JSX syntax of the Javascript code, will not cause Code red, but for the React Native API name, component name, etc. will not be smart reminders and auto-completion, because currently webstorm only support React syntax, not Supports React Native syntax. To solve this problem, we can use an open source plugin: Reactnative-livetemplate7, follow the instructions above Github to install the plug-in and restart Webstorm, then enter the React Native component or API in the editor Of the first letter, will automatically associate with the corresponding components, as shown below, a lot of convenience. If you feel that this plugin is imperfect in the process of use, you can also submit your pull Request on Github to contribute your share of the effort.

Sublime Text 38

Sublime Text 3 is a widely used code editor that supports Windows, Mac OS X, Linux three desktop platforms, which are paid apps but are currently available for an indefinite trial. It supports syntax highlighting in a variety of programming languages, has excellent code autocomplete, and has code snippets (Snippet
), it can save frequently used code snippets and call them at any time when needed, greatly improving the efficiency of programming.

Sublime Text 3 The power of the support of its plug-in mechanism, through the package control function, developers can install a variety of plug-ins, by default, Sublime Text 3 does not have integrated package control, we need to install ourselves. Package Control has command installation and manual installation of two ways, it is recommended to choose the command to install, you can refer to the official website Installation Guide 9. This article describes the command installation method, in Sublime Text 3 byView->Show Consoleopening the command line, execute the following command:

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), Span class= "hljs-string" > ' WB ' ). Write (by)

The above command creates the required package directory for the installation and downloads itPackage Control.sublime-packageto the directory. After the installation is complete, you can find the package Settings and two submenu under the Preferences menu.

In Sublime Text 3, React Native development-related plugins include:

• Babel-sublime10: Supports JAVASCRIPT,ES6 and JSX syntax highlighting
• REACT-NATIVE-SNIPPETS11: Supports react native code snippets

You can find babel-sublime by selecting it in the Package Control dialog boxPackage Control:Install Packagesand typing it in the popup dialog boxBabel:

After the installation is complete, you need to enable it, as shown in the menu action:

The React-native-snippets plug-in is also installed through the package Control and is searched for installation in the Install Package dialog boxreact-native-snippets:

After the installation is complete, enter the abbreviation for the code snippet in the Code Editor, for example, we create a newUserDetail.jsfile named, where we enter thernccclass that creates a React Native, the smart reminder is as follows:

By pressing theEnterkey, the plugin automatically generates the following boilerplate code, saving a lot of time required for manual input:

 
‘use strict‘;

import React, { Component } from ‘react‘;

import {
  StyleSheet,
  View,
} from ‘react-native‘; class UserDetail extends Component {
  render() { return ( <View /> );
  }
}

const styles = StyleSheet.create({

});

export default UserDetail;

In additionrnccto the other common code snippets shown below, see the plugin's Github homepage for more details.

Visual Studio Code12

Visual Studio Code is a lightweight, open source WEB development environment that Microsoft has launched, supporting development in more than 30 languages, while supporting Windows, Mac OS X, and Linux's three main desktop platforms. For the development of React Native, Microsoft provides a special plug-in: Vscode-react-native13, according to the official website instructions for the installation of plug-ins. This plugin allows developers to debug React Native code in VS code, execute commands quickly,react-nativeand have smart reminders for React Native APIs, as shown below:

Deco14

Deco is a recently released open source IDE specifically built for React Native that currently only supports the MAC OS X platform. It encapsulates features that are often used in the development of React Native, such as integrationnpm installfeatures, integrated IPhone and IPad simulators, rapid generation of new projects,AwesomeProjectdevelopers no longer need to executereact-native init AwesomeProjectcommands to generate, and the key is that if the network is not good, it eliminates A long wait.

The most notable feature of Deco, which distinguishes itself from other Ides, is the support of drag-and-drop generation code and visual editing of commonly used controls, both React Native native controls, and some well-known open source controls, of course, where the number of Deco integrations is still relatively small, as shown by dragging aLightboxOpen source Control, if it is used for the first time, Deco executes thenpm install react-native-lightboxcommand to download and install the control first, and then automatically generates the code in the code editing area, with the corresponding property values in the property edit area on the right and the property values in the property edit area, which is reflected in the code in real time.

More intuitive to feel you can download your own Deco execution, or go to the official website to watch a 30-second demo video 15.

Summarize

This article introduces the current development of React Native a few of the mainstream IDE, you can choose according to their own situation, of course, team development is recommended to use a unified IDE. Which IDE to choose, first depends on the hardware configuration of your team and the attitude to use the paid software, then the IDE's features.

• If your team is using MacBook Pro for development, then the five Ides above are available, and atom+nuclide and Deco will not work if the team has both Windows and MAC computers.
• If your team can afford a paid application, then Webstorm is a good choice, especially for Android developers who have previously developed a seamless interface between Android Studio and Webstorm.
• If none of the above two conditions are met, then only Sublime Text 3 and Visual Studio Code are left. As you can see from the introduction above, these two models are also very powerful and how to choose depends on yourself.

Expand Reading
"VS Code (1.2.0) latest highlights and features full introduction" 16
"Atom 1.8 and 1.9 Beta release" 17
"React native development IDE Installation and Configuration" 18
"The new Code artifact Atom Usage Summary" 19
"Visual Studio Code guide[Chinese Version" 20
"Sublime Text 3 Build react.js development environment" 21
"Using sublime 3 as the development IDE for react native" 22

Please pay attention to my public number, focus on the original or share the Android,ios,reactnative,web front-end mobile development in the field of high-quality articles, including the industry's latest developments, cutting-edge technology trends, open source function libraries and tools.

2. https://atom.io/?
4. https://nuclide.io/?
6. Https://nuclide.io/docs/quick-start/getting-started/?
8. https://www.jetbrains.com/webstorm/?
10. https://www.jetbrains.com/?
12. https://nodejs.org/en/?
14. Https://github.com/virtoolswebplayer/ReactNative-LiveTemplate?
16. Https://www.sublimetext.com/3?
18. Https://packagecontrol.io/installation#st3?
20. Https://github.com/babel/babel-sublime?
22. Https://github.com/Shrugs/react-native-snippets?
24. Https://www.visualstudio.com/en-us/products/code-vs.aspx?
26. Https://github.com/Microsoft/vscode-react-native?
28. https://www.decosoftware.com/?
30. https://www.decosoftware.com/?
32. http://geek.csdn.net/news/detail/80215?
34. Http://geek.csdn.net/news/detail/80212?
36. http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BC%80%E5%8F%91ide%E5%AE% 89%e8%a3%85%e5%8f%8a%e9%85%8d%e7%bd%ae/?
38. http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/?
40. Http://i5ting.github.io/vsc/?
42. 1190000003698071?
44. Http://www.jianshu.com/p/2ddfff095e90?

My React Native Skill Tree Lighting Program のreact Native developing IDE selection and configuration