{"id":15493,"date":"2021-07-25T17:05:00","date_gmt":"2021-07-25T14:05:00","guid":{"rendered":"https:\/\/mobidictum.com\/?p=15493"},"modified":"2023-04-25T11:43:08","modified_gmt":"2023-04-25T08:43:08","slug":"react-native-nedir","status":"publish","type":"post","link":"https:\/\/mobidictum.com\/tr\/react-native-nedir\/","title":{"rendered":"React Native Nedir?"},"content":{"rendered":"\n

React Native<\/strong>, native kullan\u0131c\u0131 ara y\u00fcz\u00fc \u00f6geleriyle birlikte \u00e7ok platformlu Android <\/strong>ve iOS <\/strong>uygulamalar\u0131 tasarlanmas\u0131n\u0131 sa\u011flayan \u00f6zel bir mobil uygulama geli\u015ftirme k\u00fct\u00fcphanesidir. Yani k\u0131saca React Native i\u00e7in Facebook taraf\u0131ndan \u00fcretilen, cross-platform mobil uygulama geli\u015ftirme olana\u011f\u0131 sa\u011flayan bir framework diyebiliriz. <\/p>\n\n\n\n

React Native ne zaman \u00e7\u0131kt\u0131?<\/h2>\n\n\n\n

React Native’in temelleri JavaScriptCore<\/strong> ile Babel <\/strong>transformat\u00f6rlerine dayan\u0131yor. S\u00f6z konusu platform ilk olarak 2013 y\u0131l\u0131nda Hacathon Projesinde<\/strong>, Facebook <\/strong>taraf\u0131ndan duyurulmu\u015ftur.<\/p>\n\n\n\n

React Native’in tan\u0131t\u0131lmas\u0131 ise 2015 y\u0131l\u0131 ocak ay\u0131nda Reactis Konferans\u0131<\/strong>nda yap\u0131lm\u0131\u015ft\u0131r. \u00c7ok ge\u00e7meden 2 ay sonra Mart F8<\/strong> etkinli\u011finde GitHub <\/strong>\u00fczerinden a\u00e7\u0131l\u0131\u015f\u0131n\u0131 yap\u0131yor. React Native sayesinde native uygulama<\/a>larda \u00e7ok etkileyici ara y\u00fczler olu\u015fturabilirsiniz. K\u00fct\u00fcphanenin bu \u00f6zelli\u011fi bir\u00e7ok bireysel ve kurumsal projede kullan\u0131lmas\u0131n\u0131 sa\u011flam\u0131\u015ft\u0131r.<\/p>\n\n\n\n

Yaz\u0131l\u0131m sekt\u00f6r\u00fcne h\u0131zl\u0131 bir giri\u015f yapan React Native framework’\u00fc Android ve iOS uygulama geli\u015ftirmelerini de neredeyse ayn\u0131 h\u0131zla etkilemi\u015ftir. \u00d6zellikle Android’e uygulama geli\u015ftirme deste\u011fini di\u011fer dillerde her zaman yetersiz bulan geli\u015ftiriciler h\u0131zl\u0131 bir React Native’e ge\u00e7ti. Bu ge\u00e7i\u015fle beraber adeta Android platformuna uygulama geli\u015ftiren insanlar rahat bir nefes alm\u0131\u015f oldu. Nedenini soracak olursan\u0131z, React Native’in Android Studio<\/strong> gibi bir ortama k\u0131yasla sadece text editor ve buna ek olarak bir em\u00fclat\u00f6r ile daha h\u0131zl\u0131 ve daha geni\u015f bir geli\u015ftirme imkan\u0131 sunuyor olmas\u0131 bu durumun ilk nedeni.<\/p>\n\n\n\n

React Native ne i\u015fe yarar?<\/h2>\n\n\n\n

React Native sayesinde sadece kendine has dil format\u0131 olan JSX<\/strong>‘i kullanarak hem Android’e hem iOS’a hem Windows’a… vs. bir\u00e7ok platforma uygulama geli\u015ftirebilirsiniz. Android ortam\u0131na uygulama geli\u015ftirirken kar\u015f\u0131m\u0131za \u00e7\u0131kan hatalar Java <\/strong>hatalar\u0131 olurken, iOS ortam\u0131na uygulama geli\u015ftirirken kar\u015f\u0131m\u0131za \u00e7\u0131kan hatalar Objective-C<\/strong> hatalar\u0131 oluyor fakat kodlarken kullanaca\u011f\u0131m\u0131z dil React. Yani React Native kullanarak, tek bir dil ile hem iOS’a hem Android’e uygulama geli\u015ftirebiliyorsunuz. Tabii ki her \u015fey sadece React Native kullanarak olmuyor.<\/p>\n\n\n\n

\"React
React Native ile tek bir dil kullanarak bir\u00e7ok platforma \u00e7al\u0131\u015fabilirsiniz.<\/figcaption><\/figure>\n\n\n\n

React Native bir front-end<\/strong> framework\u2019\u00fcd\u00fcr.\u00a0<\/em> Yani bilmeyenler i\u00e7in a\u00e7\u0131klamam\u0131z gerekirse front-end; bir uygulaman\u0131n ara y\u00fcz\u00fcndeki tasar\u0131msal ve operasyonel i\u015flemlerin tamam\u0131n\u0131 ifade eder. Yani bir front-end framework\u2019\u00fc bu gereksinimlerin tamam\u0131n\u0131 sa\u011flayan bir yap\u0131d\u0131r. Back-end ise bir uygulaman\u0131n arka plan\u0131ndaki makine \u00f6\u011frenmesi i\u015flemler, veri deste\u011fi vs gibi gereksinimleri sa\u011flayan i\u015flemler toplulu\u011fudur. React Native front-end\u2019e y\u00f6nelik bir framework\u2019d\u00fcr.<\/p>\n\n\n\n

Sadece React Native ile mobil uygulama geli\u015ftirilebilir mi?<\/h2>\n\n\n\n

Peki sadece React Native kullanarak bir mobil uygulama geli\u015ftirebilir miyiz? Asl\u0131nda bu tasarlamak istedi\u011fimiz uygulamaya ba\u011fl\u0131. Yine de sadece React Native kullanarak bunu yapmak \u00e7ok zor. G\u00fcncel mobil uygulamalar sa\u011flam bir back-end, en az\u0131ndan servis deste\u011finin iyi olmas\u0131n\u0131 istiyor. Neyse ki React Native toplulu\u011fu sayesinde bir\u00e7ok back-end servisini destekliyor. React Native firebase<\/strong>, MongoDB<\/strong>, SQLite<\/strong>, MySQL<\/strong>, GraphQL<\/strong>, realm<\/strong>, Flask<\/strong>, NodeJS <\/strong>ve bunlar gibi daha bir\u00e7ok se\u00e7enekle back-end deste\u011fi verebiliyor. <\/p>\n\n\n\n

Bu \u00f6rnekler i\u00e7erisinde \u00f6zellikle realm mobil uygulamalar i\u00e7in tercig edilen bir veri taban\u0131 y\u00f6netim sistemi uygulamas\u0131. \u0130sterseniz .NET ile WEB API yazarak da uygulamalar\u0131n\u0131za hizmet sa\u011flayabilirsiniz. Bu denli \u00e7e\u015fitli imkan i\u00e7erisinde tercih yaparken en \u00e7ok dikkat etmeniz gereken husus ise geli\u015ftirdi\u011finiz uygulamada hangi back-end hizmetinin daha verimli olaca\u011f\u0131d\u0131r. Yanl\u0131\u015f bir tercih uygulaman\u0131z\u0131n sorunlu \u00e7al\u0131\u015fmas\u0131na ve emeklerinizin bo\u015fa gitmesine neden olabilir.<\/p>\n\n\n\n

Bunlar\u0131n yan\u0131nda React Native Navigation konusunda da ba\u015far\u0131l\u0131. React Navigation sayesinde React Native uygulamalar\u0131nda sayfalama yapabiliyoruz. Ayr\u0131ca React Navigation’\u0131n kullan\u0131m\u0131 \u00e7ok kolay ve tamamen ki\u015fiselle\u015ftirilebiliyor.<\/p>\n\n\n\n

Performans\u0131 y\u00fcksek kurumsal ya da bireysel mobil uygulamaya sahip olmak isteyen herkes React Native teknolojisini kullanabilir. React Native, her ne kadar hibrit bir framework teknolojisi olsa da hibrit bir teknolojinin \u00e7ok daha \u00fczerinde bir teknoloji olarak piyasadaki yerini koruyor. Her sekt\u00f6rden ve her alandan farkl\u0131 ihtiya\u00e7lara y\u00f6nelik mobil uygulamalarda kolayl\u0131kla kullan\u0131labilir.<\/p>\n\n\n\n

React Native’i hangi firmalar kullan\u0131yor?<\/h2>\n\n\n\n

React Native’in yarat\u0131c\u0131s\u0131 olan Facebook kendi uygulamas\u0131n\u0131n belli bir k\u0131sm\u0131n\u0131n ve Instagram’\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131n React Native ile geli\u015ftirildi\u011fini daha \u00f6nce payla\u015fm\u0131\u015ft\u0131. Bununla birlikte React Native kulland\u0131\u011f\u0131n\u0131 dile getiren di\u011fer firmalar Tesla<\/strong>, Skype<\/strong>, Pinterest<\/strong>, Bloomberg<\/strong>, Wallmart<\/strong>, UberEATS<\/strong>, Discord<\/strong>… Peki bu uygulamalar tamam\u0131yla React Native mi?<\/p>\n\n\n\n

\"React
React Native kullan\u0131lan uygulamalar.<\/figcaption><\/figure>\n\n\n\n

Geli\u015ftirilen bir uygulama ba\u015ftan sona tek bir dilde, framework’te, daha do\u011frusu tek bir yap\u0131n\u0131n alt\u0131nda olmak mecburiyetinde de\u011fil. Optimizasyon durumlar\u0131 ve daha verimli bir kullan\u0131m g\u00f6z \u00f6n\u00fcne al\u0131n\u0131nca birden \u00e7ok framework veya dil kullanarak uygulama geli\u015ftirmek<\/a> daha mant\u0131kl\u0131 bir \u00e7\u00f6z\u00fcm olabiliyor. <\/p>\n\n\n\n

Bir uygulamay\u0131 ba\u015ftan sona React Native ile yazmak uygulaman\u0131n belli noktalar\u0131n\u0131n eksik kalmas\u0131na veya belli noktalar\u0131nda optimizasyon ve performans sorunlar\u0131na neden olabilir. \u0130\u015f bu noktaya vard\u0131\u011f\u0131nda baz\u0131 yap\u0131lar\u0131 ortak kullanarak bir uygulama \u00e7\u0131kartmak daha ak\u0131ll\u0131ca bir y\u00f6ntem oluyor. Tek bir framework, tek bir dil veya platform ile ilerlemek zorunda de\u011filsiniz. Geli\u015ftirece\u011finiz uygulama i\u00e7in hangi framework’ler, hangi dil, hangi platform, hangi se\u00e7enek daha verimli olacak ise onun tercih edilmesi gerekiyor.<\/p>\n\n\n\n

React Native Kurulumu<\/h2>\n\n\n\n

\u00d6ncelikle React Native’i kullanmak i\u00e7in gerekli olan programlara bir g\u00f6z atal\u0131m. NodeJS, Java JDK, Android Studio ve Genymotion ba\u015flang\u0131\u00e7 i\u00e7in yeterli olacakt\u0131r. NodeJS sayesinde hem React Native\u2019i ve di\u011fer geli\u015ftiricilerin \u00fcretti\u011fi paketleri y\u00fckleyebilece\u011fiz hem de geli\u015ftirece\u011fimiz projelerin server \u00fczerinde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Java bildi\u011finiz \u00fczere Android uygulamalar\u0131n geli\u015ftirilmesinde kullan\u0131l\u0131yor. <\/p>\n\n\n\n

React Native ile olu\u015fturdu\u011fumuz her proje de yine arka planda Java ile derlenecek. Android Studio’yu kullanmak bize hem sanal cihaz\u0131m\u0131z\u0131 daha optimum \u00e7al\u0131\u015ft\u0131rmay\u0131, hem geli\u015ftirece\u011fimiz uygulamalar\u0131 deploy etmeyi, hem de uygulamam\u0131zda native de\u011fi\u015fiklikler yapmay\u0131 sa\u011flayacak. Android Studio’yu kurarken \u201cPerfonmance (Intel \u00ae <\/strong>HAXM)\u201d ve \u201cAndroid Virtual Device\u201d se\u00e7eneklerini se\u00e7meyi unutmayal\u0131m. <\/p>\n\n\n\n

\"React
Android Studio se\u00e7enekleri<\/figcaption><\/figure>\n\n\n\n

Android Studio y\u00fcklendikten sonra Configure se\u00e7ene\u011fine t\u0131klay\u0131p sonras\u0131nda SDK Manager se\u00e7ene\u011fini se\u00e7memiz gerekiyor. A\u00e7\u0131lan yeni pencerede sa\u011f altta yer alan Show Package Details butonuna basarak y\u00fcklenebilir paketlerin i\u00e7eri\u011fini g\u00f6rebiliyoruz. Android SDK Platform 29, Intel x86 Atom_64 System Image ve Google APIs Intel x86 Atom_64 System Image’i se\u00e7ip Next’e basmam\u0131z gerekiyor.<\/p>\n\n\n\n

Genymotion sayesinde de geli\u015ftirece\u011fimiz projeleri kolayca derlebiliyoruz ve debug edebiliyoruz. <\/p>\n\n\n\n

React Native nas\u0131l \u00f6\u011frenilir?<\/h2>\n\n\n\n

React Native \u00e7ok yayg\u0131n kullan\u0131lan bir framework haline geldi ve yayg\u0131n kullan\u0131lmas\u0131 hakk\u0131ndaki kaynaklar\u0131n da artmas\u0131na neden oluyor. \u0130nternette nas\u0131l \u00f6\u011frenilebilece\u011fi ile ilgili React Native dersleri gerek YouTube’da \u00fccretsiz olarak gerek Udemy gibi platformlarda \u00fccretli olarak veriliyor. Bunun yan\u0131nda GitHub’dan da React Native dersleri almak m\u00fcmk\u00fcn. Hem T\u00fcrk\u00e7e hem yabanc\u0131 dillerde bir\u00e7ok kaynak internette sizleri bekliyor. Tabi ki di\u011fer \u00f6\u011frenme s\u00fcre\u00e7lerinde oldu\u011fu gibi React Native’de de yine g\u00f6rd\u00fc\u011f\u00fcn\u00fcz bir \u015feyi uygulamaya ge\u00e7irmeden tam anlam\u0131yla anlam\u0131\u015f olmuyorsunuz. O y\u00fczden tavsiyemiz \u00f6nce kurulumunu yap\u0131p sonras\u0131nda derslerine ba\u015flaman\u0131z ve ad\u0131m ad\u0131m g\u00f6rd\u00fcklerinizi uygulayarak ilerlemeniz olacakt\u0131r. <\/p>\n\n\n\n

K\u0131sacas\u0131 React Native tek bir dil ile \u00e7oklu ortamda uygulama geli\u015ftirme kolayl\u0131\u011f\u0131 olsun, uygulama geli\u015ftirme h\u0131z\u0131 ve topluluk deste\u011fi olsun g\u00fcn\u00fcm\u00fczde bu avantajlar\u0131 sayesinde \u00e7ok\u00e7a tercih edilen bir framework haline geldi. Ve bu nedenle React Native’i biliyor olmak sizleri bir ad\u0131m \u00f6teye ta\u015f\u0131yacakt\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"

React Native, native kullan\u0131c\u0131 ara y\u00fcz\u00fc \u00f6geleriyle birlikte \u00e7ok platformlu Android ve iOS uygulamalar\u0131 tasarlanmas\u0131n\u0131 sa\u011flayan \u00f6zel bir mobil uygulama geli\u015ftirme k\u00fct\u00fcphanesidir. Yani k\u0131saca React Native i\u00e7in Facebook taraf\u0131ndan \u00fcretilen, cross-platform mobil uygulama geli\u015ftirme olana\u011f\u0131 sa\u011flayan bir framework diyebiliriz. React Native ne zaman \u00e7\u0131kt\u0131? React Native’in temelleri JavaScriptCore ile Babel transformat\u00f6rlerine dayan\u0131yor. S\u00f6z konusu platform […]<\/p>\n","protected":false},"author":46,"featured_media":15528,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8861],"tags":[],"class_list":["post-15493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobidictum-haberler"],"acf":[],"_links":{"self":[{"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/posts\/15493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/comments?post=15493"}],"version-history":[{"count":1,"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/posts\/15493\/revisions"}],"predecessor-version":[{"id":151959,"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/posts\/15493\/revisions\/151959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/media\/15528"}],"wp:attachment":[{"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/media?parent=15493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/categories?post=15493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobidictum.com\/tr\/wp-json\/wp\/v2\/tags?post=15493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}