React Native คืออะไร ? เครื่องมือพัฒนา Mobile Apps แบบ Cross-Platform

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>React Native คือ Javascript Framework<&sol;strong> หรือ ชุดคำสั่งที่ถูกสร้างขึ้นมาสำหรับพัฒนา Mobile Application แบบ Cross-platform เราสามารถเขียนคำสั่งชุดเดียว หรือมีความแตกต่างกันแต่ไม่มาก แต่สามารถทำงานได้บนระบบปฏิบัติการที่แตกต่างกัน โดยใช้ Javascript เป็นภาษาหลักในการเขียนโปรแกรม <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">React Native สามารถพัฒนา Mobile Apps บนระบบปฏิบัติการ iOS &lpar; Upload to Apple Apps Store &rpar; และ ระบบปฏิบัติการ Android &lpar; Upload to Google Play Store &rpar; โดยมีความความเสถียรที่เทียบเท่าหรือใกล้เคียงกับ Mobile Apps ที่พัฒนาแบบ Native 100&percnt; ซึ่งส่วนนี้ ขึ้นอยู่หลายปัจจัย ทั้งตัวผู้พัฒนาเอง การบริหารจัดการ resource อื่น ๆ<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;05&sol;React-Native-คืออะไร-เครื่องมือพัฒนา-Mobile-Apps-แบบ-Cross-Platform2-940x259&period;png" alt&equals;"" class&equals;"wp-image-4930" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;05&sol;React-Native-คืออะไร-เครื่องมือพัฒนา-Mobile-Apps-แบบ-Cross-Platform2&period;png" data-full-size&equals;"2543x700" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>Native Performance<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ทำไม React Native ถึงสามารถมี Performance ที่เทียบเท่าหรือใกล้เคียงกับการพัฒนาแบบ Native เหตุผลเพราะโครงสร้างหลักของ React Native ถูกพัฒนาตั้งต้นมาแบบ Native เรียกว่า <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;reactnative&period;dev&sol;docs&sol;native-modules-android" target&equals;"&lowbar;blank">Native Modules<&sol;a> ความหมายคือ ถ้าเราจำเป็นจะต้องใช้ ScrollView เพื่อแสดงรายการสินค้าหรือร้านค้าภายในแอพ React Native จะมี ScrollView Component ที่ถูกพัฒนามาจาก Objective-C หรือ Swift สำหรับ iOS และมี ScrollView ที่ถูกพัฒนาจากภาษา Java สำหรับ Android ให้เราใช้งานสั่งการ เขียนโปรแกรมด้วยภาษา Javascript ภาษาเดียว เรียกว่า React Native Bridge <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">นักพัฒนาทั่วโลกสามารถพัฒนา <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;reactnative&period;dev&sol;docs&sol;native-modules-android" target&equals;"&lowbar;blank">Native Modules<&sol;a> เองได้ เพื่อให้ตรงกับการใช้งานที่หลากหลายและแตกต่างกัน ด้วย Community ที่แข็งแกร่งของ React Native ทำให้ปัจจุบันมีการพัฒนา <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;reactnative&period;dev&sol;docs&sol;native-modules-android" target&equals;"&lowbar;blank">Native Modules<&sol;a> จากนักพัฒนาทั่วโลก และเปิดให้นักพัฒนาสาย React Native ใช้งานได้ ซึ่งแทบจะครอบคลุมทุกส่วนการพัฒนาสำหรับแอพพลิเคชั่นมือถือ <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;05&sol;React-Native-คืออะไร-เครื่องมือพัฒนา-Mobile-Apps-แบบ-Cross-Platform3-940x316&period;png" alt&equals;"" class&equals;"wp-image-4932" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;05&sol;React-Native-คืออะไร-เครื่องมือพัฒนา-Mobile-Apps-แบบ-Cross-Platform3&period;png" data-full-size&equals;"1414x476" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>Awesome React Native<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">แล้วจะรู้ได้อย่างไรว่ามี package อะไรให้ใช้งานบ้าง &quest;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">นี่คือบางส่วนของ package บน github สำหรับ react-native ที่เราสามารถ install ใช้งานได้ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;github&period;com&sol;jondot&sol;awesome-react-native" target&equals;"&lowbar;blank">awesome react native<&sol;a> เป็นการรวบรวม <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;reactnative&period;dev&sol;docs&sol;native-modules-android" target&equals;"&lowbar;blank">Native Modules<&sol;a> ที่จำเป็นต่อการพัฒนาไว้ในที่เดียว <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">เราสามารถติดตั้ง Modules ต่าง ๆ เพื่อใช้งานในโปรเจคได้ ด้วย package manager อย่าง npm หรือ yarn<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;05&sol;React-Native-คืออะไร-เครื่องมือพัฒนา-Mobile-Apps-แบบ-Cross-Platform5-940x529&period;jpg" alt&equals;"" class&equals;"wp-image-4940" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;05&sol;React-Native-คืออะไร-เครื่องมือพัฒนา-Mobile-Apps-แบบ-Cross-Platform5&period;jpg" data-full-size&equals;"1280x720" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ข้อดี จุดเด่น ของ React Native<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>มี Community ที่แข็งแกร่งทั่วโลก ข้อนี้ทำให้เกิดการพัฒนาร่วมกัน เมื่อไหร่ก็ตามที่ Store ออกกฏเกณฑ์ใหม่ &lpar; Store Guidelines &rpar; React Native จะมี Package มารองรับเร็วมาก ยกตัวอย่างเช่น Apple Store ออกกฏให้เมื่อไหร่ก็ตามที่มีการเข้าระบบด้วย Third Party SSO เช่น Facebook Google&plus; Twitter แอพนั้นจะต้องมี Apple Sign In เข้าไปด้วย React Native มี Package นี้ให้ใช้แล้ว <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;github&period;com&sol;invertase&sol;react-native-apple-authentication" target&equals;"&lowbar;blank">react-native-apple-authentication<&sol;a><&sol;li><li>มีการพัฒนาอย่างต่อเนื่อง สะดวกสบายในการพัฒนามากขึ้นเรื่อย ๆ เวอร์ชั่น ปัจจุบันคือ React Native 0&period;62 ในขั้นตอนการพัฒนา ใช้คำสั่งน้อยลง ตั้งแต่เวอร์ชั่น 0&period;60 react native จะ Link native dependencies ให้อัตโนมัติ และ iOS pods ง่ายขึ้นมาก<&sol;li><li>ด้วยเหตุที่ใช้ภาษา Javascript เป็นหลักในการเขียนโปรแกรม ทำให้นักพัฒนาสายเว็บไซต์ที่มีความรู้ คุ้นเคยกับ Javascript&comma; CSS Syntax อยู่แล้ว ทำความเข้าใจ และใช้เวลาศึกษาเรียนรู้ได้ไม่ยาก ความยากของ React Native นั้นจึงอยู่ที่การทำความเข้าใจ โครงสร้างโปรเจค&comma; เครื่องมือที่ใช้พัฒนา&comma; simulator&comma; cocoapods&comma; command line&comma; debug tool&comma; etc&period;<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;