Mini Project Part 1: Todo App — Setup & UI

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Todo App ရဲ့ UI structure က: header (title), input row (TextInput + Add button), todo list (FlatList), todo item (checkbox + text + delete button) ဆိုပြီး component ၄ ပိုင်း ခွဲထားပါတယ် — component တစ်ခုစီရဲ့ responsibility ကို ရှင်းလင်းစွာ ခွဲထားရင် Part 2 (state logic) ကို ထည့်တဲ့အခါ ပိုလွယ်ကူပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Header, input row, todo list section ၃ ခုကို View ဖြင့် ခွဲထားပြီး flexbox (flexDirection: row for input row) ကို သုံးပါ — ဒီအဆင့်မှာ state ကို static array (placeholder data) နဲ့ hardcode ထားရုံပါ, Part 2 မှာ useState ချိတ်ဆက်ပါမယ်။ TouchableOpacity ကို 'Add' button, checkbox icon (☐/☑️), delete icon (🗑️) အတွက် သုံးပါ။

Header, input row, todo list — component ၃ ပိုင်း ခွဲထားခြင်း
Flexbox (flexDirection: row) ဖြင့် input row layout ချခြင်း
Static placeholder data နဲ့ UI structure ပထမဆုံး ပြီးမြောက်ခြင်း

Code နမူနာ

javascript

import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

const placeholderTodos = [
  { id: '1', text: 'React Native လေ့လာမယ်', done: false },
  { id: '2', text: 'Todo app ဆောက်မယ်', done: true },
];

export default function TodoApp() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>My Todo App</Text>
      <View style={styles.inputRow}>
        <TextInput style={styles.input} placeholder="Add a todo..." />
        <TouchableOpacity style={styles.addButton}>
          <Text style={styles.addButtonText}>Add</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={placeholderTodos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.todoItem}>
            <Text>{item.done ? '☑️' : '☐'} {item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  header: { fontSize: 24, fontWeight: 'bold', marginBottom: 16 },
  inputRow: { flexDirection: 'row', marginBottom: 16 },
  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 10, marginRight: 8 },
  addButton: { backgroundColor: '#3b82f6', padding: 10, borderRadius: 8, justifyContent: 'center' },
  addButtonText: { color: 'white', fontWeight: '600' },
  todoItem: { padding: 12, borderBottomWidth: 1, borderColor: '#eee' },
});

You should see

Header, input row, placeholder todo list ၂ ခု ပါတဲ့ static UI screen တစ်ခု ပြီးစီးမည်။

၅ မိနစ် စမ်းကြည့်

ဒီ UI structure ကို ကိုယ်တိုင် ရိုက်ထည့်ပြီး Expo Go ပေါ်မှာ run ကြည့်ပါ — placeholder data ၂ ခုကို ကိုယ်ပိုင် todo item စာသားနဲ့ ပြောင်းကြည့်ပါ။

သတိလေးတစ်ချက်

ဒီအဆင့်မှာ Add button/checkbox ကို press ကြည့်လည်း ဘာမှ မဖြစ်သေးပါဘူး (event handler မထည့်ရသေး) — Part 2 မှာ state logic ထည့်မှ interactive ဖြစ်လာမှာပါ။