Turn: IDE selection and configuration of React Native development

Ext.: https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn= 135e29ddde3050d469be98db815c267e&scene=0&key= 18e81ac7415f67c4bcc2eaac3ca13f8d294ec1b8fa5828d4d7f13f2e81cc62f72e55e828ee04e2002284521336a3766d&ascene=0 &uin=mjc3otu3nzk1&devicetype=imac+macbookpro10%2c1+osx+osx+10.10.5+build%2814f1808%29&version= 11020201&pass_ticket=iyyr6c4vunt0%2bavp7kh4qx0%2f3due6hvy8d0m%2fe3husz%2b3%2bljlkzmzgkeegjnzgof

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.

Atom+nuclide

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 the nuclide is simple, after ensuring that the Atom is installed, perform the APM install nuclide on the command line. Before using nuclide, it is recommended to take a good look at the Xia Guan Network description: https://nuclide.io/docs/quick-start/getting-started/

Webstorm

Webstorm is the most intelligent Javascript integrated development environment developed by the renowned JetBrains company, which can be used for complex client application development and server-side development based on node. js. 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 up the supported Javascript syntax, click WEBSTORM-PR Eferences, select Javascript language version JSX Harmony in the Open dialog box to recognize 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-livetemplate, 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 3

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 the syntax highlighting of many programming languages, has excellent code autocomplete, and has the function of code Snippets (Snippet), which can save common code snippets and call them at any time when needed, greatly improving programming efficiency.

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. This article describes the command installation method, in Sublime Text 3 through the view->show Console Open 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.pat H.join (IPP, PF), ' WB '). Write (by)

The above command creates the required package directory for the installation and downloads the packages control.sublime-package to 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-sublime: Supports JAVASCRIPT,ES6 and JSX syntax highlighting

• React-native-snippets: Supports react native code snippets

You can find babel-sublime by selecting the package Control:install Packages in the Package Control dialog box and entering Babel in the popup dialog box:

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, searching for the react-native-snippets installation in the Install Package dialog box:

After the installation is complete, enter the abbreviation for the code snippet in the Code Editor, for example, we create a new file named Userdetail.js, where you enter RNCC for creating a React Native class, the smart reminder is as follows:

By pressing the ENTER key, the plugin automatically generates the following boilerplate code, which saves a lot of time required for manual input:

In addition to RNCC, other common code snippets are as follows, see the plugin's Github homepage for more details.

Visual Studio Code

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-native, 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 react-native commands quickly, and have smart reminders for React Native APIs, as shown below:

Deco

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 the integrated NPM Install feature, integrated IPhone and IPad simulator, and the rapid generation of awesomeproject when creating new projects, and developers no longer need to execute react-native Init awesomeproject command to generate, the key is if the network is not good, without 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 a Lightbox Open Source Control, if it is used for the first time, Deco will perform the NPM install react-native-lightbox command to first download the installation of this control, and then automatically generate code in the code editing area, and in the right property edit area will have corresponding property values, modifying property values in the property edit area is reflected in the code in real time.

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

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 if your team has both Windows and MAC computers, then Atom + nuclide and Deco won't work.

• 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 are all: https://code.visualstudio.com/Updates#1.2

• Atom 1.8 and 1.9 Beta release: http://blog.atom.io/2016/06/06/atom-1-8-and-1-9-beta.html

• React native Development IDE Installation and configuration: 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/

• New code Artifact Atom Usage Summary: http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/

• Visual Studio Code guide[Chinese version]:http://i5ting.github.io/vsc/

• Sublime Text 3 Build react.js development environment: 1190000003698071

• Using sublime 3 as the development of react native IDE:HTTP://WWW.JIANSHU.COM/P/2DDFFF095E90

Turn: IDE selection and configuration of React Native development