Develop ReactNative apps in Visual Studio Code
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.
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:
- 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.
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.