VScode Workshop 1 : ติดตั้งเครื่องมือ Setup Tools

ใช้งาน React Native ต้องติดตั้งเครื่องมือสำหรับบริหารจัดการแอพพลิเคชันที่จะสร้างกันก่อน

1. ติดตั้ง Node.js

1.1 ไปที่เว็บไซต์ http://nodejs.org กด Get Node.js


1.2 เลือก v24.1.1 (LTS) LST เป็นเวอร์ชันที่เสถียรภาพแล้ว เลือก for Windows จากนั้นทำตามขั้นตอนการติดตั้งจนเสร็จ


2. ติดตั้งส่วนเสริมสำหรับ Visual Studio Code

2.1 เปิดโปรแกรม Visual Studio Code ขึ้นมา จากนั้นกดที่ Tool ซ้ายมือของหน้าจอโปรแกรม ที่ Extension พิมพ์ส่วนเสริมชื่อ Bracket pair colorizer แล้วกด install


2.2 พิมพ์ส่วนเสริมชื่อ ES7 React/Redux/GraphQL/React-Native snippets แล้วกด install


2.3 พิมพ์ส่วนเสริมชื่อ Material Icon Theme แล้วกด install


2.4 พิมพ์ส่วนเสริมชื่อ Prettier-Code formatter


3 ติดตั้ง expo-cli เพื่อทดสอบแอพพลิเคชัน

3.1 เปิดหน้าต่าง Command Prompt พิมพ์ npm install -g expo-cli แล้วกด Enter



3.2 ตรวจสอบเวอร์ชัน พิมพ์ expo --version แล้วกด Enter



3.3 สร้างแอพพลิเคชันใหม่ พร้อมสร้างโฟลเดอร์ พิมพ์ expo init test-first- ตามด้วยชื่อคุณภาษาอังกฤษ ประมาณนี้ expo init test-first-waraporn แล้วกด Enter



3.4 เลือกเทมเพลตพื้นฐานที่จะใช้ใน project ให้กด Enter

3.5 เข้าไปที่โฟลเดอร์ที่สร้างไว้ พิมพ์ cd test-first-waraporn แล้วกด Enter


3.6 เริ่มการทำงานของแอพพลิเคชันที่สร้าง พิมพ์ npm start แล้วกด Enter



4 หยุดทดสอบแอพพลิเคชัน

4.1 หยุดการรันแอพพลิเคชัน ที่สั่งรันไว้ด้วยการกดปุ่ม Control + C