DEV Community

c_nooknook_daily_prompt
c_nooknook_daily_prompt

Posted on

React Native Beginner

#programming #javascript #beginners #react

React Native Beginner
เป้าหมาย:
เตรียม macOS ให้พร้อมสำหรับการสร้างแอป React Native (แบบ Native – Android และ iOS)

1.เตรียมเครื่องก่อนติดตั้ง
สเปกเครื่องที่แนะนำ
OS: macOS Ventura หรือใหม่กว่า

RAM: อย่างน้อย 8 GB (แนะนำ 16 GB ขึ้นไปเพื่อรัน Android Emulator + iOS Simulator พร้อมกัน)

พื้นที่ว่างในเครื่อง: 15 GB ขึ้นไป
(Android SDK, Xcode, Gradle, Node Modules กินพื้นที่มาก)

2.ติดตั้งเครื่องมือพื้นฐาน

  • Homebrew (ตัวช่วยติดตั้งเครื่องมือ)

https://brew.sh/

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Enter fullscreen mode Exit fullscreen mode
  • Node.js (แนะนำใช้ nvm หรือ volta) ติดตั้ง Node.js และแนะนำเวอร์ชัน (เช่น node >= 18) 
brew install volta /or
volta install node
Enter fullscreen mode Exit fullscreen mode

ตรวจสอบการติดตั้ง node

node -v
Enter fullscreen mode Exit fullscreen mode
  • ติดตั้ง NPM 
node install npm
Enter fullscreen mode Exit fullscreen mode

ตรวจสอบการติดตั้ง npm

npm -v
Enter fullscreen mode Exit fullscreen mode
  • ติดตั้ง Watchman (สำหรับ macOS ใช้ตรวจจับไฟล์เปลี่ยน) 
brew install watchman
Enter fullscreen mode Exit fullscreen mode

ตรวจสอบการติดตั้ง

watchman -v
Enter fullscreen mode Exit fullscreen mode
  • ติดตั้ง cocaopods 
brew install cocoapods
Enter fullscreen mode Exit fullscreen mode
  • ติดตั้ง JDK (Java Development Kit) 
brew install temurin17
Enter fullscreen mode Exit fullscreen mode

ตรวจสอบการติดตั้ง Java

java -version
Enter fullscreen mode Exit fullscreen mode

3.ติดตั้ง xcode and simulator (iPhone 16 pro and iOS 18.5)

https://apps.apple.com/us/app/xcode/id497799835?mt=12/

4.ติดตั้ง andriod studio

https://developer.android.com/studio?authuser=6&hl=th

ตั้งค่าดังนี้

4.1.ไปที่ sidebar Tools -> SDK manager

4.2.Android SDK Build-Tools Version 35.0.0

4.3.ติดตั้ง NDK (side by side) 27.1.12297006

4.4.ติดตั้ง Andriod SDK-Command-line Tools (lastest)

4.5.CMake 3.22.1

4.6.Andriod Emulator, Andriod SDK Platform Tools

  • in /.zshrc file 
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$ANDROID_HOME/b$

export ANDROID_NDK_HOME=$ANDROID_HOME/ndk/your-version
export PATH=$ANDROID_NDK_HOME:$PATH

export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"
export CPPFLAGS="-I/opt/homebrew/opt/openjdk@17/include"
Enter fullscreen mode Exit fullscreen mode

5.สร้าง project in VScode

npx @react-native-community/cli init MyReactNativeFirst
Enter fullscreen mode Exit fullscreen mode

  • answer Y เพื่อ install pod

  • สร้าง file local.properties in andriod folder

cmake.dir=/Users/your-user-name/Library/Android/sdk/cmake/3.22.1
ndk.dir=/Users/your-user-name/Library/Android/sdk/ndk/27.1.12297006
Enter fullscreen mode Exit fullscreen mode
  • on MacOS สำหรับกำหนดค่า memory ในเครื่อง และภาษาเพื่อให้เสถียร 
#Specifies the JVM arguments used for the daemon process.
#The setting is particularly useful for tweaking memory settings.
#Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
org.gradle.jvmargs=-Xmx2048m -Duser.country=US -Duser.language=en -XX:MaxMetaspaceSize=512m
Enter fullscreen mode Exit fullscreen mode

📌 แล้วทำไมมักเห็นใน org.gradle.jvmargs?
เพราะบางครั้ง Gradle หรือ plugin บางตัวอาจจะแสดงผลลัพธ์แตกต่างกันไปตาม locale ของเครื่อง
เช่น:
เครื่อง dev เป็นภาษาไทย → build log หรือ error message ออกมาเป็นภาษาไทย
เวลาเขียน shell script หรือเขียน plugin แล้วเอาไปใช้บน server (ที่ใช้ locale อังกฤษ) → อาจเจอพฤติกรรมต่างกัน
🎯 ดังนั้นจึงตั้ง -Duser.country=US -Duser.language=en เพื่อให้ผลลัพธ์ทุกคนเหมือนกัน (ใช้ US/English เสมอ)

6.run project

cd MyReactNativeFirst
|
v
npm install
Enter fullscreen mode Exit fullscreen mode
  • ถ้ามี error 
npx react-native doctor
Enter fullscreen mode Exit fullscreen mode
  • ถ้าอยากดู รายละเอียด 
npx react-native info
Enter fullscreen mode Exit fullscreen mode

7.รัน android

react-native run-android
Enter fullscreen mode Exit fullscreen mode

8.รัน ios

react-native run-ios
Enter fullscreen mode Exit fullscreen mode

Top comments (0)