เริ่มต้นโปรเจกต์ใหม่ด้วย Expo: Hello World!

เริ่มต้นโปรเจกต์ใหม่ด้วย Expo: Hello World!

หลังจากที่เราทำความเข้าใจความแตกต่างระหว่าง React Native CLI และ Expo CLI ในบทที่แล้ว ตอนนี้เราจะมาลงมือสร้างโปรเจกต์ React Native โปรเจกต์แรกของเรากันครับ! ในบทนี้ เราจะใช้ Expo CLI เพื่อสร้างโปรเจกต์ "Hello World!" อย่างง่าย เพื่อให้คุณคุ้นเคยกับขั้นตอนการสร้างโปรเจกต์และรันแอปพลิเคชันบนอุปกรณ์ของคุณ

การติดตั้ง Expo CLI

ก่อนอื่น เราต้องติดตั้ง Expo CLI (Command Line Interface) ก่อนครับ Expo CLI เป็นเครื่องมือที่ช่วยให้เราสร้าง, จัดการ, และรันโปรเจกต์ React Native ได้อย่างง่ายดาย โดยการติดตั้ง Expo CLI จะใช้ Node Package Manager (npm) ซึ่งเป็นเครื่องมือที่มาพร้อมกับการติดตั้ง Node.js ครับ ถ้าคุณยังไม่ได้ติดตั้ง Node.js สามารถดาวน์โหลดและติดตั้งได้จาก เว็บไซต์ Node.js

เมื่อติดตั้ง Node.js เรียบร้อยแล้ว ให้เปิด Command Prompt (บน Windows) หรือ Terminal (บน macOS/Linux) แล้วพิมพ์คำสั่งต่อไปนี้:

npm install -g expo-cli

คำสั่งนี้จะติดตั้ง Expo CLI แบบ Global (-g) ทำให้คุณสามารถเรียกใช้คำสั่ง expo จากที่ไหนก็ได้ในระบบของคุณ

หลังจากติดตั้งเสร็จแล้ว ลองพิมพ์ expo --version เพื่อตรวจสอบว่า Expo CLI ติดตั้งถูกต้องหรือไม่ หากแสดงเวอร์ชันของ Expo CLI แสดงว่าการติดตั้งสำเร็จครับ

การสร้างโปรเจกต์ใหม่ด้วย Expo

เมื่อ Expo CLI พร้อมใช้งานแล้ว เราสามารถสร้างโปรเจกต์ใหม่ได้ง่ายๆ โดยใช้คำสั่ง expo init ครับ

เปิด Command Prompt หรือ Terminal แล้วพิมพ์คำสั่งต่อไปนี้:

expo init HelloWorld

คำสั่งนี้จะสร้างโปรเจกต์ใหม่ชื่อ "HelloWorld" โดย Expo CLI จะถามคุณว่าต้องการใช้ Template (แม่แบบ) แบบไหน ให้เลือก "blank" (โปรเจกต์เปล่าๆ) เพื่อเริ่มต้นจากศูนย์

หลังจากเลือก Template แล้ว Expo CLI จะดาวน์โหลด Dependencies (ส่วนประกอบ) ที่จำเป็นสำหรับโปรเจกต์ของคุณ ซึ่งอาจใช้เวลาสักครู่ ขึ้นอยู่กับความเร็วอินเทอร์เน็ตของคุณ

เมื่อการดาวน์โหลดเสร็จสิ้น Expo CLI จะสร้างโฟลเดอร์ "HelloWorld" ที่มีโครงสร้างไฟล์เริ่มต้นของโปรเจกต์ React Native ของคุณ

ให้เข้าไปในโฟลเดอร์ "HelloWorld" โดยใช้คำสั่ง:

cd HelloWorld

การแก้ไขไฟล์ App.js

ไฟล์หลักของโปรเจกต์ React Native ที่ Expo สร้างให้คือ App.js ไฟล์นี้เป็นจุดเริ่มต้นของแอปพลิเคชันของคุณ เราจะแก้ไขไฟล์นี้เพื่อแสดงข้อความ "Hello World!" บนหน้าจอ

