{"id":5161,"date":"2016-02-22T10:00:00","date_gmt":"2016-02-22T18:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/?p=5161"},"modified":"2019-10-24T17:39:07","modified_gmt":"2019-10-25T00:39:07","slug":"develop-reactnative-apps-in-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/develop-reactnative-apps-in-visual-studio-code\/","title":{"rendered":"Develop ReactNative apps in Visual Studio Code"},"content":{"rendered":"<p><a href=\"https:\/\/facebook.github.io\/react-native\/\">ReactNative<\/a> is a great way to build native, cross platform app for iOS and Android using JavaScript. We recently <a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/apache-cordova-development-lands-on-visual-studio-code\/\">announced<\/a> the launch of a <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkId=723366\">Visual Studio Code Extension<\/a> that enables you to build, debug and preview Apache Cordova apps. And today we\u2019re pleased to announce the availability a similar <a href=\"https:\/\/aka.ms\/vscode-rn\">extension for ReactNative<\/a>!<\/p>\n<h2>ReactNative vs. Apache Cordova<\/h2>\n<p>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.<\/p>\n<p>ReactNative apps are also written with JavaScript \u2013 or, more specifically, they are written with the <a href=\"https:\/\/facebook.github.io\/react\/index.html\">React\/JSX framework<\/a>. But, rather than run in a Webview like Cordova, code runs in a JavaScript engine that\u2019s bundled with the app. ReactNative then invokes native UI components (e.g. <em>UITabBar<\/em> on iOS and <em>Drawer<\/em> on Android) via JavaScript. This means that you can create native experiences that aren\u2019t possible with Cordova.<\/p>\n<p>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.<\/p>\n<h2>Lighting up the ReactNative authoring experience<\/h2>\n<p>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:<\/p>\n<ul>\n<li>Syntax highlighting and autocomplete capabilities for both JavaScript statements and JSX snippets in the source files.\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/2016-02-22-ReactNative-01.png\"><img decoding=\"async\" style=\"padding-top: 0px;padding-left: 0px;padding-right: 0px;border: 0px\" title=\"Syntax highlighting and autocomplete for ReactNative in Visual Studio Code\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-22-ReactNative-01.png\" alt=\"Syntax highlighting and autocomplete for ReactNative in Visual Studio Code\" width=\"640\" height=\"274\" border=\"0\" \/><\/a><\/li>\n<li>Commands to deploy and debug the app on emulators and devices without having to leave the editor.\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/2016-02-22-ReactNative-02.png\"><img decoding=\"async\" style=\"padding-top: 0px;padding-left: 0px;padding-right: 0px;border: 0px\" title=\"Command to deploy and debug app without leaving the editor\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-22-ReactNative-02.png\" alt=\"Command to deploy and debug app without leaving the editor\" width=\"640\" height=\"274\" border=\"0\" \/><\/a><\/li>\n<li>The ability to set breakpoints and have a full set of debugging tools readily available the editor, like watching variables and inspecting stack traces:\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/2016-02-22-ReactNative-03.png\"><img decoding=\"async\" title=\"Setting breakpoints and debugging\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-22-ReactNative-03.png\" alt=\"Setting breakpoints and debugging\" width=\"640\" height=\"274\" \/><\/a><\/li>\n<\/ul>\n<p>All of these will work directly with your existing ReactNative projects, no changes required!<\/p>\n<h2>How do I get it?<\/h2>\n<p>It\u2019s easy. First, make sure you have Visual Studio Code installed from <a href=\"http:\/\/code.visualstudio.com\">http:\/\/code.visualstudio.com<\/a>. It\u2019s under 50MB, completely free, and runs on Mac OS X, Linux, and Windows. On a decent network connection you\u2019ll have it installed in under 2 minutes!<\/p>\n<p>Then visit the <a href=\"https:\/\/aka.ms\/vscode-rn\">Visual Studio Code Marketplace<\/a> 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 <b>&gt;ext install reactnative<\/b>, and hit Enter.<\/p>\n<p>The extension is also open source and <a href=\"https:\/\/github.com\/microsoft\/vscode-react-native\">available on github<\/a> 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.<\/p>\n<p class=\"sidebar\">Interested in ways to do awesome DevOps with ReactNative apps? Check out our <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=733508\">post on using VSTS, HockeyApp, and CodePush with React Native<\/a>.<\/p>\n<h2>What\u2019s Next?<\/h2>\n<p>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.<\/p>\n<p>You can email me directly at <i>panarasi (@) microsoft.com<\/i> or <a href=\"https:\/\/aka.ms\/react-native-survey\">join our insiders program<\/a>. You can also find us on the <a href=\"http:\/\/www.reactiflux.com\/\">reactiflux<\/a> discord server (look for \u201c<i>lostintangent<\/i>\u201d or \u201c<i>axemclion<\/i>\u201d), usually in the #code-push channel. We look forward to your input!<\/p>\n<p>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.<\/p>\n<table style=\"width: 600px\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"174\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/Parashuram-N.png\" alt=\"\" width=\"160\" height=\"160\" \/><\/td>\n<td valign=\"top\" width=\"426\">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.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019re pleased to announce the availability a similar extension for ReactNative! ReactNative vs. Apache [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4980,1028,561,155],"tags":[237,197,136,9,137,376,124,12,280],"class_list":["post-5161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-mobile","category-open-source","category-visual-studio","tag-net","tag-cordova","tag-css","tag-debug","tag-html","tag-java","tag-javascript","tag-visual-studio","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>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\u2019re pleased to announce the availability a similar extension for ReactNative! ReactNative vs. Apache [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/5161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=5161"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/5161\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=5161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=5161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=5161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}