The journey of “npm start” in simple create-react-app
โครงสร้างของ create-react-app ประกอบไปด้วย files:
node_module: เป็น folder ที่ใช้เก็บ module หรือ libary ที่ทำงานภายในโปรเจคเรา
public: เป็น folder เก็บรูปภาพ, manifest.json, และ index.html
src เป็น folder สำหรับเก็บ component หรือโครงสร้างของ application
package.json: เก็บข้อมูลต่างๆ รวมถึง package ที่ใช้ทำงานบนโปรเจค
หลังจากที่ ติดตั้ง create-react-app ด้วยคำสั่ง npx create-react-app my-app ก็จะได้ folder structure แบบภาพด้านบน
เมื่อได้ folder structure ตามด้านบนแล้ว จากนั้นให้คีย์คำสั่ง npm start บน Terminal เพื่อเปิดให้แอฟของเราอยู่ในโหมด development
“npm start” คือ การใช้คำสั่งเจาะจงไปที่ package’s “scripts” object ใน package.json โดยที npm start เป็นคำสั่งลัดของ npm run start นั่นเอง
จะเห็นได้ว่าภายใน package.json มี object อยู่หลายตัว แต่คำสั่ง npm start จะเจาะจงไปที่ “start” ที่อยู่ใน script object
หลังจากที่หา “start” เจอแล้ว npm ก็จะอ่าน script ที่เขียนอยู่ใน “start” ซึ่งก็คือ “react-scripts start”
คำสั่ง “react-scripts start” หมายความว่า เมื่อคำสั่งถูกรัน ระบบจะไปที่ node_module จากนั้นหา file “react-scripts” และทำการเปิดไฟล์ start.js
โดยที่ start.js นั้นมีหน้าที่ในการสร้าง path ไปยัง index.html กับ index.js, เตรียม port กับ host id, และทำการติดต่อกับ browser
เพื่อทำให้ react-app ที่เรากำลังสร้างนี้สามารถเปิดบน web browser ในหมวด development ได้
