IDE for React Native Development

I'm currently using Atom and Nuclide. Although they're a bit inconvenient, I like their interface and simple installation. I might try something else later.

Annotation: React Native officially recommends using WebStorm or Sublime Text to write React Native applications.

1. Atom and Nuclide

1) Atom Editor

Atom is an open source editor with a very powerful and perfect experience. The biggest feature of Atom is that you can install many plug-ins to meet our needs.

Download and install from the official website: https://atom.io

Atom.png

2) Nuclide plugin

Nuclide (this link requires scientific Internet access) is an Atom-based integrated development environment provided by Facebook that can be used to write, run, and debug React Native applications.

Click here to read the Nuclide Getting Started documentation.

Directly open the Atom software, click Atom->Preferences to open Setting, then click install, enter nuclide-installer to search, and download it, as shown below:

Nuclide plugin.jpeg

For detailed download and installation instructions, please refer to:

http://blog.csdn.net/hello_hwc/article/details/51612139

2. WebStorm

I believe that those who have worked on the Web front-end must be very familiar with WebStorm IDE. WebStorm is a JavaScript development tool under Jetbrains. It is praised by many Chinese JS developers as "Web front-end development artifact", "the most powerful HTML5 editor", "the smartest JavaScript IDE", etc. It has the same origin as IntelliJ IDEA and inherits the powerful JS functions of IntelliJ IDEA.

The official website of the IDE is: https://www.jetbrains.com/webstorm/. The new version already supports React, so WebStrom is the best IDE in the current development stage, but it is charged, so the rich can ignore it. As for the cracked version, it depends on everyone.

WebStorm.png

WebStorm.pnginterface.png

Official download address: https://www.jetbrains.com/webstorm/download/

I saw an article that wrote a solution (not tried):

After installing webStorm, select the second License server on the activation interface, enter http://idea.lanyus.com in the input box below, and click OK.

3. Sublime Text

Sublime Text is a code editor (Sublime Text 2 is a paid software, but can be tried indefinitely) and an advanced text editor for HTML and prose.

Sublime Text has a beautiful user interface and powerful features, such as code thumbnails, Python plugins, code snippets, etc. You can also customize key bindings, menus, and toolbars. The main features of Sublime Text include: spell checking, bookmarks, a complete Python API, Goto function, instant project switching, multiple selections, multiple windows, and more. Sublime Text is a cross-platform editor that supports Windows, Linux, Mac OS X, and other operating systems.

Sublime Text.png

For download and configuration related to React Native, please refer to the following two articles:

http://www.jianshu.com/p/2ddfff095e90

http://www.jianshu.com/p/bbb2e998a2e2

4. VSCode (trying now, I think the auto-completion is more useful)

Visual Studio Code (VS Code / VSC for short) is a free, open-source, modern, lightweight code editor that supports syntax highlighting, intelligent code completion, custom hotkeys, bracket matching, code snippets, code comparison Diff, GIT, and other features for almost all mainstream development languages. It supports plug-in extensions and is optimized for web development and cloud application development. The software supports Win, Mac, and Linux across platforms and runs smoothly. It can be said to be a conscientious work of Microsoft...

Official download address: https://www.visualstudio.com/en-us/products/code-vs.aspx

Visual Studio Code.png

Plug-in React Native Tools: https://github.com/Microsoft/vscode-react-native

This extension tool (React Native Tools) provides a development environment for React Native projects. You can debug your code, quickly run react-native commands through the command panel terminal, and support code smart completion, object search and browsing, methods, parameters and other React Native APIs.

Install React Native Tools:

1) Call up the extended window

Method 1: Press F1, search for ext, and bring up the extension window

Bring up the extended window @2x.png

Method 2: If there is an extension icon on the left toolbar, click the extension icon directly to bring up the extension window

2) Search and install the React Native Tools plugin. After installing, enable it:

[email protected]

3) Restart the editor to complete.

Debugging

1. Setup debug environment

Click the debug icon in the menu, then click the configure gear-shaped "settings" icon and select React Native (debug environment settings).

VSCode will generate a launch.json file and save it in the project, which will contain some default data configurations, as shown in the following figure:

debug.png

You can modify the configuration information in the above configuration file, or add new items to the list. You can also use other attributes in these configuration information.

For example, you can modify the target attribute to specify the simulator for iOS debugging.

2. Start debug session

To start debugging, select a debug option from the Configuration drop-down box and click the Run arrow or the F5 key.

You can debug your app in an Android emulator, an Android device, or an iOS simulator. The plugin currently supports iOS devices. For more details on debugging with VS Code, see

3. Debugging on iOS Device

Debugging with an iOS device requires completing the following general steps:

①. Change jsCodeLocation IP in APP. For more detailed steps, please click here.

②. Select Debug iOS from the debug configuration drop-down box and press F5

③. Shake your device, open the developer menu, and select "Debug in Chrome"