{"id":1729,"date":"2022-06-27T12:45:26","date_gmt":"2022-06-27T05:45:26","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=1729"},"modified":"2022-11-30T15:43:53","modified_gmt":"2022-11-30T08:43:53","slug":"mengenal-react-react-native-bare-react-native-dan-expo","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/","title":{"rendered":"Get to know React, React Native, Bare React Native, and Expo"},"content":{"rendered":"\r\n\r\nHello friends, this time we will discuss about the theory of the <strong>React<\/strong> javascript library programming language.\r\n\r\nReact is a javascript library developed by <strong>Facebook<\/strong>, which was renamed <strong>Meta<\/strong> in <strong>2013<\/strong>.\r\n\r\nThere are 2 types of React:\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#1_React\" >1. React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#2_React_Native\" >2. React Native<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#1_Bare_React_Native\" >1. Bare React Native<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#Weaknesses_of_Bare_React_Native\" >Weaknesses of Bare React Native:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#Pros_of_Bare_React_Native\" >Pros of Bare React Native:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#2_Expo\" >2. Expo<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#Disadvantages_of_using_Expo\" >Disadvantages of using Expo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/#Advantages_of_using_Expo\" >Advantages of using Expo<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"1_React\"><\/span>1. React<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nReact only or called react js is used to create websites.\r\n<h3><span class=\"ez-toc-section\" id=\"2_React_Native\"><\/span>2. React Native<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nReact Native is a framework specifically for creating hybrid mobile apps, for <strong>Android<\/strong> and <strong>IOS<\/strong> phones.\r\n\r\nIf in application development you want to add other libraries\/components, you can check on the website <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.npmjs.com\/<\/a>, and it should be noted that the <strong>React special library<\/strong> cannot run for <strong>React Native applications<\/strong>, and vice versa, the <strong>React Native special<\/strong> library cannot. can be used for <strong>react applications<\/strong>.\r\n\r\nWithin <strong>React Native<\/strong> itself, there are 2 ways to build an app\r\n<h3><span class=\"ez-toc-section\" id=\"1_Bare_React_Native\"><\/span>1. Bare React Native<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nAlso known as <strong>pure react native<\/strong>, this way we do all the setup for adding libraries and must also compile it during development and production.\r\n<h4><span class=\"ez-toc-section\" id=\"Weaknesses_of_Bare_React_Native\"><\/span><strong>Weaknesses of Bare React Native:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\r\na. You have to do all the setup and compiling, the setup and compiling process is quite time-consuming, especially if the computer you use is a regular computer, especially the regular Apple Macbook laptop, which is faster in compiling.\r\n\r\nb. The setup and compiling process in Bare React Native is very unstable, sometimes a project that was compiled and running earlier, the next day error can occur. This makes the application development time to be long.\r\n\r\nc. Especially for making applications that run on IOS you must use a <strong>Macbook<\/strong> laptop.\r\n<h4><span class=\"ez-toc-section\" id=\"Pros_of_Bare_React_Native\"><\/span>Pros of Bare React Native:<span class=\"ez-toc-section-end\"><\/span><\/h4>\r\nCan use all the special React Native libraries available on the <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.npmjs.com\/<\/a> website. Not limited to libraries that support Expo\r\n<h3><span class=\"ez-toc-section\" id=\"2_Expo\"><\/span>2. Expo<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nAlso known as managed workflow projects, this way Expo helps us install additional libraries and helps compile them during development and production.\r\n<h4><span class=\"ez-toc-section\" id=\"Disadvantages_of_using_Expo\"><\/span>Disadvantages of using Expo<span class=\"ez-toc-section-end\"><\/span><\/h4>\r\nDoes not support all React Native specific libraries, only libraries supported by <strong>Expo<\/strong> can be included in an Expo project. You can check whether a library supports expo or not via the following website: <a href=\"https:\/\/reactnative.directory\/\" target=\"_blank\" rel=\"noopener\">https:\/\/reactnative.directory\/<\/a>\r\n\r\nIf in the future you want to use a library outside of those supported by Expo, then you can <strong>Eject<\/strong>.\r\n<h4><span class=\"ez-toc-section\" id=\"Advantages_of_using_Expo\"><\/span>Advantages of using Expo<span class=\"ez-toc-section-end\"><\/span><\/h4>\r\nExpo helps the process of including libraries and compiling to be faster.\r\n\r\nExpo can help you compile and upload apps directly to the <a href=\"https:\/\/play.google.com\/store\/games\">Play Store<\/a> or <a href=\"https:\/\/www.apple.com\/app-store\/\">Apple Store<\/a>, so you don&#8217;t need a Macbook laptop to compile, but you still need to have a developer account to publish apps on the Apple Store.\r\n\r\nFor the record, the developer account fee to be able to publish applications on the <strong>Apple Store<\/strong> is <strong>99 $<\/strong> per year, while the cost for a <strong>Google developer<\/strong> account specifically for Android applications is <strong>25 $<\/strong> once paid or for life.\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Hello friends, this time we will discuss about the theory of the React javascript library programming language. React is a javascript library developed by Facebook, which was renamed Meta in 2013. There are 2&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":1738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,173],"tags":[79,151,150],"class_list":["post-1729","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer","category-react-native","tag-android","tag-expo","tag-react-native"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=1729"}],"version-history":[{"count":1,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1729\/revisions"}],"predecessor-version":[{"id":3227,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1729\/revisions\/3227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/1738"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=1729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=1729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=1729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}