[React] เริ่มต้นด้วย Create React App #1


1. เริ่มต้นด้วยการติดตั้ง NodeJS เนื่องจากเราจำเป็นต้องใช้ Node Package Manager ซึ่งเป็นส่วนหนึ่งของ NodeJS ในการติดตั้ง Create React App ซึ่งจำเป็นในการใช้สร้างโปรเจกต์ React

ลิ้งโหลด NodeJS

https://nodejs.org/en/


สามารถติดตั้งเวอร์ชั่นล่าสุด (ขวามือ) ก็ได้ หรือ เพื่อความเสถียร ควรติดตั้งเวอร์ชั่น LTS (ซ้ายมือ) ซึ่งเป็นเวอร์ชั่นที่อยู่ในการสนับสนุน ณ ขณะนั้น

2. เปิด terminal (MaxOS) หรือ cmd(Windows) ขึ้นมา ทดสอบโดยการรันคำสั่ง npm เพื่อดูว่าคอมพิวเตอร์ของเรารู้จักคำสั่ง npm แล้วหรือยัง

3. รันคำสั่งต่อไปนี้ใน terminal หรือ cmd เพือใช้ npm ในการติดตั้ง create-react-project ที่จะใช้ในการสร้างโปรเจกต์ React ของเรา

npm install create-react-app -g

หมายเหตุ: บนระบบปฏิบัติการ Mac หรือ Linux คุณอาจจะต้องเพิ่ม sudo หน้าคำสั่งดังกล่าวเพื่อใช้สิทธิ์ระดับสูงในการติดตั้ง package ดังกล่าว หรือ run cmd ใบแบบ Administrator บนระบบปฏิบัติการ Windows

เมื่อติดตั้งเสร็จ จะขึ้นผลลัพธ์ตามภาพต่อไปนี้ ให้ตรวจสอบหมายเหตุข้างบน

4.ทำการ cd หรือ Change Directory ไปยัง directory ที่ต้องการจะสร้าง project react ของเรา (ในภาพตัวย่าง จะทำการ cd ไปสร้าง project ที่ C:\source\react)

cd C:\source\react

หมายเหตุ: สังเกต directory ปัจจุบันจะเปลี่ยนไปยัง directory ที่เราต้องการเรียบร้อยแล้ว

5. รันคำสั่งต่อไปนี้ เพื่อเริ่มต้น generate project react โปรเจกต์แรกของเรา

create-react-app [ชื่อโปรเจกต์]

เช่น

create-react-app my-first-react-app

create-react-app จะเริ่มต้นการ generate โปรเจกต์ react ของเรา

หลังจากเวลาผ่านไปซักครู่ และ create-react-app ได้ generate โปรเจกต์จนเสร็จแล้ว หน้าจอจะแสดงผลดังต่อไปนี้

6.ทำการ cd ไปยังโปรเจกต์ของเราที่เพิ่งถูก generate ขึ้นมา

cd C:\source\react

7.รันคำสั่ง npm start เพื่อเริ่มต้นรันโปรเจกต์ react

npm start

หลังจากรันแล้ว ในหน้าจอ terminal จะแสดงข้อมูลของโปรเจกต์เราขึ้นมา (ห้ามปิดหน้าต่าง terminal นี้ในระหว่างการพัฒนาโปรเจกต์ react)

จะมีหน้าต่าง browser เด้งขึ้นมาเป็น process ใหม่เพื่อแสดง project react ที่รันแล้วของเราขึ้นมา

หมายเหตุ: localhost:3000 เป็น path ของโปรเจกต์เราที่จะใช้ในการ preview project react ของเราตลอดการพัฒนา (อาจเปลี่ยนแปลงนอกเหนือจากนี้ได้)
หมายเหตุ2: หากต้องการจะหยุด process ของ react ให้ทำการกดปุ่ม Ctrl+C (Windows) หรือ Command+C (MacOS) แล้วตอบ Y เพื่อทำการ terminate process ในการพัฒนา