React Native with Expo

จากบทความก่อนหน้าเราได้พูดถึงการเรียนรู้เบื้องต้นของภาษา JavaScript มาพอสมควรแล้ว ดังนั้นเราจึงจะต่อว่าทำไมเราถึงจำเป็นต้องเรียน ภาษา JavaScript เหตุผลเป็นเพราะว่า React Native ที่เราได้เลือกใช้ในการพัฒนา Moblie application จะถูกเขียนด้วยภาษา JavaScript นั่นเอง

ก่อนอื่นเราจะมารู้จักกันก่อนว่า React native คืออะไร แล้วทำไมถึงต้องเลือกใช้ React native ในการพัฒนา Mobile Application

React-Native คือ Cross-Platform Framework ที่ใช้ในการพัฒนา Native Mobile Application อย่าง Android และ iOS ที่พัฒนาโดยบริษัท Facebook inc React Native ในการทำแอพที่รันได้ทั้งบน Android และ iOS โดยใช้ภาษาหลักภาษาเดียว คือภาษา ReactJS (ES6 / JSX) ซึ่งใกล้เคียงกับ Javascript / Typescript / XML ในการพัฒนาแอพ ซึ่งเมื่อทำเสร็จ แอพจะทำงานไวใกล้เคียงกับการเขียนด้วย ภาษา Native อย่าง Java และ Swift/Objective-C

เครื่องมือที่เราเลือกใช้สำหรับการพัฒนา Mobile App ด้วย React Native ก็จะมีทั้งแบบ Quick Start และ Build Projects with Native Code

• Quick Start คือ วิธีที่เน้นความสะดวก ไม่ต้องสนใจการ Config ไม่ต้องมี Android Studio หรือ XCode เพราะใช้เจ้าตัว Expo มาจัดการให้ทุกอย่าง เหมาะสำหรับการพัฒนาที่ไม่ต้องเข้าไปยุ่งกับ Coding หรือ Libs ในส่วนที่เป็น Native Code (Java, Objective C)
• Build Projects with Native Code คือ วิธีที่ต้อง Config ค่าต่าง ๆ เอง ต้องมี XCode สำหรับ iOS และ Android Studio สำหรับ Android ซึ่งเป็นวิธีที่มาตั้งแต่การเกิดของ React Native เหมาะสำหรับงานเล็กไปจนถึงงานใหญ่เวอร์

โดยอ้างอิงจาก Document ของทาง Facebook

Quick Start

เริ่มต้นติดตั้ง Expo

โดย Expo เป็นเฟรมเวิร์กและแพลตฟอร์มสำหรับแอปพลิเคชัน React เป็นชุดเครื่องมือและบริการที่สร้างขึ้นจาก React Native และแพลตฟอร์ม native ที่ช่วยให้พัฒนา สร้าง ปรับใช้ และทำซ้ำได้อย่างรวดเร็วบน iOS, Android และเว็บแอปจากฐานโค้ด JavaScript/TypeScript เดียวกัน

npm install — global expo-cli

เพียงเท่านี้เราก็ติดตั้ง expo ได้แล้ว

จากนั้นเราก็มาสร้าง Project ของเราโดยการพิมคำสั่ง

expo init irms
cd irms

เมื่อเราสร้าง app เสร็จเรียบร้อยแล้ว เราก็เข้าไปยัง folder ของเราแล้วทำการ Run คำสั่ง start เพื่อให้ตัว expo ทำงาน

npm start

เมื่อเราสั่ง start เราก็ได้ตัว QRcode มาเราสามารถทำการสแกนเพื่อดูหน้าตาของ App เราได้เลย

โดยมี option ต่างๆ

และนี่คือภาพตัวอย่างของแอปพลิเคชั่นที่ได้ลองสร้างดูครับ

หน้า Login

ก่อนอื่นเราต้องโหลดแอพฯ Expo มาก่อนครับ โหลดได้จากที่นี่เลยครับ

สำหรับ IOS โหลดที่

‎Expo Go

สำหรับ Android โหลดที่

Expo - Apps on Google Play

Reference :

• https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/
• https://docs.expo.dev/
• https://www.codemobiles.co.th/online/course.php?id=react_native
• https://www.reactnative.express/
• https://reactnative.dev/docs/environment-setup