ReactNative is a great way to build native, cross platform app for iOS and Android using JavaScript. We recently announced the launch of a Visual Studio Code Extension that enables you to build, debug and preview Apache Cordova apps. And today we’re pleased to announce the availability a similar extension for ReactNative!

ReactNative vs. Apache Cordova

Many of you may already be familiar with Apache Cordova as an open-source project that enables web developers to build mobile apps with full access to native APIs and offline support. In a Cordova app, the entire UI executes inside a full-screen WebView where you can leverage the same HTML, CSS and JS frameworks found on the web. But, since the UI is rendered in the WebView, it can be difficult if not impossible to achieve a truly native look and feel.

ReactNative apps are also written with JavaScript – or, more specifically, they are written with the React/JSX framework. But, rather than run in a Webview like Cordova, code runs in a JavaScript engine that’s bundled with the app. ReactNative then invokes native UI components (e.g. UITabBar on iOS and Drawer on Android) via JavaScript. This means that you can create native experiences that aren’t possible with Cordova.

That said, Apache Cordova is presently a more mature and stable technology that lets you write a common UI layer using web technologies, whereas ReactNative is much newer and still requires you to write distinct UI layers. If your app requires native UI and you enjoy the excitement of a rapidly evolving JavaScript platform, then ReactNative might be an option to consider.

Lighting up the ReactNative authoring experience

When we asked ReactNative developers what would make them more productive, they gave us plenty of inspiration for customer-driven features that we could add to Visual Studio Code to light up the authoring experience:

• Syntax highlighting and autocomplete capabilities for both JavaScript statements and JSX snippets in the source files.
  
• Commands to deploy and debug the app on emulators and devices without having to leave the editor.
  
• The ability to set breakpoints and have a full set of debugging tools readily available the editor, like watching variables and inspecting stack traces:
  

All of these will work directly with your existing ReactNative projects, no changes required!

How do I get it?

It’s easy. First, make sure you have Visual Studio Code installed from http://code.visualstudio.com. It’s under 50MB, completely free, and runs on Mac OS X, Linux, and Windows. On a decent network connection you’ll have it installed in under 2 minutes!

Then visit the Visual Studio Code Marketplace to get the ReactNative extension. You can also install it directly from within the editor. Simply invoke the Command Palette (Cmd+P on Mac, Ctrl+P on Windows), type >ext install reactnative, and hit Enter.

The extension is also open source and available on github and we would love your contributions to make it better. You can open issues on github or even better, send us pull request with those awesome features you need.

What’s Next?

Our team is working on delivering great developer tools and would love to hear from you. Whether you run into issues, have comments or ideas for areas related to ReactNative we should be looking at, please do get in touch with us.

You can email me directly at panarasi (@) microsoft.com or join our insiders program. You can also find us on the reactiflux discord server (look for “lostintangent” or “axemclion”), usually in the #code-push channel. We look forward to your input!

As mentioned earlier, this extension is a logical extension of our work that we are doing with Apache Cordova. Our team continues to invest heavily in Apache Cordova and its tooling. We would love to help you with your questions or discuss any ideas that you may have with Cordova, please feel free to ping us about that too.

Parashuram is a Program Manager on the Visual Studio Client team working on cross platform mobile application development using Javascript and other Web technologies. He is also an Apache Cordova committer and contributes to many open source projects.