React Native Öğreniyorum TodoApp
Selam dostlar, bu yazımızda React veya Android ,Ios kurulumundan bahsetmeden direkt olarak React Native ile bir Todo List uygulaması geliştireceğiz. umarım faydası olur hadi kodlayalım :)
İlk olarak Genymotion ile android similatörümüzü başlatıyoruz.
Herhangi bir klasöre veya masaüstüne uygulamayı barındıracağımız bir klasör ekliyoruz isim size kalmış ben todoApp ismini verdim.
Başlat kısmından cmd editörüne erişiyoruz ve klasörümüze gitmek için “cd klasör adını yazıyoruz.”
Klasöre eriştikten sonra “npx react-native run-android” diyoruz ve npm
paket sunucu ,node çalışmaya başlıyor. İlk aşamada paket yüklemeleri uzun sürebilir endişe etmeyin sabırla bekleyin.
node ekranı da şu şekilde çıkacak emulatorunuzu düzgünce bağladıysanız uygulamanız emulator ekranında çıkacaktır. Uygulama başlatma konusunda ve kurulumlarda sıkıntı yaşadıysanız şu kaynağa göz atmanızı tavsiye ederim.
Daha sonra Visual Studio Code ile proje klasörünüzü open folder diyerek açın.
Aşşağıda ki gibi dosya dizinimin içine “components” klasoru oluşturdum sizde uygulayın bunu yapma sebebimiz compenentleri bir klasorde toplayıp rahatça erişebilmemizi ve değişiklik yapabilmemizi kolaylaştırması denilebilir.
components klasörümüzün içerisine aşşağıda oluşturduğum dosyaları oluşturmanızı rice ediyorum. Daha sonra içerikleri ile birlikte göz atacağız.
Aşşağıda gördüğünüz kodların en başındaki “import” kısımları kullanacağımız compenentler örneğin:View,Button,Flatlist vb. import edilmesini yani dahil edilmesini sağlıyor.
AppJs: Uygulamanın main dosyası components dosyalarından çekmek istediğimiz compenentleri burada import ettik .
Örneğin:
import Header from ‘./componenets/header’;
Ek olarak ;
import { StyleSheet, View, Text, FlatList,} from ‘react-native’;
StyleSheet: Stil vermemize yarar.
View: Web de de aşina olacağınız üzere kutucuk Div kavramı gibidir.
Text: Yazı yazma işlemleri için
FlatList: Listeleme sıralama işlemleri için kullanılır.
App.js de test etmek için şu şekilde veri kaynağı oluşturduk;
const[todos,setTodos]=useState([ {text:’Kahve satın alacağım’,key:’1'}, {text:’Bir uygulama yapacağım’,key:’2'}, {text:’Kitap yazacağım’,key:’3'}, ]);
Daha sonra ,const pressHandler=(key) =>{ setTodos((prevTodos)=>{ return prevTodos.filter(todo=>todo.key != key); }); } const submitHandler=(text)=>{ setTodos((prevTodos)=>{ return[ {text:text,key:Math.random().toString()}, …prevTodos ] }) }
pressHandler ve submitHandler fonksiyonumuzu oluşturduk.
<View style={styles.container}> <Header/> <View style={styles.content}> <AddTodo submitHandler={submitHandler}/> <View style={styles.list}> <FlatList data={todos} renderItem={({item})=>( <TodoItem item={item} pressHandler={pressHandler}/> )} />
buralarda componentslerde bulunan dosyalarımızı kullanmak için ettiğimiz importlar neticesinde işlemlerimizi yaptık..
const styles = StyleSheet.create ({container: {flex: 1, backgroundColor: '# fff'}, içerik: {padding: 40,}, list: {marginTop: 20,}});
Stil alanımızı tanımladık.
Header.js alanında uygulamanın başlık kısmı için view oluşturduk ve stil tanımlaması ile düzenleyerek son haline kavuşmasını sağladık. Daha sonra app.js dosyamızda çağırdık.
varsayılan işlevi dışa aktar TodoItem ({item, pressHandler}) {return (<TouchableOpacity onPress = {() => pressHandler (item.key)}> <Metin stili = {styles.item}> {item.text} </Text> </TouchableOpacity>)}
Yukarıdaki kod parçasında ise todoitem.js içinde todolist eklediğimizde çıkaccak view görüntüsünü ve içeriğini tasarladık.
varsayılan işlevi dışa aktar AddTodo ({SubmitHandler}) {const [text, setText] = useState (''); const changeHandler = (val) => {setText (val)} dönüş (<View> <TextInput stili = {styles.input} yer tutucu = 'yeni yapılacaklar ..' onChangeText = {changeHandler} /> <Düğme onPress = {() => sendHandler (text)} title = 'add todo' text = 'add todo' color = 'mercan' /> </View>)}
Son olarak yukarıdaki kod parçasında yani addTodo.js de todoya ekleme yapabileceğimiz bir alan oluşturduk ve bu alandaki veriyi flat liste gönderenn bir buton tanımladık.
Bu şekilde bir todolist uygulaması elde ettik gayet basit bir uygulama tek tek şu şuna yarar diye anlatmak yerine biraz kabataslak geçmek istedim alt tarafa github linkini bırakacağım ve githubdan projeyi çekip kullanımlarını iyice incelemenizi önereceğim sıfırdan başlayarak baka baka yaparsanız kavramanız çok daha rahat olacaktır. Bilmediğiniz kavramları lütfen google da aratın ve kullanım alanlarını inceleyin.
