• Stars
    star
    147
  • Rank 251,347 (Top 5 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 6 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🌀 React Native ile Mobil Uygulama Geliştirme ve MobX

React Native Eğitimi

Node.JS, React, GraphQL ve şimdi de React Native.Evet, "Sıfırdan Her Yönüyle" yolculuğunun dördüncü adımı olan React Native kursu artık hazır.

Kursa Git

Temel Dersler

Bu bölümde ilk adımlarmızı atarak React Native'i tanımaya çalışıyoruz.

Kurulumlar, yeni bir proje oluşturmak, projeyi emulator üzerinde çalıştırmak, temel emulator kontrolleri, temel React bilgileri, stillendirme ve flex ile konumlandırma işlemleri gibi konulara değindikten sonra React Native üzerinde kullanılan temel bileşenleri sırası ile işliyoruz.

Bu konuları tamamladıktan sonra React Native üzerinde çok basit ekranlar tasarlamaya başlayabiliyorsunuz.

Temel bilgileri daha iyi oturtmak ve pratik olması adına çok basit bir login ekranı tasarlıyoruz. Bunu yaparken aynı zamanda uygulama ismini,iconunu ve splash ekranını değiştirmeyi de öğreniyoruz.

React Navigation

Öğrenme sürecinde en fazla kafa karışıklığının olduğu noktalardan biri de React Navigation. Biz kurs üzerinde bu konuyu üç bölüme ayırdık. "Stack Navigator", "Drawer Navigator" ve "Tab Navigator". Bu üç bölüm altında yeni bir ekran oluşturmayı, o ekrana yönlendirme yapmayı, modal açtırmayı, sol veya sağ menüler oluşturmayı son olarak da tab navigator oluşturmayı öğreniyorsunuz.

Aynı konu üzerinde öğrendiklerimizle hazırladığımız bir diğer çalışma.

Kamera Kullanımı

Bu bölümde cihazın kamerasını kullanarak fotoğraf çekiyor ve çekilen fotoğrafı galeriye kaydediyoruz. Kamera görüntüsünün üzerinde ekstra kontroller ekliyor ve kullanıyoruz. Aynı zamanda kullanıcıdan bazı erişimler ile alakalı izin isteme durumlarını da bu bölüm üzerinde öğrenmeye başlıyoruz.

Animasyonlar

React Native'in sağladığı Animated nesnesini kullanarak animasyon hazırlamayı öğreniyoruz. Animated altındaki bir çok methodu tanıma şansı yakalıyoruz. Temel animasyon oluşturma bilgisine sahip olduktan sonra aşağıdaki projeyi hazırlıyoruz.

Harita Kullanımı

Mobil uygulama geliştirme dendiğinde akla ilk gelenlerden biri de harita nesnesi. Bu bölümde harita kullanımı ile alakalı temel bilgileri ediniyorsunuz. Marker göstermek, animated marker, aktif konumu almak vb. Yine bu bölümde izinler ile alakalı neler yapmanız gerektiğini pekiştirme imkanı buluyorsunuz.

Harita kullanımına genel manada aşina olduktan sonra yakınlardaki restoran ve kafeleri gösteren bir uygulama geliştiriyoruz.

MobX State Management

State yönetimi konusunda esnek, basit ve kolay anlaşılabilir bir yapı olan MobX hakkında bütün temel bilgileri bu bölümde öğreniyoruz. observable, observer, action, async action, enforceActions, computed, autorun, reaction, when, provider ve inject gibi MobX'e özel tanımları anlamaya çalışıyoruz.

Yine diğer bölümlerde olduğu gibi temel bilgileri edindikten sonra o temel'i kullanarak basit bir proje geliştiriyoruz.

Bu projede React Navigation ve MobX'i bir arada görme şansı yakalıyoruz. Formik ile kayıt ve giriş ekranları tasarlıyor, validasyon işlemlerini Yup ile yapıyoruz. Custom bir Node.JS servise bağlanıp kullanıcı kaydı yapıyor ve giriş yapıldıktan sonra kullanıcıya bir token tahsis ediyoruz.

Yani işin özü, bu projede MobX ve React Navigation ile bir kayıt ve giriş sürecini yönetmeyi öğreniyorsunuz.

Socket.IO ile Real-Time Çalışmak

Socket.IO gerçek zamanlı işler yapmak istediğimizde akla ilk gelen yapılardan biri. Chat yazılımları ve multiplayer oyunlarda çokça tercih edilen bir teknoloji.

Kurs üzerinde bir Node.JS backend'i oluşturup socket.io'yu kullanıyoruz. Aşağıda görmüş olduğunuz çalışmayı hazırlıyoruz.

Foo

Yeni Eklenecek Bölümler

  • Styled Components
  • Background Tasks
  • GraphQL & Apollo
  • Uygulamayı Yayınlamak.

Kursa Git

More Repositories

1

react-redux-egitim-seti

🐳 Udemy üzerinde yayınlanan "Sıfırdan Her Yönüyle React ve Redux" adlı eğitim setinde yazılan kaynak kodları barındıran repodur.
JavaScript
185
star
2

node-egitimi

🍃 Udemy üzerinde yayınlanan "Sıfırdan Her Yönüyle Node.JS" adlı eğitim setinde yazılan kaynak kodları barındıran repodur.
JavaScript
122
star
3

node-egitimi-movie-api

🔰 Node.JS Eğitim Seti - Movie API
JavaScript
58
star
4

arduino-nodejs-egitimi

Udemy üzerinde yayınlanan "Arduino & Node.JS ile GSM Tabanlı Konum Takip Proje Tasarımı" eğitimi kaynak kodlarını barındırır.
JavaScript
37
star
5

thechatfather

The ChatFather :shipit:
JavaScript
27
star
6

graphql-egitimi

🍇 Sıfırdan Her Yönüyle GraphQL + Apollo
27
star
7

easysnap

JavaScript
22
star
8

socketio-live-balls

⭕ SocketIO Live Balls
JavaScript
20
star
9

graphql-movie-app

Node.JS + React + GraphQL Movie App
JavaScript
14
star
10

node-backend-with-unit-tests

JavaScript
9
star
11

webstorm-react-live-templates

9
star
12

graphql-tutorial

GraphQL Tutorial
JavaScript
8
star
13

node-egitimi-bilgeadam

JavaScript
8
star
14

erka-group-react-egitimi

JavaScript
8
star
15

innova-react-native-egitimi

JavaScript
7
star
16

turk-patent-node-egitimi

JavaScript
6
star
17

mean-stack-docker

mean-stack-docker
TypeScript
6
star
18

simple-chat-app-backend

JavaScript
5
star
19

bilgeadam-react-egitimi

JavaScript
4
star
20

epias-react-egitimi

JavaScript
4
star
21

bilgeadam-react-egitimi-yp

JavaScript
4
star
22

tcmb-react-egitimi2

JavaScript
4
star
23

chat-app-client

JavaScript
3
star
24

live-balls-ui

Socket.IO Live Balls UI
HTML
3
star
25

crud-api

JavaScript
3
star
26

easysnap-ui

HTML
2
star
27

chat-ui

CSS
2
star
28

ikcu-backend

JavaScript
2
star
29

isnet-rn-egitimi

JavaScript
2
star
30

ikcu-react-egitimi

Java
2
star
31

sevencolor

Seven Color
HTML
2
star
32

bilgeadam-react-todo-app

JavaScript
2
star
33

ikcu-chat-app

JavaScript
2
star
34

tcmb-react-egitimi3

JavaScript
1
star
35

innova-react-egitimi-2

JavaScript
1
star
36

tcmb-react-egitimi-g2

JavaScript
1
star
37

caprover-test

1
star
38

kodluyoruz-api

JavaScript
1
star
39

jquery-beles-ekmek

Beleş ekmek with Javascript :]
HTML
1
star
40

turk-patent-rest-api

JavaScript
1
star
41

blogpost

GitHub, Travis CI ve Heroku entegrasyonu.
JavaScript
1
star