React.js #01 Create React App
2 min readMay 18, 2022
ในบทความนี้เราจะมาเรียนรู้การสร้าง Web Application ด้วยการใช้งาน library ที่ชื่อว่า React.js กันครับ
React.js คืออะไร
สั้นๆง่าย ตามที่ผู้พัฒนาได้นิยามไว้เลยครับ React.js คือ JavaScript library สำหรับการสร้างหน้า UI (User Interfaces) ซึ้งถูกพัฒนาโดย facebook นี้เองครับ ในปัจจุบัน React.js ถือเป็น library ที่นิยมเป็นอันดับต้นๆในการนำมาใช้พัฒนา
เริ่มต้นสร้างโปรเจค React
- ก่อนอื่นเลยในเครื่องเราต้องมีการติดตั้ง Node.js ก่อนเลยครับสำหรับท่านไหนที่ยังไม่ได้ติดตั้ง เข้าไปที่นี้ https://nodejs.org/en/ แล้วทำการติดตั้งตามหน้าเว็บได้เลยครับ
- หลังจากที่ติดตั้ง Node.js เสร็จเราจะทำการสร้าง react app ด้วยคำสั่ง
npx create-react-app <app-name>ในบทความนี้เราจะใช้ npx ในการสร้าง react app เพื่อไม่ต้องติตั้ง create-react-app packageโดย npx จะสามารถใช้ได้ใน npm version 5.2 ขึ้นไป
- หลังจากที่เราทำการรันคำสั่งเสร็จจะได้โฟลเดอร์ที่มีชื่อ app ที่เราสร้างให้เข้าไปในโฟลเดอร์นั้นแล้วทำการ start app ด้วยคำสั่ง
cd <app-name>
npm start- หลังจากที่รันคำสั้ง start แล้วให้เปิด web browser ที่ http://localhost:3000/ เราจะได้ React app เริ่มต้นที่ให้เรานำไปใช้พัฒนาต่อแล้วครับ
- กลับมาดูโฟลเดอร์ app ที่เราสร้างไว้ ว่ามีอะไรให้มาบ้างโดยในตัวอย่าง app ของเราจะชื่อว่า first-react
จากภาพ app ของเราจะประกอบด้วย
- node_modules ในโฟลเดอร์นี้จะเก็บโมดูลหรือไลบรารี่ต่างๆที่ใช้ภายในโปรเจคของเรา
- public ในโฟลเดอร์นี้จะเก็บไฟล์ public ต่างๆในโครงสร้างตัวอย่างก็จะเก็บไฟล์ รูป , favicon , index.html เป็นต้น
- src ในโฟลเดอร์นี้จะเก็บโครงสร้างของตัวโปรเจค Component ต่างๆ ที่เราใช้ในโปรเจค พูดให้เข้าใจง่ายๆ code ที่เราจะเขียนหลักๆจะอยู่ในโฟลเดอร์นี้
- package.json ไฟล์นี้จะเก็บ package ต่างๆ ที่เราใช้ในการพัฒนาโปรเจค
ในบทความนี้เราก็ได้ React app มาแล้ว หลังจากนี้เราจะทำอะไรต่อไปเดี๋ยวเราจะมาเรียนรู้ไปพร้อมๆกันในบทความถัดไปครับ
บทความอื่นๆที่เกี่ยวข้องใน Series React.js