{"id":2089,"date":"2018-06-04T15:17:35","date_gmt":"2018-06-04T09:47:35","guid":{"rendered":"http:\/\/www.aqbsolutions.com\/?p=1702"},"modified":"2025-04-16T13:39:40","modified_gmt":"2025-04-16T13:39:40","slug":"steps-to-making-an-app-with-react-native","status":"publish","type":"post","link":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/","title":{"rendered":"Steps to making an app with React Native to print the word &#8220;Hello World&#8221;"},"content":{"rendered":"<p><strong>Introduction<\/strong><\/p>\n<p><strong>What is REACT NATIVE?<br \/>\n<\/strong><br \/>\nReact Native helps you to create real-time mobile apps with the help of javascript alone, which is supportable for both Android and iOS platforms. Just by coding once, the REACT Native apps\u00a0are available for both iOS and Android platforms which helps in saving development time.<\/p>\n<p>React Native is a framework that builds a hierarchy of UI components to build the JavaScript code. It has a set of components for both iOS and Android platforms to build a mobile application with the native look and feel.<br \/>\nIt has a great popularity, backed by Facebook and has a huge community support today.<\/p>\n<p><strong>Why is it used?<\/strong><\/p>\n<p>React Native is widely used for the following reasons :<\/p>\n<ul>\n<li><strong>Code once <\/strong>:<br \/>\nOne of the most important reasons why React native is used is because developers have to write just one set of javascript code to enjoy the performance of the React Native mobile applications<\/li>\n<li><strong>Cross-platform usage<\/strong> :<br \/>\nReact native has gained popularity because React native apps can be developed for both IOS and ANDROID by using a single codebase for both platforms.<\/li>\n<li><strong>Better performance<\/strong> :<br \/>\nReact native apps are compiled into natively written code. This enables it to work on both operating systems as well as enables it to function the same way on both platforms with no lags at all.<\/li>\n<li><strong>Other benefits<\/strong> :<br \/>\nOther benefits of React native framework includes faster development, ability to reuse components and ease to be maintained.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6087 size-large\" src=\"http:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native-806x1024.png\" alt=\"Reasons for using React Native\" width=\"806\" height=\"1024\" srcset=\"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native-806x1024.png 806w, https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native-236x300.png 236w, https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native-768x976.png 768w, https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native-230x292.png 230w, https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native-350x445.png 350w, https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native-480x610.png 480w, https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/Reasons-for-using-React-Native.png 966w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/p>\n<p>Steps to create a React Native app<\/p>\n<p>The following are the steps to create a React native app that is used to print the word \u201cHello World \u201d<\/p>\n<p><strong><br \/>\nStep 1: Project setup<\/strong><\/p>\n<p>An application created using react native can be run on mac, windows and Linux machines.<\/p>\n<p><strong>In this article, we will focus on creating a React Native app on LINUX.<\/strong><br \/>\nAlso, we could create an android as well as an IOS application using react native.<\/p>\n<p>In this article, we will focus on creating an android application using react native.<\/p>\n<p><strong>To create an application using react native we need to install React Native on our computer.<\/strong><br \/>\nHowever, there are some prerequisites before installing react native on our computer.<\/p>\n<p><strong>We need to install the latest version of NODE and NPM before installing react native on our computer.<\/strong><br \/>\nReact native cli is installed using NPM.<\/p>\n<p>We need to run the following command in the command prompt or shell.<\/p>\n<p><strong>npm install -g react-native-cli<\/strong><br \/>\nTo create an Android application\u00a0 we need to install the following<\/p>\n<ul>\n<li>JDK 8 OR newer version.<\/li>\n<li>Android SDK.<\/li>\n<\/ul>\n<p>We need an Android development environment to write an android application using react native.<\/p>\n<p>We also need to need to Configure the ANDROID_HOME environment variable to write an android application using React native.<\/p>\n<p>Similarly to write an IOS application, we need to configure the IOS environment variable.<\/p>\n<p><strong>The project setup is now ready. We can now write an android application using React native on our LINUX machine.<\/strong><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong><br \/>\nStep 2: Creating a new application<\/strong><\/p>\n<p>Run the following command in the command prompt to create a project named <strong>helloworldaqb<\/strong>.<\/p>\n<p><strong>react-native init HelloWorldAqb <\/strong><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>Step 3: Writing Code to print \u201cHello World \u201d<\/strong><br \/>\nInside the project, folder <strong>helloworldaqb<\/strong> edit the <strong>app.js<\/strong> file, remove the entire existing code, and place the following code inside it.<\/p>\n<p>[sourcecode language=&#8221;js&#8221;]<br \/>\nimport React, { Component } from &#8216;react&#8217;;<br \/>\nimport { Text, View } from &#8216;react-native&#8217;;<\/p>\n<p>export default class App extends Component {<br \/>\nrender() {<br \/>\nreturn (<br \/>\n&lt;View&gt;<br \/>\n&lt;Text&gt;<br \/>\nHello World<br \/>\n&lt;\/Text&gt;<br \/>\n&lt;\/View&gt;<br \/>\n);<\/p>\n<p>}<br \/>\n}<\/p>\n<p>[\/sourcecode]<\/p>\n<p><strong><br \/>\nStep 4: Running the application<\/strong><\/p>\n<p><strong><br \/>\n<\/strong>You can now connect your real device.<br \/>\nRun the following commands in the command prompt to run the application.<\/p>\n<ul>\n<li><strong>cd helloworldaqb<\/strong><\/li>\n<\/ul>\n<p><strong>\u00a0<\/strong><\/p>\n<ul>\n<li><strong>react-native run-android<br \/>\n<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2246\" src=\"http:\/\/www.aqbsolutions.com\/wp-content\/uploads\/2018\/06\/Screenshot_4-230x400.png\" alt=\"\" width=\"230\" height=\"400\" \/><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction What is REACT NATIVE? React Native helps you to create real-time mobile apps with the help of javascript alone, which is [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6086,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,13],"tags":[5,71],"class_list":["post-2089","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app-development","category-react-native","tag-app-development","tag-react-native"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Thins To Do With App Made In React Native | aQb Solutions<\/title>\n<meta name=\"description\" content=\"This blog is a step by step tutorial of preparing an app using the react native language and print &quot;Hello World&quot; as a simple outcome.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Thins To Do With App Made In React Native | aQb Solutions\" \/>\n<meta property=\"og:description\" content=\"This blog is a step by step tutorial of preparing an app using the react native language and print &quot;Hello World&quot; as a simple outcome.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-04T09:47:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T13:39:40+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"780\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"aQbSolutions\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"aQbSolutions\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/\"},\"author\":{\"name\":\"aQbSolutions\",\"@id\":\"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/7f8c6dcba99e9b5a7c24a525f8365952\"},\"headline\":\"Steps to making an app with React Native to print the word &#8220;Hello World&#8221;\",\"datePublished\":\"2018-06-04T09:47:35+00:00\",\"dateModified\":\"2025-04-16T13:39:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/\"},\"wordCount\":610,\"image\":{\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png\",\"keywords\":[\"App Development\",\"React Native\"],\"articleSection\":[\"Mobile App Development\",\"React Native\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/\",\"url\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/\",\"name\":\"Thins To Do With App Made In React Native | aQb Solutions\",\"isPartOf\":{\"@id\":\"https:\/\/aqbsolutions.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png\",\"datePublished\":\"2018-06-04T09:47:35+00:00\",\"dateModified\":\"2025-04-16T13:39:40+00:00\",\"author\":{\"@id\":\"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/7f8c6dcba99e9b5a7c24a525f8365952\"},\"description\":\"This blog is a step by step tutorial of preparing an app using the react native language and print \\\"Hello World\\\" as a simple outcome.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage\",\"url\":\"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png\",\"contentUrl\":\"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png\",\"width\":1200,\"height\":780,\"caption\":\"React Native App Hello World\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/aqbsolutions.com\/blog\/#website\",\"url\":\"https:\/\/aqbsolutions.com\/blog\/\",\"name\":\"Aqbsolutions Blog\",\"description\":\"Blogs | IT Services in USA and Canada | aQb Solutions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/aqbsolutions.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/7f8c6dcba99e9b5a7c24a525f8365952\",\"name\":\"aQbSolutions\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d37e12c5e93bdf3f02abdb5c8a89bad8841bd4743b3b2ea558914abbb60c7414?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d37e12c5e93bdf3f02abdb5c8a89bad8841bd4743b3b2ea558914abbb60c7414?s=96&d=mm&r=g\",\"caption\":\"aQbSolutions\"},\"url\":\"https:\/\/aqbsolutions.com\/blog\/author\/aqbsolutions\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Thins To Do With App Made In React Native | aQb Solutions","description":"This blog is a step by step tutorial of preparing an app using the react native language and print \"Hello World\" as a simple outcome.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Thins To Do With App Made In React Native | aQb Solutions","og_description":"This blog is a step by step tutorial of preparing an app using the react native language and print \"Hello World\" as a simple outcome.","og_url":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/","og_site_name":"Blog","article_published_time":"2018-06-04T09:47:35+00:00","article_modified_time":"2025-04-16T13:39:40+00:00","og_image":[{"width":1200,"height":780,"url":"http:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png","type":"image\/png"}],"author":"aQbSolutions","twitter_card":"summary_large_image","twitter_misc":{"Written by":"aQbSolutions","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#article","isPartOf":{"@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/"},"author":{"name":"aQbSolutions","@id":"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/7f8c6dcba99e9b5a7c24a525f8365952"},"headline":"Steps to making an app with React Native to print the word &#8220;Hello World&#8221;","datePublished":"2018-06-04T09:47:35+00:00","dateModified":"2025-04-16T13:39:40+00:00","mainEntityOfPage":{"@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/"},"wordCount":610,"image":{"@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png","keywords":["App Development","React Native"],"articleSection":["Mobile App Development","React Native"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/","url":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/","name":"Thins To Do With App Made In React Native | aQb Solutions","isPartOf":{"@id":"https:\/\/aqbsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage"},"image":{"@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png","datePublished":"2018-06-04T09:47:35+00:00","dateModified":"2025-04-16T13:39:40+00:00","author":{"@id":"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/7f8c6dcba99e9b5a7c24a525f8365952"},"description":"This blog is a step by step tutorial of preparing an app using the react native language and print \"Hello World\" as a simple outcome.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/aqbsolutions.com\/blog\/2018\/06\/04\/steps-to-making-an-app-with-react-native\/#primaryimage","url":"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png","contentUrl":"https:\/\/aqbsolutions.com\/blog\/wp-content\/uploads\/2018\/06\/React-Native-App-Hello-World.png","width":1200,"height":780,"caption":"React Native App Hello World"},{"@type":"WebSite","@id":"https:\/\/aqbsolutions.com\/blog\/#website","url":"https:\/\/aqbsolutions.com\/blog\/","name":"Aqbsolutions Blog","description":"Blogs | IT Services in USA and Canada | aQb Solutions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aqbsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/7f8c6dcba99e9b5a7c24a525f8365952","name":"aQbSolutions","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/aqbsolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d37e12c5e93bdf3f02abdb5c8a89bad8841bd4743b3b2ea558914abbb60c7414?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d37e12c5e93bdf3f02abdb5c8a89bad8841bd4743b3b2ea558914abbb60c7414?s=96&d=mm&r=g","caption":"aQbSolutions"},"url":"https:\/\/aqbsolutions.com\/blog\/author\/aqbsolutions\/"}]}},"_links":{"self":[{"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=2089"}],"version-history":[{"count":3,"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2089\/revisions"}],"predecessor-version":[{"id":6089,"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2089\/revisions\/6089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/media\/6086"}],"wp:attachment":[{"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=2089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=2089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aqbsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}