1. รู้จัก React Native และข้อดีของการใช้
React Native เป็นเฟรมเวิร์กสำหรับพัฒนาแอปพลิเคชันมือถือที่รองรับทั้ง iOS และ Android โดยใช้ภาษา JavaScript และ React ซึ่งช่วยให้นักพัฒนาสร้างแอปที่มีประสิทธิภาพและหน้าตาเหมือน Native App ได้อย่างง่ายดาย

ข้อดีของการใช้ React Native:

• เขียนโค้ดเพียงครั้งเดียว: รองรับการทำงานบนทั้ง iOS และ Android
• ประหยัดเวลาและค่าใช้จ่าย: ไม่ต้องพัฒนาสองแอปแยกกัน
• ประสิทธิภาพสูง: ทำงานได้ใกล้เคียงกับ Native App
• Community ที่ใหญ่: มีแพ็กเกจและ library ให้ใช้งานจำนวนมาก

การติดตั้ง Node.js และ React Native CLI

ติดตั้ง Node.js
Node.js เป็นเครื่องมือที่จำเป็นสำหรับการใช้งาน React Native

• ดาวน์โหลดและติดตั้ง Node.js จากเว็บไซต์ Node.js
• ตรวจสอบการติดตั้ง

node -v
npm -v

ติดตั้ง React Native CLI
React Native CLI เป็นเครื่องมือสำหรับสร้างและจัดการโปรเจกต์

• ติดตั้ง React Native CLI

npm install -g react-native-cli

การสร้างโปรเจกต์แรก:

คำสั่งสำหรับเริ่มต้นโปรเจกต์ด้วย Expo CLI

npx create-expo-app MyFirstApp
cd MyFirstApp
npm start

คำสั่งสำหรับเริ่มต้นโปรเจกต์ด้วย React Native CLI:

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-android

โครงสร้างของโปรเจกต์:

App.js: ไฟล์หลักที่ใช้เริ่มต้นการทำงานของแอปnode_modules: โฟลเดอร์สำหรับจัดการ dependencies package.json: ไฟล์ที่บันทึกรายละเอียดของโปรเจกต์

• App.js: ไฟล์หลักที่ใช้เริ่มต้นการทำงานของแอป
• node_modules: โฟลเดอร์สำหรับจัดการ dependencies
• package.json: ไฟล์ที่บันทึกรายละเอียดของโปรเจกต์

การรันโปรเจกต์บน iOS และ Android Emulator
4.1 การรันบน Android Emulator

• ติดตั้ง Android Studio และตั้งค่า AVD (Android Virtual Device)
• รันคำสั่ง

npx react-native run-android

การรันบน iOS Emulator

• ติดตั้ง Xcode และตั้งค่า iOS Simulator
• รันคำสั่ง:

npx react-native run-ios

การรันแอปแบบ Live Reload
เมื่อแก้ไขโค้ดใน App.js สามารถบันทึกและดูผลแบบเรียลไทม์ใน Emulator

ตัวอย่างโค้ดใน App.js

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

การรันแอปพลิเคชัน:

• ใช้คำสั่ง npm start เพื่อรันแอปใน Expo หรือ npx react-native run-android/run-ios สำหรับ React Native CLI
• สแกน QR Code ผ่าน Expo Go หรือดูผลใน Emulator

ข้อดีของ React Native:

• เขียนโค้ดเพียงครั้งเดียวแต่รองรับหลายแพลตฟอร์ม
• มี community ที่ใหญ่และ library มากมาย