1. เริ่มต้นด้วยการติดตั้ง NodeJS เนื่องจากเราจำเป็นต้องใช้ Node Package Manager ซึ่งเป็นส่วนหนึ่งของ NodeJS ในการติดตั้ง Create React App ซึ่งจำเป็นในการใช้สร้างโปรเจกต์ React
ลิ้งโหลด NodeJS
สามารถติดตั้งเวอร์ชั่นล่าสุด (ขวามือ) ก็ได้ หรือ เพื่อความเสถียร ควรติดตั้งเวอร์ชั่น 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 ในการพัฒนา