เริ่มต้น React Native ด้วยคำสั่งง่าย ๆ อย่าง "create-react-native-app"

เริ่มต้น React Native ด้วยคำสั่งง่าย ๆ อย่าง "create-react-native-app"
05/02/19   |   36.8k

เมื่อไม่กี่วันก่อนหน้านี้ มีความคิดว่า อยากเขียน application โดยใช้ react native เอาไว้เล่นเองสักตัว โดยเริ่มแบบง่าย ๆ ไม่ต้องติดตั้ง หรือ config อะไรให้เสียเวลามาก


เลยลองหาจาก search engine ที่ใคร ๆ ก็น่าจะรู้จักอย่าง GOOGLE นี่เอง

 

ไม่นานก็เจอ keyword อยู่ตัวหนึ่ง "create-react-native-app"

 

ก็มีคำพูดนึง ลอยมาในหัว "น่าลองแห่ะ" ก็เลยจับมาลองสักหน่อย

 

ต้องบอกก่อนว่าที่หยิบเจ้านี่มาลองเพราะ ลองเข้าไปอ่าน document ดูแล้ว เชรดด ง่าย ไม่ต้อง config เยอะ ที่ชอบเลยคือ ไม่ต้องมี xcode หรือ Android Studio เอาไว้ emulate device ซึ่งมัน "ดีย์ย์ย์" มากกเวอร์

 

ยาวไปไม่อ่าน เริ่มเลยละกันครับ

 

ที่ต้องมีก่อนเลยคือ nodejs ในเครื่องไม่งั้นคง run คำสั่งไม่ได้ 55+

 

เริ่มต้นติดตั้ง create-react-native-app ซึ่งจะเป็นตัว Install Package ที่จำเป็นมนการเขียน react native และจัดการ Config ต่าง ๆ ให้เรา โดยที่เราไม่ต้องยุ่งยากมา config เองครับ

npm install -g create-react-native-app //สำหรับคนที่ใช้ npm

หรือ

yarn global add create-react-native-app //สำหรับคนที่ใช้ yarn

 

สร้าง Project React Native ของเราสักตัว โดยใช้คำสั่งนี้

create-react-native-app my-first-app
cd my-first-app

 

หากในเครื่องของเรายังไม่มี expo-cli จะมี command ขึ้นมาบอกว่า เราต้องมี expo-cli ในเครื่องด้วย ฉนั้น Yes ครับบ

แต่ถ้าในเครื่องเรามี expo-cli อยู่แล้ว ก็ฉลุยครับ ทำการตั้งชื่อ application ซะเลย

 

จากนั้นลอง run command นี้ครับ

npm start //สำหรับคนที่ใช้ npm

หรือ

yarn start //สำหรับคนที่ใช้ yarn

 

หน้าตาที่ได้หลังจาก run command เมื่อกี้ จะได้เป็นแบบนี้ครับ

 

ตามที่บอกไปก่อนหน้าครับ เราไม่จำเป็นต้องมี xCode หรือ Android Studio ไว้ในเครื่องก็ได้ เพราะจะเห็นว่า ตัวนี้มันให้ QR-Code มา

แต่เอ่ะ เอาไว้ทำอะไรนะ งั้นลองโหลด app ตัวนี้มาในมือถือครับ

 

Expo Client  //หาใน app store หรือ google play store ดูครับ

 

หน้าตาของ app จะเป็นแบบนี้ครับ

 

เอาหละ น่าจะถึงขั้นตอนสุดท้ายแล้วครับ เปิดกล้องขึ้นมาสแกน QR โลดดด

 

หน้าของ app react native ของเราโดยไม่ผ่านการแต่งเติมครับ

 

หนีไม่พ้นครับ ถ้าได้ลองเขียนภาษาใหม่ๆ หรือลอง stack อะไรใหม่คงต้องผ่าน Code ระดับครูอย่าง

 

Hello World !!

 

เปิดไฟล์ app.js ใน Folder โปรเจคเราครับ

 

หน้าตาเดิมของไฟล์ app.js ครับ เปลี่ยนข้อความใน เป็น Code ชั้นครูซะ

 

กลับมาที่มือถือเราครับ เขย่าสักครั้งหนึ่งเพื่อเปิดเมนู แล้วจิ้มไปที่ refresh ทีนึง

 

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

 

จบแล้วครับ สำหรับบทความนี้ ผมหวังว่าบทความนี้จะเป็นการเริ่มต้นที่ดีสำหรับคนที่อยากเริ่มเขียน app สักตัวโดยใช้ react native แล้วไม่อยาก config อะไรให้มาก

 

บทความต่อไปผมจะมาแชร์อะไรต่อ รอติดตามได้ครับ

 

Reference

- https://udemy-images.udemy.com/course/750x422/1436092_2024.jpg

- https://is3-ssl.mzstatic.com/image/thumb/Purple124/v4/51/d5/40/51d540dc-7419-8708-7387-9af9b78f1763/AppIcon-0-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-7.png/246x0w.jpg

tags : react react native create-react-native-app javascript



ติดตามข่าวสารและเรื่องราวดีๆ ทาง Email