ເລີ່ມຂຽນແອັບ React Native ກັນ!

ກ່ຽວກັບ React native ແມ່ນຫຍັງ? ສາມາດອ່ານບົດຄວາມນີ້ເສີມຄວາມຮູ້ກ່ອນໄດ້ເລີຍ 😄

React Native ແມ່ນຫຍັງ?

ແນະນຳ

ສຳລັບການພັດທະນາແອັບພິເຄຊັ່ນດ້ວຍ React Native ສາມາດເຮັດໄດ້ 2 ວິທີດັ່ງນີ້:

• Create React Native App
• React Native

Create React Native App

ຈະເປັນການສ້າງ React Native ແອັບຢ່າງງ່າຍດາຍໂດຍບໍ່ຈຳເປັນຕ້ອງລົງ Tools ຢ່າງ Android Studio ຫຼື XCode ເລີຍ. ແຕ່ຕ້ອງມີ Node Package Manager ຫຼື npm ເສຍກ່ອນ

https://partners.npmjs.com/weekly/weekly28/weekly-header-screwdriver-1200x.png

ຕິດຕັ້ງ Create Native React App CLi

• ດ້ວຍຄຳສັ່ງລຸ່ມນີ້ໃນ terminal(macOS) ຫຼື cmd(window os)

npm install -g create-react-native-app

ຜົນລັບທີ່ໄດ້(Terminal)

ສ້າງແອັບທຳອິດດ້ວຍ Create Native React App

ຫຼັງຈາກຕິດຕັ້ງແລ້ວທົດລອງສ້າງແອັບທຳອິດ ທີ່ຊື່ວ່າ AfternoonReact(ຫຼື ຊື່ອື່ນກໍໄດ້ ເອົາທີ່ສະບາຍໃຈ 😛) ກັນເລີຍ! 😆

create-react-native-app AfternoonReact

ຜົນລັບທີ່ໄດ້ ເຢ້~~~~~~ 😍😍😍😍

• ທຳການເຂົ້າໄປໃນ Project ແລະ Run ກັນເລີຍ!!!!!

cd AfternoonReact && npm start

• ຫຼັງຈາກ run ຊຸດຄຳສັ່ງດ້ານເທິງແລ້ວ. ໃຫ້ Download Application ທີ່ຊື່ວ່າ Expo

ມີທັງ iOS ແລະ Android

ເປີດແອັບ Expo ແລ້ວສະແກນ QR code ດັ່ງກ່າວເພື່ອສະແດງຜົນລັບເທິງສະມາດໂຟນ 😃

ສຳເລັດ!!!!

ເຫັນໄດ້ເຖິງຄວາມງ່າຍຂອງການພັດທະນາແອັບພິເຄຊັ່ນດ້ວຍ React Native ເລີຍ 😍

React Native

ຈະເປັນການພັດທະນາແອັບພິເຄຊັ່ນທີ່ໃຊ້ Native code. ສະນັ້ນ, ການທີ່ຈະໃຊ້ native code ກໍຈຳເປັນຕ້ອງມີຄວາມຕ້ອງການ built tools ທີ່ແຕກຕ່າງກັນຂອງລະບົບໃຜລາວ

ຄວາມຕ້ອງການພື້ນຖານ

• Node
• React Native CLi
• XCode ສຳລັບ build tools ຂອງລະບົບ iOS
• Android Studio ສຳລັບ build tools ຂອງລະບົບ Android

https://image.slidesharecdn.com/cordova-140727175632-phpapp02/95/building-crossplatform-javascript-apps-using-cordova-4-638.jpg?cb=1406493500

ຕິດຕັ້ງ React Native CLi

• ດ້ວຍຄຳສັ່ງລຸ່ມນີ້ໃນ terminal(macOS) ຫຼື cmd(window os)

npm install -g react-native-cli

ຜົນລັບ

ຕິດຕັ້ງ Xcode ແລະ Android Studio

ສຳລັບການຕິດຕັ້ງ ແມ່ນໃຫ້ເຮັດຕາມ Document ເວັບເຂົາເຈົ້າເລີຍ

• Android Studio
• XCode

ແລະ ເພື່ອເປັນການບໍ່ສັບສົນໃນການ config ຕ່າງໆ ແມ່ນຫຼັງຈາກຕິດຕັ້ງແລ້ວ ແນະນຳໃຫ້ສ້າງ Project ເປົ່າໆຢ່າງ hello world ທັງໃນ Android Studio ແລະ XCode ຂອງໃຜລາວແລ້ວ run ເທີງ emulator(android) ແລະ Simulator(iOS) ຖ້າ run ໄດ້ ແມ່ນພ້ອມແລ້ວສຳລັບການພັດທະນາ React Native.

ທ່ານໄດ້ໄປຕໍ່!!!!

ສ້າງແອັບທຳອິດດ້ວຍ React Native

• ສ້າງແອັບທີ່ຊື່ວ່າ AfternoonReact(ແອັບນີ້ອີກແລ້ວ ຮ່າຮ່າ)

react-native init AfternoonReact

• ທຳການເຂົ້າໄປໃນ Project ແລະ Run ກັນເລີຍ!!!!! (ໃນທີ່ນີ່ແມ່ນໃຊ້ Android emulator ໃນການທົດສອບ)

cd AfternoonReact && react-native run-android 

ທະດ້າາາາາາ~~~ ສຳເລັດ!! 🎊

ສະຫຼຸບ

ໃນການສ້າງແອັບດ້ວຍ React Native ເຮົາສາມາດສ້າງໄດ້ຈາກສອງທາງເລືອກຄື:

• create react native app ຈະໃຊ້ Tool ບໍ່ຫຼາຍສາມາດ Run ທົດສອບແອັບໄດ້ຜ່ານການສະແດງຜົນທາງແອັບ Expo. ແຕ່ການຈະນຳໄປໃຊ້ຈິງຕໍ່ ແມ່ນຈຳເປັນຕ້ອງໄດ້ Eject ຊື່ງເປັນຂັ້ນຕອນການສ້າງ build tools Platform ເພື່ອໄປໃຊ້ Native Code ຂອງທັງ Android ແລະ iOS
• react native ຈະຫຍຸ້ງຍາກໃນການກຽມພ້ອມ tools ຕ່າງໆຢ່າງ Xcode ແລະ Android Studio ຊື່ງຂໍ້ເສຍຢ່າງໜື່ງ ແມ່ນ com ທີ່ໃຊ້ໃນການພັດທະນາຕ້ອງພ້ອມ ເພາະລຳພັງໃຊ້ແຕ່ Android Studio ກໍຖືວ່າກິນຊັບພະຍາກອນໄປເຕີບໜື່ງແລ້ວ 😅

ສະນັ້ນ, ໃນຊຸດຄວາມຮູ້ການພັດທະນາແອັບພິເຄຊັ່ນເທິງມືຖືດ້ວຍ React native ນີ້ ແມ່ນເຮົາຈະໃຊ້ການສ້າງ project ດ້ວຍ React native ເປັນຫຼັກ 😃

Happy coding!!

Source Code:

Create Reat Native App:

TheBrown/AfternoonReactExpo

React Native:

TheBrown/AfternoonReact

Video ໂດຍທີມງານ Afternoon React