Quantcast
Channel: cc :: somkiat
Viewing all articles
Browse latest Browse all 1997

สวัสดีกับ Create React Native App กันหน่อย

$
0
0

ทางทีมพัฒนาของ Facebook และ Expo ร่วมมือกันพัฒนาเครื่องมือชื่อว่า Create React Native App ซึ่งได้รับแรงบันดาลใจมาจาก Create React App มีเป้าหมายเพื่อช่วยลดปัญหาในการสร้าง project และ configuration ต่าง ๆ ทำให้ชีวิตนักพัฒนาง่ายขึ้น ที่สำคัญ Create React Native App นั้น ไม่จำเป็นต้องติดตั้ง Xcode และ Android Studio ด้วยนะ ดังนั้นถ้าเรามี device สำหรับทดสอบ ก็สามารถพัฒนาบนระบบปฏิบัติการอื่น ๆ นอกจาก MacOS ได้ เพราะว่า code ต่าง ๆ เราจะเขียนด้วย node.js ทั้งหมด แต่ในการใช้งานจำเป็นต้องติดตั้ง Expo client app ใน device ด้วย

มาเริ่มใช้งานกันดีกว่า

ทำการติดตั้งและใช้งานด้วยคำสั่งดังนี้ [code] $npm i -g create-react-native-app $create-react-native-app helloworld $cd helloworld $npm start [/code] คำอธิบาย ทำการสร้าง project ชื่อว่า helloworld ซึ่งจะทำการ download dependency/library จำนวนมากมาย !! จากนั้นทำการ start development server ขึ้นมา ซึ่งสามารถเปิดทดสอบผ่าน Expo client app จะมี QR code หรือพิมพ์ url แบบตรง ๆ เลยก็ได้ ทำการทดสอบแบบ On-the-fly เลย แต่ต้องอยู่ในวง network เดียวกันนะ ที่สำคัญเมื่อเปลี่ยนแปลง code แล้ว App จะเปลี่ยนตามทันที (Hot reload) !! ดังรูป เมื่อทำการเปลี่ยนแปลง code แล้วผลการทำงานจะเปลี่ยนแปลงทันที ตัวอย่าง source code [gist id="2d6cb531e2c1d6fabaaaae4e60712bb7" file="App.js"] ลองดู log การทำงานได้ เช่น แสดงผลการทำงานใน Expo client app ดังรูป แต่ถ้าเขียน code ผิดขึ้นมา ก็จะแสดง error ดังนี้ Create React Native App เป็นเครื่องมือ ที่ทำให้ง่ายต่อการพัฒนาระบบอย่างมาก และยังใช้คำสั่งอื่น ๆ ได้นะ และสนับสนุน เช่น [code] $npm run ios //ต้องการ Xcode $npm run android //ต้องการ Android build tool $npm test //สำหรับการทดสอบตามชุดการทดสอบที่มี [/code] สามารถอ่านรายละเอียดเพิ่มเติมได้จาก https://github.com/react-community/create-react-native-app https://docs.expo.io/versions/latest/sdk/index.html

Viewing all articles
Browse latest Browse all 1997

Trending Articles