พื้นฐาน Expo และการเลือกเครื่องมือ

จบสัปดาห์นี้ คุณจะ:

• อธิบายความต่างระหว่าง React Native กับ Expo ได้
• สร้างโปรเจกต์ด้วย create-expo-app และรันบนมือถือจริงด้วย Expo Go
• อ่านโครงสร้างโปรเจกต์และเข้าใจ Expo Router (routing ตามไฟล์)
• บอกได้ว่างานแบบไหนที่ Expo ไม่เหมาะ

React Native คือ framework ที่เขียน UI ด้วย React (JavaScript/TypeScript) แล้วแสดงผลเป็น component แบบ native จริงทั้ง iOS และ Android

Expo คือชุดเครื่องมือที่ครอบ React Native ให้เริ่มงานและส่งแอปขึ้น store ได้ง่ายขึ้น และเป็นทางที่เอกสาร React Native แนะนำสำหรับโปรเจกต์ใหม่

1. ติดตั้ง Node.js (LTS), VS Code และแอป Expo Go บนมือถือ
2. สร้างโปรเจกต์และเปิด dev server ด้วยคำสั่งด้านล่าง
3. สแกน QR ด้วย Expo Go (Android) หรือแอปกล้อง (iOS) โดยมือถือกับคอมอยู่ Wi‑Fi เดียวกัน
4. แก้ข้อความใน app/(tabs)/index.tsx แล้วดู Fast Refresh บนมือถือ

แทนที่เนื้อหาในไฟล์หน้าแรกด้วยโค้ดนี้ แล้ว save ดูผลบนมือถือ

1import { useState } from 'react';
2import { Pressable, StyleSheet, Text, View } from 'react-native';
3import { Link } from 'expo-router';
4 
5export default function HomeScreen() {
6  const [count, setCount] = useState(0);
7 
8  return (
9    <View style={styles.container}>
10      <Text style={styles.title}>Hello, Expo!</Text>
11 
12      <Pressable style={styles.button} onPress={() => setCount(count + 1)}>
13        <Text style={styles.buttonText}>กดแล้ว {count} ครั้ง</Text>
14      </Pressable>
15 
16      <Link href="/about" style={styles.link}>ไปหน้า About →</Link>
17    </View>
18  );
19}
20 
21const styles = StyleSheet.create({
22  container: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16, backgroundColor: '#09090b' },
23  title: { fontSize: 32, fontWeight: '700', color: '#fafafa' },
24  button: { backgroundColor: '#fafafa', paddingHorizontal: 20, paddingVertical: 12, borderRadius: 8 },
25  buttonText: { color: '#09090b', fontWeight: '600' },
26  link: { color: '#a1a1aa' },
27});

• useState เก็บค่าที่เปลี่ยนได้ ทุกครั้งที่ setCount ถูกเรียก หน้าจอจะวาดใหม่
• View คือกล่อง (เหมือน div) และ Text คือข้อความ ข้อความต้องอยู่ใน Text เสมอ
• Pressable ทำให้กดได้ และ onPress คือสิ่งที่เกิดเมื่อนิ้วแตะ
• Link จาก Expo Router พาไปหน้าอื่น
• StyleSheet เขียน style คล้าย CSS แต่เป็น camelCase และไม่มีหน่วย px

สร้างไฟล์ app/about.tsx แล้ว Expo Router จะสร้างหน้า /about ให้อัตโนมัติ ไม่ต้องลงทะเบียนเส้นทางเอง

1import { Text, View } from 'react-native';
2import { Link } from 'expo-router';
3 
4// ไฟล์ app/about.tsx = หน้า /about อัตโนมัติ
5export default function AboutScreen() {
6  return (
7    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
8      <Text style={{ fontSize: 24 }}>About</Text>
9      <Link href="/">กลับหน้าแรก</Link>
10    </View>
11  );
12}

คอร์สนี้เลือก Expo เพราะต่อยอดความรู้ React จากเว็บได้ เขียนโค้ดชุดเดียวได้ทั้ง iOS และ Android และ build iOS ได้แม้ไม่มี Mac

• เลือก Flutter เมื่อทีมถนัด Dart หรือต้องการ UI ออกแบบเองที่เหมือนกันทุกแพลตฟอร์ม รวมถึง desktop
• เลือก Native เมื่อต้องการ performance สูงสุด หรือใช้ฟีเจอร์เฉพาะ OS เช่น widget, Apple Watch, CarPlay

• Expo Go รันได้แค่ไลบรารีใน SDK ถ้าใช้ native library อื่นต้องทำ development build
• OTA แก้ได้แค่ JavaScript และ asset ถ้าเปลี่ยน native code หรือสิทธิ์ ต้อง build ใหม่และส่ง store
• งานกราฟิกหนัก เช่น เกม 3D, AR, วิดีโอ real-time ควรใช้ Native หรือ game engine
• ฟีเจอร์ OS ใหม่ ต้องรอไลบรารี หรือเขียน Expo Module ด้วย Swift/Kotlin เอง
• EAS Build แผนฟรีมีโควตาและคิว ใช้มากต้องจ่าย หรือ build เอง (iOS ต้องใช้ Mac)
• ต้องอัปเกรด SDK เป็นระยะ และบั๊กฝั่ง native ต้องเปิด Xcode/Android Studio ดูเอง

1. สร้างแอปและรันบนมือถือตัวเองด้วย Expo Go
2. เปลี่ยนข้อความและสีบนหน้าแรก
3. เพิ่มหน้า app/about.tsx และ app/settings.tsx แล้วลิงก์ไปมาด้วย <Link>
4. เขียน 3 บรรทัด: แอปที่อยากทำเหมาะหรือไม่เหมาะกับ Expo เพราะอะไร

อ่านเพิ่ม: docs.expo.dev · reactnative.dev