ช่วงสามเดือนที่แล้วได้รับมอบหมาย Project Mobile App ตัวนึงมาโดยมีเงื่อนไขว่าAppนี้ ต้องรองรับ iOS และ Android โดยต้องสามารถเรียกใช้ SDK VideoCall และ Chat ที่ทำไว้แล้วได้ด้วย และต้องทำคนเดียวให้เสร็จภายในระยะเวลาไม่มากนัก จึงทำให้การเขียน Native ปกติทำไม่ทันจึงเป็นที่มาของ งานเร่งกับ React Native ป่ะเริ่มกันเลย….
สิ่งที่ควรศึกษาเบื้องต้น
1. ES2015(ES6)
2. JSX
3. React
สำหรับMac
โปรแกรมที่จำเป็น
- Xcode
- Android Studio + Android SDK(ถ้าต้องการทำ Android App)
สำหรับWindows (ไม่รองรับ ios)
- Android Studio + Android SDK
โปรแกรมสำหรับเขียน React Native (เลือกใช้ได้ตามความถนัด)
- Atom ลงปลั๊กอิน nuclide
- Visual Studio Code ลงปลั๊กอิน React Native Tools
- Sublime
- Deco
- Text Editor อื่นๆ
สำหรับวิธีติดตั้งสามารถทำตามLink ด้านได้เลย
หรือสำหรับWindows ดูจากบทความนี้ครับreact native setup for windows
ลงเสร็จแล้วก็เริ่มกันเลย!!!
คำสั่งสร้างProject
react-native init ชื่อโปรเจ็ค เช่น react-native init AwesomeProject
เปิด Terminal หรือ Cmd.exe แล้วใส่คำสั่งกันเลย
react-native init AwesomeProject
หลังจากเสร็จสิ้นกระบวนการ เราจะได้โฟลเดอร์ชื่อเดียวกับชื่อโปรเจ็ค โดยภายในจะประกอบไปด้วย
- โฟลเดอร์ __tests__ (เป็นกล่องที่เก็บไฟล์ Jest Tests )
- โฟลเดอร์ Android (เป็นกล่องที่เก็บProject ของ Android สามารถใช้ Android studio เปิดได้)
- โฟลเดอร์ ios (เป็นกล่องที่เก็บProject ของ ios สามารถใช้ xcode เปิดได้ มีเฉพาะในMac)
- โฟลเดอร์ node_modules (เป็นกล่องที่เก็บmodule ที่เราinstall จาก package ต่างๆที่ใช้กับ React Native)
- ไฟล์ index.android.js (เป็นไฟล์ code หน้าแรกของทาง Android)
- ไฟล์ index.ios.js (เป็นไฟล์ code หน้าแรกของทาง ios)
- ไฟล์ package.json (เป็นไฟล์ที่เก็บรายชื่อ package ที่เราinstail)
กลับมาที่ Terminal หรือ Cmd.exe แล้วใส่คำสั่งด้านล่างเพื่อเข้าไปในโฟลเดอร์Project
cd ชื่อโปรเจ็ค เช่น cd AwesomeProject
cd AwesomeProject
หลังจากนั้นสั่งRun React Native ตามคำสั่งด้านล่าง
สำหรับ Mac
react-native run-ios
สำหรับ Windows
react-native run-android
หลังจากRunคำสั่งไปแล้วรอสักครู่ จะทำการเปิด Simulatorให้อัตโนมัติ โดยถ้าพิมพ์คำสั่ง run-android จะเปิด Android emulator หรือถ้าพิมพ์คำสั่ง react-native run-ios จะเปิด iOS Simulatorให้ โดยSimulatorจะแสดงหน้าจอเริ่มแรก ดังภาพ
สำเร็จแล้วกับการ Setup เบื้องต้นสำหรับ React Native ครับ