ในการพัฒนา mobile Application ด้วย React Native นั้น มีสิ่งที่จำเป็นต้องรู้อยู่ 7เรื่อง ที่จะช่วยให้คุณง่ายต่อการพัฒนามากขึ้น จะมีอะไรกันบ้างเรามาดูกันเลย
1. Life Cycle
เริ่มแรกเลย เราจำเป็นต้องรู้เกี่ยวกับการทำงานของ React สำหรับเวอร์ชั่น 16.3 ขึ้นไปก่อนว่ามันทำงานยังไง จะต้อง fetch api ในช่วงไหน หรือจะ render ยังไงบ้าง หรือ จะควร mount data ขั้นตอนไหนบ้างใน Lifecycle
2. Stylesheet UI Mobile
การปรับแต่ง Style ของ Application ใน React Native นั้น เราสามารถที่จะใช้ความรู้เกี่ยวกับ CSS มาใช้งานได้ใกล้เคียงกับ syntax ที่ใช้งานกับ website ปกติ เช่น ถ้าต้องการปรับตัว text สักตัวให้หนา และ สีแดง
และถ้าปกติหากขึ้นโครงสร้างโดย UI Framework อย่าง Bootstrap แล้ว ใน React Native ก็จะมีให้เลือกใช้งานเช่นกันอย่าง Ant Design Mobile, React Native Elements, NativeBase, React Native Material Design
3. JavaScript Style Guide
สำหรับการสร้าง Application สิ่งขาดไม่ได้คือ การกำหนดสไตล์การเขียนโค้ดเพื่อความเป็นระเบียบ อ่านง่าย และเหมาะสำหรับ maintenance ในระยะยาว ยิ่งในโปรเจ็คนั้นมี developer มากกว่า 1 คนในการ development จึงจำเป็นอย่างยิ่งที่ต้องมีสำหรับ JavaScript จะมีสไตล์การเขียนที่เป็นมาตราฐานที่คนส่วนใหญ่ยอมรับ อาทิเช่น Airbnb, Google, Idiomatic, Standard โดยเราจะสามารถเช็คได้ผ่าน Eslint
4. Folder Structure
อาจจะกล่าวได้ว่า การวางโครงสร้างนั้นเป็นหัวใจหลักของการ maintenance โปรเจ็คในระยะยาวหรือย่อเวลาในการเพิ่ม feature ใหม่ๆ ก็ว่าได้ หากว่าโครงสร้างไม่ดี หรือ วางโครงที่ไม่เหมาะสมกับขนาดของโปรเจ็ค ถ้ามีการแก้ไขหรือปรับปรุงจะเสียเวลาในการ refactor code อยู่เป็นนิจ ดังนั้น ผมจึงจะอยากเสนอแนวคิดว่าในการวางโครง โดยอ้างอิงจากให้ทำทุกอย่างให้เป็น Component และ Scenes ไปเพื่อให้ง่ายสำหรับจัดการและเปลี่ยนแปลงได้ง่าย
5. Form
หากต้องการสร้างแบบฟอร์มสำหรับต้องการให้ user กรอกข้อมูลต่างๆใน application แล้วในตามปกติ เราสามารถที่จะ handle validate ในส่วนของ form ผ่าน state เพื่อเช็คความถูกต้องได้ แต่หากถ้ามีจำนวนแบบฟอร์มที่เยอะหรือซับซ้อนแล้วมันเป็นยากที่เราจะสามารถ handle ได้หมดอย่างง่ายดาย หรืออาจจะเสียเวลาในการ maintenance มากเกินไป ดังนั้นจึงขอแนะนำ Redux Form หรือ Tcomb Form Native ในการลดเวลาและเป็นมาตรฐานเดียวกันเวลาแก้ไขเปลี่ยนแปลง
6. Router
หากเป็น Application ใหญ่ๆ ที่มี flow ที่ซับซ้อนและหลายหน้า จะขาดไม่ได้เลยในส่วนของการจัดการเส้นทางที่ต้องการที่ต้องการให้ user ได้ไหลไปและรวมถึงส่วนของ drawer และ tab bars ด้วยที่จำเป็นสำหรับ mobile application ดังนั้นหากต้องการจัดการเองสามารถกระทำแต่มันอาจจะแลกมาด้วยความปวดเศียรเวียนเกล้าไม่น้อยเลยรวมถึง maintenance ยากมาก ดังนั้นจึงมีตัวช่วยจัดการอย่าง React Native Navigation, React Native Router Flux, React Navigation เพื่อแก้ปัญหานี้
7. Basic Knowledge About Mobile Application
หากต้องการ deploy ขึ้น store ต่างๆ หรือเพิ่ม library พิเศษที่เกี่ยวข้องกับ native ในฝั่งของ iOS หรือ Android จำเป็นต้องรู้เกี่ยวกับความรู้พื้นฐานว่าต้องรู้ config ยังไงได้บ้างหรือหาปัญหาได้ว่าเกิดจากส่วนไหนได้ อาทิเช่น หากต้องการให้มี feature สำหรับตรวจจับใบหน้า หรือ บาร์โค๊ด ในที่นี้สามารถที่ เพิ่ม library react-native-camera เพื่อช่วยลดเวลาลงได้ แต่หากเกิดปัญหาขึ้น เราจำเป็นต้อง manual install ในการแก้ไขไฟล์ MainApplication.java สำหรับเพิ่ม library สำหรับ Android หรือ ใช้งาน CocoaPods สำหรับ iOS แทนที่สามารถใช้ react-native link ชิลๆได้
- แหล่งที่มา https://medium.com/@zondezatera/7-ข้อแนะนำเบื้องต้น-ในการเขียน-react-naive-aa822c094d28