React Native Örnek Login Uygulaması #1 - Projeyi oluşturuyoruz

react-nativereact-native-login-uygulamasıyoutubeyenibirbaslangic

2 yıl önce 7 yorum

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

Yorumlar ({{totalCommentCount}})

  • İlker

    {{commentLike48Count}} beğenme 1 yıl önce

    Merhaba, ilk kurulum yaptığım zaman index.ios.js veya index.android.js diye ayrım yapmadı. Bu konuda yardımcı olabilirmisiniz ? http://prntscr.com/gtibr7
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike49Count}} beğenme 1 yıl önce

    Merhaba, konuyu detaylı bir şekilde buraya: https://github.com/abdurrahmanekr/bana-istedigini-sor/issues "issue" açarsanız size yardımcı olabilirim.
    Beğen Beğendin
  • haydar

    {{commentLike60Count}} beğenme 1 yıl önce

    ikisi tek bir app.js de birleştirildi
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike61Count}} beğenme 1 yıl önce

    Merhaba, index.ios.js veya index.android.js dosyasına ne yazıldı ise aynısını yazarsanız bir sıkıntı oluşmayacaktır. Başlama noktası önemli değil.
    Beğen Beğendin
  • xmdev

    {{commentLike89Count}} beğenme 8 ay önce

    react native run-android react native run-ios Hocam aradaki - eksik kalmış. Yeni başlayan arkadaşlar sıkıntı yaşayabilir.
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike92Count}} beğenme 7 ay önce

    Teşekkürler.
    Beğen Beğendin
  • cengfeyzi

    {{commentLike110Count}} beğenme 2 ay önce

    Merhaba ilker bey sizde muhtemelen o dosya app.js dosyasıdır. Hocamızın yazdığı makale react-native bir önceki sürümünde ayrı olarak farklı platformlar için yazılıyordu. App.js holder artık sizin yazdığınız kodları iki platform içinde uyum sağlıyor.
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?