เปิดไฟล์ App.js ด้วย Text Editor หรือ Code Editor ที่คุณถนัด (เช่น VS Code, Sublime Text, Atom) คุณจะเห็นโค้ดเริ่มต้นประมาณนี้:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

เราจะแก้ไขข้อความใน Component Text ให้เป็น "Hello World!" และปรับแต่ง Style เล็กน้อยเพื่อให้ข้อความแสดงผลได้สวยงามขึ้น แก้ไขโค้ดใน App.js เป็นดังนี้:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'blue',
  },
});

ในโค้ดนี้ เราได้เพิ่ม style={styles.text} ให้กับ Component Text และเพิ่ม Style text ใน StyleSheet เพื่อกำหนดขนาดตัวอักษร (fontSize), ความหนาของตัวอักษร (fontWeight), และสีของตัวอักษร (color)

การรันแอปพลิเคชันบน Emulator/Simulator

เมื่อแก้ไขไฟล์ App.js เรียบร้อยแล้ว เราก็พร้อมที่จะรันแอปพลิเคชันบน Emulator (โปรแกรมจำลอง) หรือ Simulator (โปรแกรมจำลอง) ครับ Expo CLI มีคำสั่งที่ช่วยให้เราทำเช่นนั้นได้อย่างง่ายดาย

ใน Command Prompt หรือ Terminal ที่อยู่ในโฟลเดอร์ "HelloWorld" ให้พิมพ์คำสั่ง:

expo start

คำสั่งนี้จะเปิด Expo DevTools ใน Browser ของคุณ Expo DevTools เป็นเครื่องมือที่ช่วยให้เราจัดการและรันแอปพลิเคชัน React Native ได้ง่ายขึ้น

ใน Expo DevTools คุณจะเห็นตัวเลือกในการรันแอปพลิเคชันบน:

• Android Emulator/Simulator: ถ้าคุณมี Android Emulator หรือ Simulator ติดตั้งอยู่ (เช่น Android Studio Emulator) คุณสามารถคลิกที่ปุ่ม "Run on Android emulator/device" เพื่อรันแอปพลิเคชันบน Emulator/Simulator นั้น
• iOS Simulator: ถ้าคุณใช้ macOS และมี Xcode ติดตั้งอยู่ คุณสามารถคลิกที่ปุ่ม "Run on iOS simulator" เพื่อรันแอปพลิเคชันบน iOS Simulator
• Expo Go app: คุณสามารถดาวน์โหลดแอป Expo Go บนโทรศัพท์มือถือของคุณ (ทั้ง iOS และ Android) แล้วสแกน QR Code ที่แสดงใน Expo DevTools เพื่อรันแอปพลิเคชันบนโทรศัพท์มือถือของคุณจริง

เลือกวิธีที่คุณต้องการรันแอปพลิเคชัน เมื่อแอปพลิเคชันรันสำเร็จ คุณจะเห็นข้อความ "Hello World!" แสดงบนหน้าจอของ Emulator/Simulator หรือโทรศัพท์มือถือของคุณ

ข้อควรจำ: หากคุณเลือกที่จะรันบน Android Emulator/Simulator คุณอาจต้องติดตั้ง Android Studio และตั้งค่า Emulator ให้เรียบร้อยก่อน หากคุณเลือกที่จะรันบน iOS Simulator คุณต้องมี Xcode ติดตั้งอยู่บน macOS

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการสร้างโปรเจกต์ React Native อย่างง่ายด้วย Expo CLI และแสดงผลข้อความ "Hello World!" บนหน้าจอ เราได้เรียนรู้ขั้นตอนการติดตั้ง Expo CLI, การสร้างโปรเจกต์ใหม่, การแก้ไขไฟล์ App.js, และการรันแอปพลิเคชันบน Emulator/Simulator

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับ Component พื้นฐานของ React Native เช่น View, Text, และ Image ซึ่งเป็นส่วนประกอบหลักในการสร้าง User Interface (UI) ของแอปพลิเคชัน React Native ครับ