{"id":6932,"date":"2020-09-23T19:50:44","date_gmt":"2020-09-23T17:50:44","guid":{"rendered":"https:\/\/blog.via-internet.de\/?p=6932"},"modified":"2022-10-07T11:52:31","modified_gmt":"2022-10-07T09:52:31","slug":"react-native-getting-started","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/09\/23\/react-native-getting-started\/","title":{"rendered":"React Native | Getting Started"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">General Readings<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/reactjs.org\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/reactnative.dev\/\">https:\/\/reactnative.dev\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/facebook.github.io\/metro\/\">https:\/\/facebook.github.io\/metro\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/expo.io\/\">https:\/\/expo.io\/<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Create App<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Expo CLI Quickstart<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Assuming that you have&nbsp;<a href=\"https:\/\/nodejs.org\/en\/download\/\">Node 12 LTS<\/a>&nbsp;or greater installed, you can use npm to install the Expo CLI command line utility:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install -g expo-cli<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then run the following commands to create a new React Native project called &#8220;GettingStarted&#8221;:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">expo init app-getting-started\ncd app-getting-started\nnpm start # you can also use: expo start<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">React Native CLI Quickstart<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx react-native init app-getting-started<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">or create new project based on a template<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx react-native init app-getting-started--template react-native-template-typescript<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Start App<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Start Metro<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, you will need to start <a href=\"https:\/\/facebook.github.io\/metro\/\" data-type=\"URL\" data-id=\"https:\/\/facebook.github.io\/metro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Metro<\/a> (<a rel=\"noreferrer noopener\" href=\"https:\/\/facebook.github.io\/metro\/docs\/concepts\/\" data-type=\"URL\" data-id=\"https:\/\/facebook.github.io\/metro\/docs\/concepts\/\" target=\"_blank\">Docs<\/a>), the JavaScript bundler that ships with React Native. Metro &#8220;takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies.&#8221;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx react-native start<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then, visit the Website or the Metro Page (<a href=\"http:\/\/localhost:8081\/\" data-type=\"URL\" data-id=\"http:\/\/localhost:8081\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:8081\/<\/a>)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Start your application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># For running app on iOS\nnpx react-native run-ios\n\n# For running app on Android\nnpx react-native run-android<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>General Readings Create App Expo CLI Quickstart Assuming that you have&nbsp;Node 12 LTS&nbsp;or greater installed, you can use npm to install the Expo CLI command line utility: Then run the following commands to create a new React Native project called &#8220;GettingStarted&#8221;: React Native CLI Quickstart or create new project based on a template Start App Step 1: Start Metro First, you will need to start Metro (Docs), the JavaScript bundler that ships with React Native. Metro &#8220;takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies.&#8221; Then, visit the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9233,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[66,148,67],"tags":[],"class_list":["post-6932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-react-native","category-reactjs"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/09\/React-Native-Getting-Started-Header.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/6932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=6932"}],"version-history":[{"count":2,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/6932\/revisions"}],"predecessor-version":[{"id":9237,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/6932\/revisions\/9237"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/9233"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=6932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=6932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=6932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}