React Native Üzerine – 1. Bölüm (kurulum ve hello world)

Merhaba dostlar bugün sizlerle react native üzerine konuşacağız. Öncelikle react native nedir ondan bahsedelim birazcık; React Native, bize JavaScript ile native mobil uygulamalar yazmamızı sağlayan, Facebook tarafından geliştirilmiş bir JavaScript framework’üdür. Yaptığım örneklerin github reposuna şu linkten ulaşabilir ve tam kodlara göz atabilirsiniz.

Güzelliği ise IOS ve Android için ayrı ayrı geliştirme süreçlerini ortadan kaldırmasıdır. Yani JavaScript dili ve tek bir projeyle bütün platformlar için uygulamamızı geliştirebiliyoruz. Şimdi kurulum ile başlayalım bölümümüze.

İlk olarak bilgisayarınızda node yüklü olduğunu varsayıyorum, yok ise şu link ile indirebilirsiniz, node ile beraber bilgisayarınıza kurulan NPM yardımı ile Create React Native App i yükleyeceğiz. Bu bize en kolay şekilde react native uygulaması yazabilecek platformu sağlayacak.

Şimdi cmd’yi açalım ve uygulamamızı kurmak istediğimiz dizine gelelim, “cd Gidilecek_Dizin” diyerek cmd’de dizinlerde ileri gidebilirsiniz. Bir alt dizine inebilmek için ise “cd..” yazmanız yeterli.

1
npm install -g create-react-native-app

Üstteki kodu çalıştırdıktan sonra artık Create React Native App komutunu kullanabilir hala geldik. Şimdi bu komutu kullanarak ilk projemizi oluşturalım. Projemizin adı “firstreactapp” olsun.

1
2
3
create-react-native-app firstreactapp

cd firstreactapp

Diyerek, istenilen dizinde firstreactapp adlı bir proje oluşturduk, ikinci satırda ise projenin içine girdik ve devam edelim.

1
npm start

Kodumuz ile uygulamamızı çalıştıralım ve geliştirici server‘ımızı oluşturalım. Her şey yolunda gittiyse cmd ekranında uygulamamızın qr kodunu görebileceksiniz. Bu qr kodunu android veya ios bir cep telefonunuza indireceğiz expo adlı uygulama ile okutup uygulamanızı telefonunuza yükleyebilirsiniz. Bunun için bilgisayarınız ve telefonunuz aynı wifi ağında olması gerekiyor tabi.

Uygulamanızı eğer bilgisayarınızda çalıştırmak istiyorsanız, bir emulator yüklü ise onu çalıştırarak ve cmd ekranında karşınıza çıkacak seçeneklerden size uygununu seçerek <örneğin a tuşuna basarak android emulatoründe> uygulamanızı çalıştırabilirsiniz.

Şimdi asıl olayımıza gelelim ve projemizin içindeki “App.js” javascript dosyamızı açalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>

        <View style={styles.inside}>
            <Text>Hello Universe!</Text>
        </View>    
      </View>
    );
  }
}

const styles = StyleSheet.create({

container: {

flex: 1,
flexDirection: 'column',
justifyContent: 'center',
//alignSelf: 'stretch',
backgroundColor: '#fffddd',
alignItems: 'flex-end',
},

inside: {

flex: 2,
alignSelf: 'stretch',
backgroundColor: '#dddfff',
alignItems: 'center',
justifyContent: 'center',
},
});

Üstteki kodumuz App.js dosyamızdaki kodun azcık değiştirilmiş hali, şimdi kodu incelemeye başlayalım.

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

import komutu ile kullanacağımız modülleri ekliyoruz, örneğin bu uygulamada Text, View ve Style modülleri kullandık. Bir de buton eklemek istersek eğer, “Button” ını da eklememiz gerekecek.

1
2
3
4
5
6
7
8
9
10
11
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inside}>
            <Text>Hello Universe!</Text>
        </View>
      </View>
    );
  }
}

Uygulamamızın bu kısmı ana kısmımız burada aynı html kodlar gibi uygulamamızda olmasını istediğimiz modülleri ekliyoruz. Örneğin react native kütüphanesinde View yapıları aynı htmldeki div yapıları gibi bize bir alan oluşturuyor ve o alanda kullanmak istediğimiz her şeyi içine koyabiliyoruz. Text ise yazılarımızı göstermek için kullandığımız bir yapı.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const styles = StyleSheet.create({

container: {

flex: 1,
flexDirection: 'column',
justifyContent: 'center',
//alignSelf: 'stretch',
backgroundColor: '#fffddd',
alignItems: 'flex-end',
},

inside: {

flex: 2,
alignSelf: 'stretch',
backgroundColor: '#dddfff',
alignItems: 'center',
justifyContent: 'center',
},
});

Bu kod bölümünde ise eklediğimiz yapıların css’lerini yani stillerini değiştirme işlerini hallediyoruz. Örneğin flex ile yapının bulunduğu üst alanın ne kadarını kapsayacağını belirliyoruz. Bu örnekte ise container style adına sahip yapımızın özelliklerini değiştirmiş olduk.

Evet dostlar bu bölümümüzde bir react native uygulaması nasıl oluşturulur ve yapısı hakkında bazı temel konuları konuşmuş olduk. Sonraki bölümlerde örnek uygulamalarla kullanılabilir farklı yapılarını inceleyeceğiz. Kendinize dikkat edin.

 

Not: Dostlar, react native ile npm’in son sürümleri arasındaki uyuşmazlık ve nasıl bir yol izlenebileceğine şu yazımda değindim.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. A.Kıvanç KEMALOĞLU dedi ki:

    Teşekkürler,

    ubuntu 18.04 ü kurup birkaç sudo komutundan sonra sizin örneğiniz ile bir merhaba dünya kodu yazabildim

  2. ahmet dedi ki:

    Merhaba, çok sevindim yardımcı olabildiğine, iyi çalışmalar dilerim.

ahmet için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.