[React Native] คืออะไร ทำความรู้จัก และเริ่มต้นสร้าง Project
React Native คือ เครื่องมือที่สามารถ Build Mobile Application ทั้ง iOS และ Android หรือก็คือเป็น Cross Platform Technology นั่นเอง โดยใช้ JavaScript เป็นหลักในการพัฒนา
ซึ่ง React Native ถูกสร้างขึ้นโดยทีมงาน Facebook เป็น Open source ที่มี License เป็น MIT และเป็น Framwork ที่สามารถเข้าถึง Native ได้ แถมยังมี Community ที่กว้าง มีนักพัฒนาหลายคน ทำ Lib ออกมาให้ได้ใช้กันอย่างไม่มีค่าใช้จ่ายอีกด้วย จึงเป็น Tools ตัวหนึ่งที่เป็นที่นิยมมากในปัจจุบัน
ท่านผู้อ่านสามารถดูรายละเอียดเพิ่มเติมได้ที่ลิงค์ด้านล่าง
ทำความรู้จัก React Native
ก่อนเริ่มทำสิ่งใดซักอย่าง จะให้ดีก็ต้องรู้จักกับสิ่งนั้นก่อน
ทำไมถึงมาเป็น React Native ได้ ?
สำหรับการเกิดขึ้นของ React Native นั้น เป็นการนำ ReactJS ซึ่งเป็น JavaScript Framework ของทาง Facebook ที่ใช้กับ Web site มาต่อยอดใช้กับ Mobile จึงสามารถใช้ส่วนของข้อดีต่าง ๆ ของ ReactJS ได้ ยกอย่างเช่น การใช้ Code ร่วมกันในรูปแบบ Component
ในส่วนของการเกิดขึ้นของ React Native สามารถอ่านเพิ่มเติมได้จากบทความของคุณ Koolapat Sirikamol ได้จากบทความนี้ครับ
Architecture ของ React Native
เป็นการทำงานของ JavaScript ที่เราเขียน สื่อสารกับฝั่งของ Native ด้วย JSON แบบเฉพาะ มีลักษณะเป็น Serialization โดยเราเรียกส่วนที่มันสื่อสารกันว่า Bridge
ซึ่งแน่นอนว่าสุดท้าย เราจะได้ Native App ทั้ง iOS และ Android
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ Architecture นี้ ขอแนะนำให้อ่านบทความของคุณ Koolapat Sirikamol เช่นกันครับ
การติดตั้ง Tools สำหรับการพัฒนา Mobile App ด้วย React Native
มาเริ่มในส่วนของการติดตั้ง … โดยใน Document ของทาง Facebook แบ่งไว้ 2 แบบ คือ
- 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 (ทาง Android จะเหนื่อยกว่าหน่อย 😂😂) ซึ่งเป็นวิธีที่มาตั้งแต่การเกิดของ React Native เหมาะสำหรับงานเล็กไปจนถึงงานใหญ่เวอร์
Quick Start
เริ่มต้นติดตั้ง create-react-native-app ซึ่งจะเป็นตัว Install Package ที่จำเป็น และจัดการ Config ให้เราครับ ต้องใช้ npm ในการติดตั้ง หากท่านผู้อ่านท่านใดยังไม่มี Node.js ให้โหลดให้เรียบร้อย และรันคำสั่งด้านล่างนี้ครับ
npm install -g create-react-native-appจากนั้นให้รันด้วยคำสั่งข้างล่างเพื่อสร้าง Project React Native และ Start โดยทางผู้เขียนจะใช้ชื่อ Project ว่า jedApp
create-react-native-app jedApp
cd jedApp
npm startจะได้ผลลัพธ์ด้านล่าง
เมื่อรันคำสั่งเสร็จแล้ว จะมี option ให้เลือกดังนี้
ทางผู้เขียนจะขอทดสอบการเปิด iOS emulator ด้วยการพิมพ์ i ได้ผลลัพธ์ดังนี้
Build Projects with Native Code
เริ่มต้นติดตั้ง dependencies ที่จำเป็นที่ต้องใช้ โดยตรวจสอบได้ตามหัวข้อดังนี้
เริ่มต้นติดตั้ง react-native-cli ซึ่งจะเป็นตัวที่รวมคำสั่งของ react-native เอาไว้
npm install -g react-native-cliจากนั้นสร้าง Project โดยรันคำสั่งด้านล่าง ทางผู้เขียนจะใช้ชื่อ Project คือ jedApp
react-native init jedApp
Run iOS (ปัจจุบันรองรับสำหรับ Mac เท่านั้น)
เมื่อสร้าง Project เสร็จแล้ว จะ cd ไปที่ Folder ที่ Project และเริ่ม Run iOS เพื่อทดสอบ โดยใช้คำสั่งดังนี้
cd jedApp
react-native run-ios
iOS Emulator จะถูกเปิดขึ้นมาอัตโนมัติ และได้ผลลัพธ์ดังภาพด้านล่าง
เป็นอันเสร็จสิ้นการ Run iOS
Run Android
สำหรับ Android แนะนำให้เปิด Android Studio ขึ้นมารันก่อน เนื่องจากต้องเปิด Android Emulator ด้วยตนเอง และ Gradle ที่ React Native ให้มายังเป็นมีค่า Setting ที่เป็นค่าเก่า ซึ่งใน Android Studio จะมีการตรวจสอบให้ครับ
เปิด Android Studio และเลือก Open an existing Android Studio project และเลือก Folder ที่ชื่อว่า android ใน Project ของเรา
เมื่อเข้ามาแล้ว ถ้าพบกับหน้าจอตามภาพด้านล่างให้เลือกที่ Update
ต่อไปทางผู้เขียนจะเริ่มโดยการสร้าง Android Emulator ก่อน โดยคลิกที่ icon AVD Manager ตามภาพด้านล่าง
จากนั้นจะพบกับหน้าจอ Your Virtual Devices ซึ่งยังไม่มี Virtual Device หรือ Emulator ใด ๆ ให้คลิกที่ + Create Virtual Device …
และเลือก System Image ที่ต้องการ โดยทางผู้เขียนเลือก Nouget API Lavel 25 (Ancroid 7.1.1) ให้คลิกที่ Download จากนั้นให้รอจนกว่าจะเสร็จ
เมื่อเสร็จแล้ว ต่อไปคือหน้าจอ Select Hardware ให้เลือก รุ่นของ Phone ที่ใช้ ทางผู้เขียนเลือก Nexus 5X (ไม่ต้องกังกวลครับ ไม่ชอบใจก็ลบเดี๋ยวสร้างใหม่ 😎😎) จากนั้นให้ Next และ Finish ได้เลย เพราะค่าอื่น ๆ ให้ใช้ตาม Default ก็เพียงพอครับ
เมื่อเราได้ Emulator มาแล้วก็เปิดเลยครับ (แค่นี้ก็จุกจิกกว่า iOS ละครับ)
ต่อไปจะเริ่ม Run ซึ่งเราสามารถสั่ง Run ที่ใน Android Studio ได้ หรือจะมา Run Command ที่ Terminal/CMD ก็ได้ครับ แต่ขอแนะนำให้ Run ด้วย Command ก่อน
โดยใช้คำสั่ง
react-native run-androidและจำได้ผลลัพธ์ตามภาพด้านล่าง
💥💥💥 Boooooooom ~~~💥💥💥
อะไรหว่า แค่เริ่มก็เอาเลยหรอ ที่นี้ลองเอา Error ไปถามป๋า Google ก็ได้คำตอบว่า
อ่อ … ให้ไปใส่ google() ที่ build.gradle งั้นก็จัดไป
เมื่อใส่เสร็จแล้วกลับมารัน react-native run-android อีกครั้ง
เป็นอันเสร็จสิ้นการ Run Android
ทดสอบการใช้งาน
ให้เปิดไฟล์ App.js ขึ้นมา และแก้ Code ในส่วนของตัวแปรที่ชื่อว่า instructions เป็นประมาณนี้
จากนั้นมา Reload เพื่อดูการเปลี่ยนแปลง
- สำหรับ iOS ให้ ⌘+R
- สำหรับ Android ให้ R 2 ครั้ง
จบไปเรียบร้อยครับ สำหรับบทความนี้ ทางผู้เขียนก็มี plan ว่าจะเขียนบทความหน้าเกี่ยวกับ React Native ต่อไป ฝากติดตามด้วยนะครับ
แนะนำ
หากท่านผู้อ่านอยากเห็น Demo ของ Application ที่สร้างจาก React Native แนะนำให้ Download Application นี้มาลองครับ
สำหรับ Android
สำหรับ iOS
ส่วน Document เพิ่มเติม นอกจากอ่านได้ที่ facebook github แล้ว ขอแนะนำเว็บไซต์ reactnativeexpress ครับ เพราะเป็นที่ ๆ รวมทุกอย่างที่จำเป็นไว้หมดเลย ทั้งการใช้งาน ES6, JSX และผลลัพธ์ของการ Compile จาก ES6, JSX หรือจะเป็นผลลัพธ์ของ Component ก็มีครับ
และสำหรับท่านผู้อ่านท่านใดต้องการจริงจังกับ React Native ขอแนะนำให้โฟกัส 7 อย่าง ตามที่ Kitti Pariyaakkarakul เพื่อนของผู้เขียนได้กล่าวไว้ เพราะมันเป็นสิ่งที่จะต้องเจอปัญหา และต้องย้อนกลับมาทำความเข้าใจแน่ ๆ สามารถอ่านได้ที่ลิงค์ด้านล่างครับ
ส่วนเรื่องที่มาทำงานเกี่ยวกับ React Native และมาเขียนบทความแชร์ อยากจะขอบคุณ พี่ดิว olDuelo ณ ที่นี้ ที่ทำให้ผมได้รู้จักเทคโนโลยี Cross Platform และรู้จัก React Native และได้มาทำงานที่ชอบครับ
หากท่านใดสนใจบทความของพี่ดิวก็ติดตามกันได้ที่ลิงค์ด้านล่างนี้ครับ
หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ อยากติชม สามารถติดต่อผู้เขียนได้เลยครับ
Reference
- React Native คืออะไร ? เกิดขึ้นมาได้ยังไง
- Architecture ของ React Native
- https://stackoverflow.com/a/47591639
- https://stackoverflow.com/a/32640154
- https://facebook.github.io/react-native/docs/getting-started.html
- 7 ข้อแนะนำเบื้องต้น ในการเขียน React Naive
- 789 งานเร่งกับ React Native (Setup)
- https://speakerdeck.com/frantic/react-native-under-the-hood
- https://speakerdeck.com/mkonicek/under-the-hood-of-react-native
- http://www.reactnativeexpress.com/
