React Native คืออะไร ทำความรู้จัก และเริ่มต้นสร้าง Project

React Native คือ React Framework ที่ช่วยให้สามารถสร้าง Mobile Application ได้ง่ายยิ่งขึ้น ซึ่งช่วยลดเวลาและค่าใช้จ่ายในการพัฒนา ด้วยประสิทธิภาพที่ใกล้เคียงกับ Native App ทำให้ธุรกิจสามารถเข้าถึงผู้ใช้ได้มากขึ้นและรวดเร็วขึ้น นอกจากนี้ React Native ยังมีชุมชนที่ใหญ่และเครื่องมือที่หลากหลาย ช่วยสนับสนุนการพัฒนาอย่างต่อเนื่อง หากคุณกำลังมองหาวิธีในการพัฒนาแอปพลิเคชันที่มีประสิทธิภาพและคุ้มค่า React Native เป็นตัวเลือกที่ไม่ควรมองข้ามเลยนั่นเองครับ

React Native เครื่องมือสร้างแอป Cross-Platform

React Native คือเครื่องมือที่พัฒนาโดย Facebook สำหรับการสร้างแอปพลิเคชันมือถือบนระบบปฏิบัติการ Android และ iOS โดยใช้ภาษา JavaScript เป็นหลัก 

มันเป็นการพัฒนาต่อยอดจาก React ซึ่งเป็น JavaScript Framework ที่ใช้สำหรับการสร้างเว็บไซต์ เพื่อให้นักพัฒนาสามารถสร้างแอปพลิเคชันมือถือได้อย่างมีประสิทธิภาพ สำหรับทั้งสองระบบปฏิบัติการนี้ในเวลาเดียวกัน

แล้ว React กับ React Native แตกต่างกันอย่างไร

React และ React Native คือเครื่องมือที่พัฒนาโดย Facebook ซึ่งมีวัตถุประสงค์ที่แตกต่างกันในการสร้างแอปพลิเคชันและเว็บไซต์ โดย React ใช้สำหรับพัฒนาเว็บไซต์ที่ทำงานบนเบราว์เซอร์ ขณะที่ React Native ใช้สำหรับสร้างแอปพลิเคชันมือถือที่รองรับทั้ง iOS และ Android

ความแตกต่างหลักระหว่างทั้งสองคือแพลตฟอร์มที่รองรับ โดย React เน้นการพัฒนาเว็บแอปพลิเคชัน ด้วยการใช้คอมโพเนนต์ในการสร้าง UI ที่แสดงผลในเบราว์เซอร์ ในขณะที่ React Native มุ่งเน้นการสร้าง UI สำหรับมือถือ โดยสามารถเข้าถึงฟีเจอร์เฉพาะของอุปกรณ์ เช่น กล้องและ GPS เป็นต้น

แม้ว่าจะมีการใช้ Component ที่คล้ายกันในบางส่วน แต่ Syntax ของโค้ดในแต่ละแพลตฟอร์มจะมีความแตกต่างกัน โดย React จะใช้ JSX ในการสร้าง Component ขณะที่ React Native ใช้ Component เฉพาะสำหรับมือถือ เช่น View และ Text นอกจากนี้ การจัดการสไตล์ใน React Native ใช้ JavaScript แทน CSS ซึ่งทำให้มีความยืดหยุ่นมากขึ้น

โดยรวมแล้ว ทั้ง React และ React Native มีจุดเด่นและข้อจำกัดที่แตกต่างกัน ขึ้นอยู่กับความต้องการและวัตถุประสงค์ในการพัฒนาแอปพลิเคชัน หรือเว็บไซต์ที่ทางคุณต้องการสร้างนั่นเองครับ

เริ่มต้นการสร้าง Project ด้วย React Native ต้องทำอย่างไรบ้าง

1. ติดตั้ง Node.js และ npm (หรือ yarn)

หากคุณยังไม่ได้ติดตั้ง Node.js ให้ไปที่เว็บไซต์ https://nodejs.org/  และดาวน์โหลดติดตั้ง Node.js เข้ากับเครื่องของคุณ โดย npm นั้นจะถูกติดตั้งมาพร้อมกับ Node.js ถ้าใช้เวอร์ชันที่เป็นมาตรฐาน หรือหากจะใช้ yarn สามารถดาวน์โหลดและติดตั้งจาก https://classic.yarnpkg.com/ ได้เช่นกันครับ

