React Natıve Nedir? React Natıve Öğrenmek

2013 yılında Facebook tarafından geliştirilmeye başlanan React Native, 2 yıl boyunca prototipleri ve versiyonları düzenleniyor ilk sürümlerini geliştiriyor ve 2015 yılında GitHub üzerinden açılışı yapıyor. React Native Facebook tarafından geliştirilen, cross-platform mobil uygulama geliştirme imkanı sağlayan bir frameworkdur. React Native aslında tek bir dil üzerinden kodlama yapabilme ve geliştirilen uygulamanın birçok platformda çalışmasını sağlıyor. React Native ile geliştirilen popüler uygulamalara yer verecek olursak ilk olarak Facebook’a yer vermeliyiz. Sonrasında Instagram, Tesla, Skype, Pinterest, Bloomberg, Wallmart, UberEATS, Discord ve bunlar gibi pek çok uygulama React Native ile geliştirilmiştir. React Native ve React native öğrenmek hakkında daha detaylı bilgiler için yazımızı okumaya devam edebilirsiniz.

React Native Kullanılan Diller

React Native, yerel UI öğelerini kullanarak çok platformlu Android ve iOS uygulamalarının geliştirilmesini sağlayan uygulama geliştirme uygulamadır. Reactive Native, Java Script Core çalışma zamanı ve Babel transformatörlerine dayanır. Bu kurulumla RN, yeni JavaScript (ES6 +) özelliklerini, async / await vs.'yi desteklemektedir. React Native, Java Script ile yazılır. React kullanılarak JavaScript ile yazılan mobil yazılım geliştirme frameworküdür. React Native öğrenmek, herhangi bir JavaScript geliştiricisi için son derece kolaydır çünkü JavaScript'te kod yazacak geliştiriciler kolaylıkla bulabilirler.

İlginizi çekebilir: 5 Adımda Yazılım Öğrenmek

React Native ile Ne Yapılır? Örnekler

React Native’de isterseniz kendi kompanentlerimizi oluşturabilir ve kendi oluşturduğunuz şekilde kullanabiliriz. Örnek: İlk olarak ana dizinde my-component adında bir klasör oluşturulur ve içine Header.js adında bir JavaScript dosyası oluşturulur.

import React, { Component } from 'react';

import { View, Text } from 'react-native';

const Header = () => {

return ( HEADER ) ; }

const styles = {

headerBar: {

fontSize: 50,

backgroundColor: '#30a7a7',

height: 50,

justifyContent: 'center',

alignItems: 'center',

shadowOpacity: 0.2,

shadowOffset: { width: 0, height: 2 }

}

} export default Header; Header.js dosyasının içinde Header adında bir fonksiyon oluşturuldu bu Hedaer telefonda bir üst bar yapmış oldu. Bu custom kompanentimizi kullanabilmek için yani import edebilmemiz için dışarıya export etmemiz gerekir. Bunu da export default Header şeklinde yapıyoruz.

Ana App.js dosyamıza da aşağıdaki gibi import edip kullanıyoruz.

import React, { Component } from 'react';

import { Text, View, StyleSheet } from 'react-native';

import Header from './my-component/Header'

export default class myClass extends Component

{ render(){

return (

); } } const styles =

{ header: {

fontSize: 30,

backgroundColor: '#30a7a7',

height: 30,

justifyContent: 'center',

alignItems: 'center' }

}

Örnek: Bir diğer örnek React Native ile dil dosyalarının oluşturulması: İlk olarak uygulama içerisinde kullanılacak metinler için uygun dil dosyalarını oluşturalım. Bunun için öncelikle proje dizininde src/lang adında bir dizin oluşturacak ve aşağıdaki dil dosyalarını ekleyeceğiz.

en.ts: const en = { hello: 'Hello',

};

export default en;

tr.ts: const tr = { hello: 'Merhaba',

};

export default tr;

ar.ts:

const ar = { hello: 'مرحبا',

};

export default ar;

Sonrasında cihazdaki seçili dile göre uygun dosyanın kullanılabilmesi için src/lang dizini içerisinde _i18n.ts adında bir dosya oluşturmak gerekiyor.

import I18n from 'i18n-js';

import * as RNLocalize from 'react-native-localize';

import {I18nManager} from 'react-native';

import tr from './tr';

import en from './en';

import ar from './ar';

const locales = RNLocalize.getLocales();

I18n.locale = locales[0].languageTag;

export const isRtl = locales[0].isRTL;

I18nManager.forceRTL(isRtl);

I18n.fallbacks = true; I18n.locales.no = 'en';

I18n.translations = { en, tr, ar, };

export default I18n;

Yukarıda React Native hakkında sizlere detaylı bilgiler bilgiler sunduk, React Native öğrenmek için çeşitli örnekler verdik. Keyifli okumalar dileriz.

Dikkatinizi çekebilir: Yazılım Alanı İçin 8 Önemli Tavsiye