เป็นครั้งแรกที่ได้มาจับโค้ดตระกูล React ที่ว่ากันว่า Document ห่วยที่สุด มาดูกันครับว่าจะรอดไหมกับ Log แรก การติดตั้งและวางโครงสร้างโค้ด

สิ่งที่จำเป็นต้องมีก่อน

1.Android SDK ที่อัพเดทล่าสุดและจัดการเพิ่ม Path เรียบร้อย

2.NodeJS

3.JDK

4.เครื่องหรือ Emulator สำหรับทดสอบรัน (ผมใช้ Genymotion)


เริ่มติดตั้งกันเลย

เนื่องจาก Document มีความงงอยู่มากผมจิงขอใช้คำสั่งเท่าที่จำเป็นที่ผมใช้สำหรับติดตั้งนะครับ โดยขั้นตอนแรกเราต้องทำการติดตั้ง “react-native-cli”ก่อนนะครับ โดยใช้คำสั่ง

เมื่อติดตั้งเรียบร้อยแล้วเราจะใช้ “react-native-cli” ในการสร้างโปรเจคด้วยคำสั่ง

โดย ProjectName คือชื่อโปรเจคที่เราต้องการสร้างนะครับ เมื่อเสร็จขั้นตอนนี้แล้วเราก็จะได้โฟลเดอร์โปรเจคที่ชื่อว่า “ProjectName” ขึ้นมานะครับ ให้เราเข้าไปยังโฟลเดอร์ด้วยคำสั่ง

และสามารถทดสอบรันได้โดยการเปิด Emulator หรือต่อเครื่องที่จะใช้ทดสอบ และรันแอพด้วยคำสั่ง

หรือหารันบน ios ก็ใช้คำสั่ง

ก็จะได้หน้าตาแอพประมาณนี้ ถือว่าสิ้นสุดขั้นตอนการติดตั้งนะครับ

หน้าจอเริ่มต้น React Native

หน้าจอเริ่มต้น React Native

 


การวางโครงสร้างโค้ด

ดูเหมือนว่า React Native จะไม่ได้วางโครงสร้างโค้ดมาให้นะครับ ประมาณว่าเราจะวางโครงสร้างอย่างไรก็ได้ ผมเลยไปศึกษาโปรเจคใน Github และบทความต่าง ๆ ก็มีการวางโครงสร้างกันหลายแบบ เลยเลือกตัวที่น่าจะเข้าใจง่ายใช้งานได้ดีมาตัวนึงครับ ต้องขอขอบคุณบทความจาก Organizing a React Native Project

จากที่เราสร้างโปรเจคใหม่เมื่อสักครู่ก็จะได้โครงสร้างของโค้ดประมาณนี้

React Native Coding Structure

React Native Coding Structure

ไฟล์ที่เราจำเป็นต้องใช้ก็จะมีแค่ index.js กับ App.js นะครับ เราจะมาเริ่มปรับโครงสร้างกันเลย โดยเราจะสร้างโฟลเดอร์ app ขึ้นมาเพื่อเก็บ Code ทั้งหมดที่เราจะเขียนเพื่อไม่ให้ปนกับไฟล์ System นะครับ จากนั้นใน app จะมีโครงสร้างดังนี้

โดยที่

  • component ใช้เก็บ component ต่าง ๆ ที่เราสร้างขึ้นมา เช่น ปุ่ม หรือ View ต่าง ๆ
  • config ใช้เก็บการตั้งค่าต่าง ๆ เช่น ไฟล์ route
  • index.js เป็นไฟล์แรกที่รัน ใช้ในกาารแยกโค้ดแต่ละ OS หรือ Bussiness Logic ต่าง ๆ
  • screens ใช้เก็บหน้าจอที่สร้างขึ้นมา
  • assets เก็บไฟล์ รูปภาพหรือ css ต่าง ๆ ที่ใช้งานแบบ Global

Log นี้ผมขอจบเท่านี้ก่อนนะครับ เดี๋ยว Log หน้ามาว่ากันใหม่ ในเรื่องโครงสร้างแบบละเอียด รวมไปถึงการเขียน Route และสร้างหน้า

หากมีข้อผิดพลาดประการในก็ต้องขออภัยด้วยครับ

 


ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *