ReactJs 101 — สร้างโปรเจคใหม่ด้วย create-react-app

วิธีสร้างโปรเจ็ค React ใหม่ ที่ง่ายและรวดเร็ววิธีหนึ่ง (ไม่ต้องไปตั้งค่าอะไรให้ยุ่งยาก) ก็คือคำสั่ง Create-react-app นั้นเองครับ ซึ่งสามารถใช้งานได้ทั้งระบบปฏิบัติการ macOS Windows และ Linux ครับ

สิ่งที่ต้องมีก่อน

• Node.js 8.10.0 หรือใหม่กว่า
• npm 5.2 หรือใหม่กว่า

ใครยังไม่มีให้ไปดาวโหลด Node.js เวอร์ชั่นล่าสุดที่ใหม่กว่า 8.10.0 มาติดตั้งก่อนนะครับ ซึ่งติดตั้ง Node.js จะได้ npm มาพร้อมกันเลย

เช็คเวอร์ชั่น Node

ไปที่ Terminal แล้วพิมพ์คำสั่ง

node -v

เช็คเวอร์ชั่น npm

ไปที่ Terminal แล้วพิมพ์คำสั่ง

npm -v

มาเริ่มสร้างโปรเจคใหม่ด้วย create-react-app กัน

เปิด Terminal แล้วพิมพ์คำสั่งดังต่อไปนี้

สำหรับคนที่ใช้ npm5.2 ขึ้นไป

npx create-react-app my-app
cd my-app
npm start

• ใช้คำสั่ง npx create-react-app my-app(ชื่อโปรเจ็คของเรา) เพื่อสร้างโปรเจคใหม่ที่ชื่อว่า “my-app”
• ใช้คำสั่ง cd my-app เพื่อเข้าไปที่โฟลเดอร์นั้น
• เริ่มทดสอบโปรเจค ด้วยคำสั่ง npm start

npx create-react-app my-app

• เปิดเว็บบราวเซอร์ http://localhost:3000/ ก็จะเห็นเว็บของเราทำงานได้แล้ว !

หมายเหตุ

• npx มาพร้อมกับ npm5.2 ขึ้นไป
• my-app คือชื่อโปรเจ็คที่เราจะสร้าง สามารถเปลี่ยนเป็นชื่ออะไรก็ได้

ถ้าใครใช้ npm 5.1 หรือต่ำกว่า

จะไม่สามารถใช้ npx ได้ ต้องติดตั้ง create-react-app แบบ global ก่อน ด้วยคำสั่ง

npm install -g create-react-app

แล้วถึงค่อยสั่งรัน

create-react-app my-app

ที่เหลือก็ทำเหมือนกันครับ…ง่ายสุดๆไปเลย

เสร็จแล้ว !

เสร็จแล้วจริงๆ 555

อ้างอิง

• https://github.com/facebook/create-react-app
• https://facebook.github.io/create-react-app/docs/getting-started