คู่มือติดตั้ง React Native ฉบับเข้าใจง่าย

React Native เป็น framework สำหรับสร้าง mobile apps ที่รันได้ทั้ง iOS และ Android โดยใช้ JavaScript

---

ทำไมต้องใช้ React Native?

ข้อดีหลัก:

1. Cross-platform - เขียนครั้งเดียว รันได้ทั้ง iOS และ Android
2. Native Performance - แปลงเป็น native code จริงๆ
3. Hot Reloading - เห็นผลลัพธ์ทันทีขณะพัฒนา
4. Large Ecosystem - npm packages เยอะมาก
5. JavaScript/TypeScript - ใช้ภาษาที่คุ้นเคย

---

ข้อกำหนดเบื้องต้น

macOS (สำหรับพัฒนา iOS)

• macOS 11.0 (Big Sur) หรือใหม่กว่า
• Xcode 14 หรือใหม่กว่า
• CocoaPods
• Node.js 18+

Windows/Linux (Android เท่านั้น)

• Node.js 18+
• JDK 17
• Android Studio
• Android SDK

---

การติดตั้ง Node.js

macOS/Linux

ใช้ nvm (แนะนำ):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install --lts
nvm use --lts

---

Windows

วิธีที่ 1: ดาวน์โหลดจาก https://nodejs.org/

วิธีที่ 2: ใช้ Chocolatey:

choco install nodejs

วิธีที่ 3: ใช้ Scoop:

scoop install nodejs

---

การติดตั้งสำหรับ iOS (macOS เท่านั้น)

ขั้นตอนที่ 1: ติดตั้ง Xcode

1. เปิด App Store
2. ค้นหา “Xcode”
3. กด Install
4. เปิด Xcode และ accept license

---

ขั้นตอนที่ 2: ติดตั้ง Command Line Tools

xcode-select --install

---

ขั้นตอนที่ 3: ติดตั้ง CocoaPods

sudo gem install cocoapods

---

ขั้นตอนที่ 4: ติดตั้ง Watchman

brew install watchman

---

การติดตั้งสำหรับ Android

ขั้นตอนที่ 1: ติดตั้ง JDK

macOS:

brew install openjdk@17

Linux (Ubuntu):

sudo apt update
sudo apt install -y openjdk-17-jdk

Windows:

choco install openjdk17

---

ขั้นตอนที่ 2: ติดตั้ง Android Studio

1. ไปที่ https://developer.android.com/studio
2. ดาวน์โหลดและติดตั้ง
3. เปิด Android Studio
4. เลือก More Actions → SDK Manager

---

ขั้นตอนที่ 3: ติดตั้ง SDK Components

เลือกติดตั้ง:

• Android SDK Platform 34
• Android SDK Build-Tools 34
• Android Emulator
• Android SDK Platform-Tools

---

ขั้นตอนที่ 4: ตั้งค่า Environment Variables

macOS/Linux (~/.bashrc หรือ ~/.zshrc):

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Windows (System Environment Variables):

ANDROID_HOME=C:\Users\YourUsername\AppData\Local\Android\Sdk

---

วิธีที่ 1: ใช้ Expo (แนะนำสำหรับมือใหม่)

Expo ช่วยให้เริ่มต้นง่าย ไม่ต้อง setup อะไรมาก

ติดตั้ง Expo CLI

npm install -g expo-cli

---

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

npx create-expo-app my-first-app
cd my-first-app

---

รันแอป

npx expo start

---

ทดสอบบนโทรศัพท์

ขั้นตอนที่ 1: ติดตั้ง Expo Go

• iOS: https://apps.apple.com/app/expo-go/id982107779
• Android: https://play.google.com/store/apps/details?id=host.exp.exponent

ขั้นตอนที่ 2: Scan QR code

• เปิด Expo Go
• Scan QR code จาก terminal

---

วิธีที่ 2: ใช้ React Native CLI

ติดตั้ง CLI

npm install -g react-native-cli

---

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

npx @react-native-community/cli init MyFirstApp
cd MyFirstApp

---

รันบน iOS (macOS เท่านั้น)

# ติดตั้ง pods
cd ios && pod install && cd ..

# รัน
npx react-native run-ios

---

รันบน Android

# เปิด emulator หรือต่อโทรศัพท์จริง
npx react-native run-android

---

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

Expo Project

my-expo-app/
├── app.json          # Expo config
├── App.js            # Main component
├── package.json
├── assets/           # Images, fonts
└── node_modules/

---

React Native CLI Project

my-rn-app/
├── android/          # Android native code
├── ios/              # iOS native code
├── src/
│   ├── components/
│   ├── screens/
│   └── App.js
├── index.js
└── package.json

---

โค้ดตัวอย่าง

App.js พื้นฐาน

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

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.count}>Count: {count}</Text>
      <Button
        title="Press me"
        onPress={() => setCount(count + 1)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  count: {
    fontSize: 18,
    marginBottom: 10,
  },
});

---

เครื่องมือที่ควรติดตั้ง

1. React Native Debugger

# macOS
brew install --cask react-native-debugger

---

2. Flipper

ดาวน์โหลดจาก https://fbflipper.com/

---

3. VS Code Extensions

# React Native Tools
code --install-extension msjsdiag.vscode-react-native

# ES7+ React Snippets
code --install-extension dsznajder.es7-react-js-snippets

---

การ Debug

ใช้ console.log

console.log('Debug message');
console.warn('Warning!');
console.error('Error!');

---

React DevTools

npm install -g react-devtools
react-devtools

---

Debug Menu

iOS: กด Cmd + D

Android: กด Cmd + M หรือเขย่าเครื่อง

---

การรันบนอุปกรณ์จริง

iOS

1. เปิด Xcode
2. เลือกโปรเจกต์ใน ios/ folder
3. Signing & Capabilities → เลือก Team
4. ต่อ iPhone → Build

---

Android

1. เปิด Developer Options บนโทรศัพท์
2. เปิด USB Debugging
3. ต่อสาย USB
4. รัน:

adb devices
npx react-native run-android

---

Expo vs React Native CLI

Feature	Expo	React Native CLI
Setup	ง่าย	ซับซ้อน
Native Code	จำกัด	เต็มที่
Bundle Size	ใหญ่กว่า	เล็กกว่า
มือใหม่	✅ แนะนำ	⚠️ ต้องรู้ native

---

ขั้นตอนถัดไป

1. เรียนรู้พื้นฐาน

• Components (View, Text, Image)
• Props และ State
• Styling (StyleSheet)
• Navigation (React Navigation)

---

2. ศึกษา Advanced Topics

• State Management (Redux, Zustand)
• API Calls (Axios, Fetch)
• Storage (AsyncStorage)
• Animations (Reanimated)

---

3. สร้างโปรเจกต์

• Todo List App
• Weather App
• Chat App

---

แหล่งเรียนรู้

Official:

• React Native: https://reactnative.dev/
• Expo: https://docs.expo.dev/
• React Navigation: https://reactnavigation.org/

---

Happy Coding with React Native!