Merhaba arkadaşlar, bugün react native ile bir login uygulaması serisine başlıyoruz. Tıpkı İonic ile bir zamanlar yaptığım gibi. İonic için yaptığım seriye bu adresten ulaşabilirsiniz.

İş listemiz şöyle:

• React native'i ile LoginApp adında proje oluşturalım

• Projede bulunan klasör yapısında bahsedelim

• İleride kullanacağımız yapıyı oluşturalım

Öncelikle uygulamamı masaüstüne oluşturuyorum.

$ cd Desktop/

$ react-native init LoginApp

$ cd LoginApp/

Uygulamayı bundan sonra hangi platformda işlem yapacaksanız ona göre derleyebilirsiniz. 

react-native run-android
react-native run-ios

ios için macintosh cihazınızın olması gerektiğini unutmayın! Uygulama açıldığında Welcome to React Native! ile sizi karşılıyor. şimdi dosya yapısına bakalım

├── __tests__ : testlerinizi yapabileceğiniz klasör
├── android : android projesinin derlendiği klasör
├── ios : ios projesinin derlendiği klasör
├── node_modules : projenizde kullandığınız tüm modüller
├── index.android.js : uygulamanız eğer android ise buradan başlatılır
├── index.ios.js : uygulamanız eğer ios ise buradan başlatılır
├── package.json : projenizde eklediğiniz bir modülü kaydettiğiniz yer

Bir önceki makalemde dediğim gibi ionic'e göre belirli bir design pattern'i yok. O yüzden bu seride bir mimari kullanmıyacağım sıfırdan anlatım yapacağım. Kendi sayfa yapımızı kendimiz oluşturmamız gerekiyor. Ben şuan ios ile çalışacağım o yüzden index.ios.js ile başlıyorum (Not: android ile bir farkı yok sadece başlama noktası burası. İmport ve diğer işlemler aynı zaten böyle olmasaydı hibrit olmazdı :D). index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class LoginReact extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.welcome}>
					Welcome to React Native!
				</Text>
				<Text style={styles.instructions}>
					To get started, edit index.android.js
				</Text>
				<Text style={styles.instructions}>
					Double tap R on your keyboard to reload,{'\n'}
					Shake or press menu button for dev menu
				</Text>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	},
	instructions: {
		textAlign: 'center',
		color: '#333333',
		marginBottom: 5,
	},
});

AppRegistry.registerComponent('LoginReact', () => LoginReact);

Projenin saf hali bu. Şimdi ise kendi klasör yapımızı oluşturalım: NOT: "bu yapıyı kullanmak zorunda değilsiniz daha verimli bir yapı kullanmak istiyorsanız bu adresten faydalanabilirsizin. Bu yapıyı oluştururken ben o linke hiç bakmamıştım keşke o yapıyı kullansaydım ama mantığı anladıysanız o yapıya çevirmeniz uzun sürmez." (src dizini)

• LoginApp
  • src
    • assets
    • common
    • pages
      • start-page
        • start-page.js
      • main-page
        • main-page.js
      • login-page
        • login-page.js
    • providers

assets   : resimler ve style dosyalarını tutacağımız yer
common   : kullanacağımız çeşitli fonksiyonları tutacağımız yer
pages    : sayfalarımızı burada barındırıyoruz
providers: Web service isteklerini ekleyeceğiniz yer olabilir

Not: bu derste react-native kurulumundan bahsetmedim ben zaten bunları yapmışsınız olarak kabul ediyorum. Bugünkü konu bu kadardı diğer konuda görüşmek üzere. İyi çalışmalar :) sorunuz olursa çekinmeyin sorun.

Not: Bu eğitim serisinin videolarına buradaki linkten erişebilirsiniz. Projenin çalışır halini github'daki profilimde bulabilirsiniz