จากนั้นให้รันคำสั่ง npm install -g create-react-native-app ตามด้วยรันคำสั่งต่อไปนี้ (ทางผมขอใช้ชื่อ Project ว่า tidApp นะครับ) 

create-react-native-app tidApp

cd tidApp

npm start

เพื่อสร้าง Project React Native และ Start โดยเมื่อรันคำสั่งเสร็จแล้วนั้น จะมี option ให้เลือกดังนี้ครับ

> Press a to open Android device or emulator, or i to open iOS emulator.

> Press s to send the app URL to your phone number or email address

> Press q to display QR code.

> Press r to restart packager, or R to restart packager and clear cache.

> Press d to toggle development mode. (current mode: development)

2. สร้าง Project ด้วย Native Code

เริ่มต้นติดตั้ง dependencies ที่จำเป็นที่ต้องใช้ โดยตรวจสอบได้ตามหัวข้อดังนี้

• Mac : รองรับ iOS, Android
• Windows : รองรับ Android เท่านั้น
• Linux : รองรับ Android เท่านั้น

เริ่มต้นติดตั้ง react-native-cli ซึ่งจะเป็นตัวที่รวมคำสั่งของ react-native เอาไว้ ด้วยคำสั่ง npm install -g react-native-cli จากนั้นให้สร้าง Project (ทางผมขอใช้ชื่อ Project ว่า tidApp นะครับ) โดยรันคำสั่ง react-native init tidApp ครับ

3. หากรันด้วย iOS

เมื่อสร้าง Project เสร็จแล้ว จะ cd ไปที่ Folder ที่ Project และเริ่ม Run iOS เพื่อทดสอบ โดยใช้คำสั่ง

cd tidApp

react-native run-ios

ซึ่ง iOS Emulator จะถูกเปิดขึ้นมาอัตโนมัติ และได้ผลลัพธ์เป็นหน้า Welcome to React Native! ก็ถือว่าเป็นอันเสร็จสิ้นการรันบน iOS

4. หากรันด้วย Android 

สำหรับ Android แนะนำให้เปิด Android Studio ขึ้นมารันก่อน เนื่องจากต้องเปิด Android Emulator ด้วยตนเอง และ Gradle ที่ React Native ให้มายังเป็นมีค่า Setting ที่เป็นค่าเก่า ซึ่งใน Android Studio จะมีการตรวจสอบให้ครับ

โดยเปิด Android Studio และเลือก Open an existing Android Studio project และเลือก Folder ที่ชื่อว่า android ใน Project ของเรา

จากนั้นเริ่มต้นด้วยการสร้าง 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 ให้เลือก รุ่นของสมาร์ทโฟนที่จะใช้งาน โดยทางผมจะเลือกเป็น Nexus 5X จากนั้นให้ Next และ Finish ได้เลย เพราะค่าอื่น ๆ ให้ใช้ตาม Default ก็เพียงพอครับ ซึ่งเมื่อได้ Emulator มาแล้วก็สามารถเปิดได้เลยครับ

และเมื่อเริ่มรัน สามารถสั่งรันที่ใน Android Studio ได้ หรือจะมารัน Command ที่ Terminal/CMD ก็ได้ครับ แต่ขอแนะนำให้รันด้วย Command ก่อนโดยใช้คำสั่ง react-native run-android เป็นอันเสร็จสิ้นการรันบน Android ครับ

ที่สำคัญคืออย่าลืมใส่ google() ที่ build.gradle ก่อนรันด้วย Command โดยใช้คำสั่ง react-native run-android นะครับ ไม่อย่างนั้นการรัน Command จะขึ้น Error ได้ครับ

5. ทดสอบการใช้งาน

ให้เปิดไฟล์ App.js ขึ้นมา และแก้ Code ในส่วนของตัวแปรที่ชื่อว่า instructions จากนั้นมา Reload เพื่อดูการเปลี่ยนแปลง ซึ่งวิธีการคือ

• สำหรับ iOS ให้ ⌘+R
• สำหรับ Android ให้ R 2 ครั้ง

โดยหากขึ้นหน้า Welcome to React Native! ก็ถือว่าเป็นการเสร็จสิ้นการทดสอบการใช้งานแล้วครับ

สรุป

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