Contents 9
14
1CHAPTER 15
ตดิ ตงั้ เคร่ืองมือเพื่อใชง้ าน React 17
19
ติดตง้ั Node.js และ npm 19
ตดิ ตง้ั โปรแกรม Visual Studio Code 22
ติดต้งั Extension สำ� หรบั Visual Studio Code 23
24
2CHAPTER 25
Express Web Server 26
28
ตดิ ต้งั และใชง้ าน 28
Route คืออะไรและสร้างยงั ไง 30
จัดการ Route แบบ GET request 31
จดั การ Route แบบ POST request
ติดตั้งและใชง้ าน Postman
เข้าใชง้ าน Postman
วธิ ีใชง้ าน Postman
Express Middleware ใชย้ ังไง
3CHAPTER
ตดิ ตง้ั React และพื้นฐาน ES6
การติดต้ัง React
การสร้างโปรเจค
การสง่ั รันโปรเจค
โครงสรา้ งโปรเจค
Contents 32
33
4CHAPTER 36
พนื้ ฐาน React แบบชวิ ๆ 38
39
เร่มิ ต้นพนื้ ฐาน 40
Props และการใช้งาน 40
State และการใชง้ าน 42
ปัญหาการใช้ setState 43
Children Props สงิ่ ท่มี ากกว่า Props 44
React Lifecycle 45
componentWillMount และ componentDidMount 45
shouldComponentUpdate 45
componentWillReceiveProps 46
componentWillUpdate 49
componentDidUpdate 51
componentWillUnmount 51
เข้าถึง DOM element ด้วย Ref 53
FetchData (โหลดขอ้ มลู ) 55
ใช้งาน Form 55
56
5CHAPTER 57
#WorkShop เว็บ PhotoAlbum 57
58
ภาพรวมระบบ 62
เริ่มสร้างโปรเจค
จัดระเบยี บไฟล์ใหม ่
ตดิ ตง้ั และใช้งาน React Router
ติดต้งั react-router
เรม่ิ ใชง้ าน react-router
สร้าง Layout หลัก
ติดตงั้ Bulma CSS framework
เริม่ สร้าง Layout
การใช้งาน Redux
ตติ ต้งั Redux 63
Redux พน้ื ฐานแบบตรงไปตรงมา 64
ใชง้ าน redux และ react-redux 65
ปรับโค้ด redux ให้ดูเป็นระบบ 68
หน้าจอ User 70
Component UserList 72
Component User 72
ปรับหน้าจอ User ไปใช้ redux 74
ติดตั้ง redux-promise-middleware 76
ใช้งาน redux-promise-middleware 77
ปรับโค้ดใหด้ กี ว่าเดิม 80
แยก Dispatch ไปไวท้ ่ี Actions 80
ติดตง้ั ReduxThunk 82
ใช้งาน ReduxThunk 82
หนา้ จอ Album 83
โหลดขอ้ มูล Album 85
หน้าจอ Photo 89
6CHAPTER 94
#WorkShop เว็บ PhotoAlbum v. GraphQL 94
95
ภาพรวมระบบ 95
คัดลอกโปรเจคเดิม 96
GraphQL 102
GraphQL คืออะไร 102
สร้าง Server สำ� หรับ GraphQL ดว้ ย Apollo + Express 102
สรา้ ง Schema และ fetchdata จาก REST API 104
ตดิ ตงั้ node-fetch 106
Schema สำ� หรบั User 109
Schema สำ� หรับ Album 110
Schema ส�ำหรบั Photo 113
React ตดิ ตอ่ GraphQL ผา่ น react-apollo 115
ปรบั หนา้ จอ User ใช้งาน GraphQL 117
ปรับหนา้ จอ Album ใช้งาน GraphQL
ปรบั หนา้ จอ Photo ใชง้ าน GraphQL
สรุปส่งิ ที่ไดจ้ ากโปรเจค
7CHAPTER 120
#WorkShop เว็บระบบแจง้ ซอ่ ม v. MySQL 125
127
ภาพรวมระบบ 127
แนวทางการพัฒนา 133
ตรวจสอบเครอื่ งก่อนตดิ ตัง้ Xampp 136
ตดิ ตง้ั Xampp ส�ำหรบั MacOS 142
ก�ำหนดรหสั ผา่ น MySQL ส�ำหรบั MacOS 145
ตดิ ตง้ั Xampp สำ� หรบั Windows 145
กำ� หนดรหสั ผา่ น MySQL สำ� หรบั Windows 146
เร่ิมสรา้ งฐานขอ้ มูล 148
โครงสรา้ งตาราง 148
ตวั อย่างวธิ สี ร้างฐานขอ้ มลู และตารางด้วย phpMyAdmin 150
อ่านก่อนจะไปตอ่ 151
สร้าง Server ด้วย NodeJS + ExpressJS 152
NodeJS ตดิ ต่อฐานข้อมลู MySQL 154
แก้ปัญหา NodeJS เชือ่ มตอ่ MySQL ไม่ได ้ 156
NodeJS + ExpressJS ตดิ ต่อฐานข้อมูล MySQL 156
ค�ำส่ัง SQL จัดการขอ้ มลู ใน MySQL ด้วย NodeJS 157
ออกแบบ RESTful API ส�ำหรับโปรเจค 161
RESTful API คือ ? 161
สรา้ ง Route ส�ำหรบั จดั การข้อมลู ผู้ใช ้ 163
ทดสอบข้อมูลผูใ้ ช้งานด้วยโปรแกรม Postman 164
ทดสอบสรา้ งข้อมลู ผูใ้ ช้ใหม่ 164
ทดสอบเรยี กขอ้ มลู ผู้ใช้ตาม id 165
ทดสอบเรยี กขอ้ มูลผู้ใชท้ ้งั หมด 166
ทดสอบอัพเดทขอ้ มูลผใู้ ชต้ าม id 166
ทดสอบลบขอ้ มูลผ้ใู ช้ตาม id 167
ท�ำระบบ Authentication ดว้ ย Passport + JWT 167
การท�ำ Authenticaton คอื อะไร 167
JWT (Json Web Token) คอื อะไร 168
Passport คอื อะไร 173
ติดตั้งโมดูลตา่ งๆ 177
Authentication สำ� หรบั การ Login 180
Authentication สำ� หรับการ Route ต่างๆ
สร้าง Route สำ� หรับจดั การขอ้ มูลสถานที ่
สรา้ ง Route สำ� หรับจัดการข้อมูลงานซอ่ ม
เริม่ สร้างหน้าเวบ็ สำ� หรบั WorkShop 184
เร่ิมสร้างโปรเจค 184
ตดิ ตัง้ โมดูลทีจ่ �ำเปน็ 185
ใชง้ าน CSS Framework Bootstrap ดว้ ย reactstrap 186
reactstrap คอื อะไร 186
ติดต้ัง reactstrap 186
เรมิ่ ตน้ ใชง้ าน reactstrap ร่วมกนั Bootstrap 187
สร้างหน้าจอตา่ งๆ ของโปรเจค 188
สร้างเมน ู 192
หน้าจอ Signin เข้าสูร่ ะบบ 195
สร้าง HOC (Higher-Order Components) เชค็ การ Authen กบั Route 202
แสดงเมนตู ามประเภทผู้ใชง้ าน 205
สร้าง HOC (Higher-Order Components) เชค็ สทิ ธก์ิ ารเขา้ ถึง Route 208
Local Storage ของ Browser อย่ไู หน 210
หน้าจอข้อมูลผู้ใช้ 211
Component แสดง Modal ส�ำหรับยนื ยันการท�ำงาน (Confirm Dialog) 217
สรา้ ง Component ชอ่ งกรอกข้อมลู เพื่อใชใ้ นการ Filter 220
Component แสดงขอ้ มูลรายชอ่ื ผู้ใช้แบบ TABLE 221
Component ฟอร์มกรอกขอ้ มลู ผใู้ ช้ 222
หนา้ จอข้อมลู สถานท ่ี 225
Component แสดงขอ้ มูลรายชอ่ื สถานทแี่ บบ TABLE 232
Component ฟอร์มกรอกข้อมลู สถานท่ี 233
หนา้ จอแจง้ ซอ่ ม 235
Component แสดงรายการแจง้ ซอ่ มแบบ TABLE 240
สรา้ งฟอร์มบันทกึ งานแจง้ ซ่อม 242
Component แสดง DropDown เลอื กรายช่อื สถานท ี่ 244
สรา้ งหนา้ จอแสดงรายละเอียดงานซ่อม 245
กำ� หนด Route สำ� หรับหน้าจอฟอร์มบนั ทกึ แจ้งซอ่ ม 247
หนา้ จองานซ่อม 249
Component แสดงรายการงานซอ่ มแบบ TABLE 250
สร้างหนา้ จอบนั ทกึ งานซอ่ ม 251
กำ� หนด Route สำ� หรับหนา้ จอฟอร์มบนั ทกึ การซอ่ ม 255
8CHAPTER
#WorkShop เวบ็ ระบบแจ้งซ่อม v. MongoDB
Coming Soon.....
WorkShop WebApplication ดว้ ย React : 8
จากใจผู้เขียน
ก่อนหนา้ ที่ผมจะเขียนหนงั สือเล่มน้ี ผมเองกศ็ ึกษา React ทง้ั จากทางเวบ็ ของไทยและตา่ งประเทศ ดู Youtube
ท้งั ของไทยและตา่ งประเทศ ของไทยนัน้ จะมีนอ้ ยมากไม่เท่าของตา่ งประเทศ แต่เนือ่ งจากผมเองก็ไมเ่ กง่ ภาษาองั กฤษพอได้
แบบ งูๆ ปลา จงึ เป็นเรอื่ งที่ล�ำบากและเสียเวลาอย่างมากในการท่จี ะศกึ ษา React ล�ำบากทง้ั การหาข้อมูล ล�ำบากท้ังการ
แปลองั กฤษเป็นไทย
ผมเองจงึ ตดั สินใจเสียเงินซ้อื คอรส์ สอนทัง้ ของไทยและของต่างประเทศ ต้องขอบอกวา่ มันดีกว่าการทเี่ ราไปไล่หาดู
ของฟรีตามเวบ็ เยอะ (ของฟรีก็ดคี รบั แตม่ ันไมต่ ่อเน่อื ง) แตต่ ้องยอมรับวา่ กว่าจะเขา้ ใจ React และพอเขียนไดก้ ห็ มดเงนิ ไป
รว่ มๆ กวา่ 20,000 บาท (นอี่ าจจะยังน้อยไปนะครับ บางคนผมว่าหมดหลายหมน่ื เลยทีเดียว)
จากการเสยี เงนิ ซ้ือคอร์สทำ� ใหผ้ มเข้าใจวา่ React มนั ไมไ่ ด้ยากอยา่ งท่ีคิด เพียงแตท่ ี่ผ่านมาผมเองหรือหลายๆ คน
เองอาจจะศึกษาแบบ งงๆ ผมจึงคิดว่าท�ำหนังสอื ดกี ว่า และผมตั้งใจจะท�ำในรปู แบบ PDF เพอื่ ให้สามารถเปิดอา่ นท่ีไหนกไ็ ด้
อกี ท้งั ยังสามารถ copy โค้ดไปใช้งานได้เป็นไปตาม step ของการสอน (บางทเี ราพมิ พโ์ คด้ ตามแลว้ มันดนั รันไมไ่ ด้ มนั กจ็ ะหยดุ
หงดิ นะครบั ) โดยราคาท่ผี มตั้งไวค้ ือ 1,950 บาท
ราคาแพงไปมั้ยสำ� หรับ PDF ถา้ ถามแพงมัย้ ...ส�ำหรับผม ผมว่ายังถูกไปนะครบั เพราะกอ่ นทผ่ี มจะเขยี น React ผม
ก็พยายามหาหนงั สือทเ่ี ปน็ ภาษาไทย 2-3 พันบาทผมก็จะซอ้ื สุดท้ายมนั ก็ไม่มีครับเลยตอ้ งซอ้ื คอรส์ หมดไปกว่า 20,000 บาท
ดงั น้ันในราคา 1,950 บาทน้ันผมกเ็ อาความรทู้ ี่ได้จากเงิน 20,000 บาทท่ผี มตอ้ งเสียไป บวกกบั ประสบการณ์การเขียน การ
ทดสอบอย่หู ลายเดอื นมากๆ มาถา่ ยทอดเปน็ หนงั สอื เลม่ นี้ในรูปแบบ Step by Step ด้วยภาษาท่ีเขา้ ใจง่าย ถือว่าคมุ้ ค่ามาก
ครบั กับ workshop ทงั้ หลายในเลม่ ทผี่ มเองกไ็ ม่รจู้ ะมีใครให้ได้มากเทา่ ผมหรอื เปล่า แค่ workshop ถ้าไปจ้างเขาเขยี น
ท้ังหมดน้ผี มว่า “หลายหม่ืนครับ”
PDF แบบน้กี แ็ จกจา่ ยกนั ไดส้ .ิ ..ใชค่ รับ...copy แจกจ่ายกันไดแ้ ตก่ ็เทา่ กบั ว่าคุณกำ� ลงั ทำ� ลายโปรแกรมเมอร์คนหน่งึ ที่
ตั้งใจท�ำหนงั สือ และถอื เปน็ การละเมิดลขิ สิทธิ์ รวมถึงคุณจะไม่ไดร้ ับสิทธ์ิในการเข้ากลุม่ พูดคยุ เรอ่ื ง React กับผมดว้ ย ถ้าผมจะ
ท�ำเป็นหนงั สือเปน็ เลม่ ๆ ผมกท็ ำ� ได้ ตน้ ทนุ ในการพมิ พ์ก็ไมเ่ กนิ เล่มละ 300 บาทครับ แต่ผมอยากให้คนท่ีศึกษา React ได้พก
PDF นีเ้ พ่อื เปดิ ดทู ่ีไหนก็ได้ และเวลาทำ� ตามโค้ดกจ็ ะสามารถ copy โค้ดจากหนังสือมาลองได.้ ..มนั คือความตั้งใจของผม...ยงั
ไงก็อย่า copy ไปแจกจ่ายกนั นะครบั
สำ� หรบั ผทู้ ่ซี ือ้ หนงั สือ “WorkShop WebApplication ด้วย React แบบ Step by Step” ของแทจ้ ะไดร้ บั สิทธ์ิ
พเิ ศษคอื
1. เขา้ กลุม่ ReactThaiBook ไวพ้ ดู คุยกัน
2. คุณจะไดร้ ับ Source Code ในหนังสอื ทัง้ หมด
“สำ� หรับผทู้ ลี่ ะเมดิ ลขิ สิทธิจ์ ะถกู ตัดสิทธิต์ า่ งๆ โดยอัตโนมัต”ิ
8
WorkShop WebApplication ดว้ ย React : 9
คำ� แนะน�ำ
การใชง้ านหนงั สือ
1. คอมฯ ที่ผมใชเ้ ขียนโปรแกรมนนั้ ผมใช้ Mac OS นะครบั แตใ่ ครท่ีใช้ Windows กใ็ ช้งานไดเ้ หมอื นกันไม่มปี ญั หา
อะไรไม่ตอ้ งไปซ้ือ Mac มาใชน้ ะครบั
2. ในหนงั สอื ถา้ บอกว่าให้เปิด Terminal ถา้ เปน็ ฝ่งั Windows กจ็ ะเปน็ CMD หรือ command prompt นั่นเอง
3. ทุกบทจะมีการใชค้ �ำส่ัง command พ้ืนฐาน เช่น cd เพือ่ เข้าไปยงั folder ทต่ี อ้ งการ ดังน้ันค�ำสงั่ พืน้ ฐานพวกนี้
ควรศึกษาไวบ้ า้ งนะครบั แตไ่ มย่ ากอะไรครับผมก็จะมีแนะนำ� ไปในแต่ละบทครับ
4. แนะน�ำใหใ้ ช้ Google Chrome ในการแสดงผลเวบ็ ท่ีท�ำนะครับ
5. ในหนงั สอื ถา้ บอกว่าดผู ลลัพธ์ที่ browser น่นั แสดงวา่ ผู้เรียนจะตอ้ งรนั โปรเจคอย่นู ะครับ (npm start)
6. ทกุ ค�ำสง่ั ใน Terminal เชน่ ต้องกดแปน้ enter ดว้ ยนะครบั เพอ่ื เปน็ การรันค�ำสงั่ เช่น npm start พอพิมพเ์ สร็จ
กก็ ดแปน้ enter
7. ส�ำหรบั Terminal ใน Mac OS ผมใช้โปรแกรม iTerm แทน Terminal เนื่องจากมนั แยกสีสนั Folder ให้
ใครสนใจกห็ ามาติดตง้ั ได้ครบั และใน Mac OS ผมมีการใช้ Git ดังนัน้ ใน iTerm ผมมนั จงึ มคี ำ� วา่ master ตอ่ ทา้ ย folder ด้วย
ซึ่งมนั เป็นระบบของ Git ครับ ดังนัน้ ไมต่ ้องแปลกใจนะครับว่าทำ� ไมมคี �ำว่า master ตอ่ ท้ายเปน็ สเี ขยี วบ้าง เหลอื บ้างครบั
8. การสร้างไฟล์ต่างๆ ในโปรเจค โดยทถ่ี า้ ในหนงั สือบอกว่าใหส้ รา้ งไฟล์ src/Header.js แสดงวา่ ใหส้ ร้างไฟล์ชื่อ
Header.js ไว้ใน folder ชือ่ src แล้วถ้าบอกว่า ให้สร้างไฟล์ src/components/Button.js แสดงว่าใหส้ รา้ งไฟล์ช่ือ Button.
js ไว้ใน folder ชอื่ components ทอ่ี ยโู่ ฟลเดอร์ src อกี ทีหนงึ่ โดยถ้าไมม่ ี folder ชอื่ components ก็ให้ท�ำการสรา้ งโฟลเดอร์
ดงั กล่าวด้วย
9. การใชค้ ำ� สั่ง npm install (หรอื พิมพ์สั้นๆ ว่า npm i) เครือ่ งตอ้ งใชง้ าน internet ได้ เนือ่ งจากคำ� ส่ังดงั กล่าวตัว
npm จะไปดาวนโ์ หลดแพ็คเกจท่ีเราตดิ ต้ังจากเว็บไซตข์ อง npm
การใช้งาน Source Code
1. เม่ือ download Source Code มาแล้ว unzip ใหเ้ รียบร้อย
2. ใน Terminal ให้ cd เข้าไปยงั folder ของ workshop ท่ีตอ้ งการ
3. ตอ้ งตดิ ต้ง package ตา่ งๆ ก่อนครับ (เพราะโดยทัว่ ไปเขาจะไม่ copy folder node_modules ไปดว้ ยครับมนั
ใหญ)่ โดยพมิ พ์ npm install แล้วรอจนกว่าจะตดิ ต้งั modules ตา่ งๆ จนเสร็จ
4. ใชง้ านได้ตามสบาย
9
WorkShop WebApplication ด้วย React : 10
แนวทางการสรา้ งโปรเจค React
ในการสร้างโปรเจคดว้ ย React นน้ั ผมแบง่ เปน็ 3 วธิ ีครบั คอื
1. สรา้ งดว้ ยค�ำสั่ง create-react-app โดยหนงั สอื เลม่ น้จี ะใช้แนวทางน้คี รับ
2. สรา้ งด้วย webpack ส�ำหรบั แนวทางนี้เปน็ อะไรทยี่ ากครบั เหมาะกบั คนที่ต้องการ optimize โปรเจคแบบตาม
ต้องการ แตผ่ มไมแ่ นะน�ำสำ� หรบั มอื ใหม่ หรือมอื เก่าทย่ี งั ไม่เก่ง เพราะตอ้ งบอกว่ามนั ยากในการ config อะไรตา่ งๆ แต่ผลลพั ธท์ ่ี
ไดม้ นั กด็ ีตามการ config ของเราครบั (config ดกี ด็ ี config ไม่ได้กไ็ รป้ ระโยชน)์
3. สรา้ งด้วย Next.js ตวั นี้ถือเป็น framework ทีเ่ ราไม่ตอ้ งไปวุ่นวายกบั webpack ครับดีมากๆ แตก่ ย็ งั ไมแ่ นะน�ำ
ส�ำหรบั มอื ใหม่ หรือมือเก่าทย่ี งั ไม่เกง่ เนือ่ งจากรปู แบบการเขียน React ดว้ ย Next.js น้ันจะตา่ งจากการเขียน React แบบปกติ
อยบู่ า้ ง อาจจะทำ� ใหค้ นทย่ี งั ไม่คุน้ กบั React งงไดค้ รับ อารมณ์ประมาณว่าไม่เคยเขียน PHP แต่มาเริ่มใช้ framework พวก Yii
พวก Laravel ครับ ดังนน้ั เอา react ใหค้ ล่องดีกว่าครับค่อยมาลองใช้ Next.js จะดที ี่สุด
ผมเคยหลงทางกบั การสร้าง React มาพอสมควรเพราะหวงั ว่าจะได้ช้นิ งานทส่ี ุดยอด แต่แท้จริงแลว้ หากเราไม่
เข้าใจ react และปูพื้นฐานทีด่ ี มนั ก็จะท�ำให้เราเสยี เวลาเปลา่ ๆ ดังน้ันแนวทางการสรา้ ง react ดว้ ยคำ� สงั่ create-react-app
จึงเหมาะทส่ี ดุ ส�ำหรบั คนท่ยี งั ไม่เซยี นในการเขยี น React “เชอ่ื ผมเถอะครบั ผมเจบ็ มาเยอะ”
10
1 WorkShop WebApplication ด้วย React : 11
ติดตง้ั เคร่อื งมือ
เพ่ือใช้งาน React
ตดิ ตงั้ Node.js และ npm
ในการใชง้ าน React นน้ั จำ� เป็นต้องติดต้ังเครื่องมือท่จี ำ� เปน็ พนื้ ฐานด้วยกนั คอื Node.js, npm และ Visual Studio
Code
ส�ำหรับการติดตั้ง npm นนั้ จะถูกตดิ ตง้ั เขา้ มาอตั โนมัตเิ มือ่ เราไดต้ ดิ ตงั้ Node.js ครับ ซ่ึงตัว npm กค็ อื Node
package Manager ที่มหี นา้ ที่จดั การ package ต่างๆ ทจ่ี ะใช้ในการพฒั นาโปรแกรมดว้ ย javascript สมัยใหม่ ซงึ่ React ก็
ต้องใชง้ าน Node และ npm ด้วยครับ
ติดต้งั Node.js โดยดาวนโ์ หลดตวั ติดต้ังไดท้ ี่ https://nodejs.org/en/ โดยเวบ็ ไซต์จะเลือกชุดตดิ ตงั้ ให้ตาม OS ท่ี
เราเปิด โดยเวอร์ชันท่ีจะดาวนโ์ หลดใหเ้ ลือกเป็นแบบ LTS ซงึ่ ปัจจบุ นั เป็นเวอร์ชนั 8.9.1 ส่วนใครท่เี ปน็ เวอรช์ ันทตี่ ำ�่ กวา่ น้ีก็
สามารถใช้งานไดค้ รับโดยไม่ควรต่�ำกวา่ v.6.9 ครบั และเครื่องทผ่ี มใชง้ านอยกู่ จ็ ะเป็นเวอร์ชัน 6.9.1 ส่วน npm จะเปน็ เวอร์ชัน
3.10.8 (ผมขอใชเ้ วอรช์ ันนแ้ี ลว้ กนั นะคับ แต่ผเู้ รียนเลือกตัวเวอรช์ ันลา่ สุดทเี่ ป็น LTS เลยนะครับ ใช้งานได้เหมอื นกัน)
หลังจาก download มาแลว้ ก็ดำ� เนนิ การติดตั้งไดเ้ ลยนะคบั ตามวิธขี อง OS ของแตล่ ะคนครบั จากภาพดา้ นล่างผม
จะสอนการตดิ ตัง้ ในเวอร์ชนั Windows 7 นะครบั (สาย Mac คิดว่านา่ จะทำ� กันไดใ้ ชม่ ้ยั ครบั )
บางเครอ่ื งจะไม่ข้นึ หนา้ ต่างน้นี ะครับ
11
WorkShop WebApplication ด้วย React : 12
ตอ้ งรอสกั พักนะครับถงึ จะข้นึ หนา้ จอนี้
12
WorkShop WebApplication ดว้ ย React : 13
13
WorkShop WebApplication ด้วย React : 14
ดม่ื น�้ำ ปัสสาวะ รอจนติดต้งั เสร็จครับ
14
WorkShop WebApplication ด้วย React : 15
เสร็จแลว้ ครับ
จากนัน้ เปดิ Command (ใน Mac จะเป็น Terminal) เพือ่ เชค็ เวอรช์ น่ั ของ Node และ npm ว่าตดิ ต้ังเรยี บร้อย
สมบรู ณห์ รือไม่
พิมพ์ cmd ครับแลว้ เปดิ หนา้ ต่าง cmd
15
WorkShop WebApplication ด้วย React : 16
ตรวจสอบเวอร์ชัน node โดยพิมพ์ node -v
ตรวจสอบเวอร์ชัน npm โดยพิมพ์ npm -v
ติดตัง้ โปรแกรม Visual Studio Code
โปรแกรม Visual Studio Code เป็น IDE สำ� หรบั เขยี นโปรแกรมภาษาตา่ งๆ และมนั เหมาะมากส�ำหรบั การใช้เขียน
React หรือใครถนัด Sublime หรอื Atom ก็ได้นะครับตามสบายเลยครับ การตดิ ตั้งท�ำไดโ้ ดยดาวน์โหลดโปรแกรมจาก
เวบ็ ไซตห์ ลักของ Visual Studio Code https://code.visualstudio.com/
ดาวน์โหลดตดิ ต้งั ตาม OS ทใี่ ช้งานนะครับ ในภาพจะเปน็ ส�ำหรบั Mac OS (หน้าเวบ็ มันจะเลือกใหเ้ ราอตั โนมตั คิ รบั )
16
WorkShop WebApplication ด้วย React : 17
ติดต้งั Extension สำ� หรับ Visual Studio Code
Extension เป็นตัวเสริมท่ีท�ำใหเ้ ราสะดวกสบายขน้ึ เวลาเขยี นโปรแกรมครับ โดยทผ่ี มแนะน�ำให้ติดตั้งก็จะมีอยู่
- Beautify css/sass/scss/less ของ michelemelluso ตัวนี้จะช่วยเราจัดรูปแบบโค้ดที่เราพมิ พ์ใหส้ วยงาม
อา่ นง่าย (จัดแท็บให้เราน่ันเองครบั )
- GraphQL for VSCode ของ Kumar Harsh ตวั นจ้ี ะทำ� ให้เวลาเราพิมพ์ Schema ของ graphql แสดงสีแยก
ตาม type ต่างๆ ซึ่งกช็ ่วยไดเ้ ล็กนอ้ ย ดกี วา่ ไมม่ ีละกนั ครบั
- highlight-matching-tag ของ vincaslt ตัวน้ีจะ Highlight แท็กเปิด แทก็ ปิดใหเ้ ราครบั
- Path Intellisense ของ Christian Kohler ตัวนีโ้ คตรดคี รบั เพราะมันจะชว่ ยเราพมิ พ์ Path ของไฟลท์ ี่เรา
จะใชง้ านมีประโยชนส์ ดุ ๆ ตอนใช้คำ� ส่ัง import xxx from ‘./xxxx/....’ มนั จะแสดง path และ ไฟล์ตามคำ� ที่เราพมิ พท์ �ำให้
เราไมต่ อ้ งไปจ�ำ path อะไรมากมาย
- vscode-icons ของ Roberto Huertas ตวั นกี้ ็จะแสดง icon หนา้ ชอื่ ไฟล์ใน Project เราแยกตามชนิดของ
ไฟล์
วิธีตดิ ต้งั ตามภาพดา้ นล่างเลยครบั (เปิดโปรแกรม vs code ก่อนนะครบั )
คลิกไอคอน Extensions
พิมพช์ ื่อ Extensins ท่ตี อ้ งการ
คลิกป่มุ Install เพอื่ ติดต้ัง
17
WorkShop WebApplication ดว้ ย React : 18
ตดิ ตัง้ เสร็จคลิก Reload
ท�ำแบบน้ที กุ ๆ Extension ครบั
18
2 WorkShop WebApplication ด้วย React : 19
Express Web Server
ตดิ ตัง้ และใช้งาน
ExpressJS เปน็ framework สำ� หรับใชท้ �ำเว็บใน NodeJS ซง่ึ มันจะท�ำใหเ้ ราใชง้ าน NodeJS ได้สะดวกข้นึ และก็
เปน็ ท่ีนิยมมากครับ ซ่ึงในหนังสอื เลม่ น้เี ราจำ� เป็นต้องใช้เพือ่ สร้าง Server ท่ใี ห้บรกิ ารข้อมลู ต่างๆ เชน่ สรา้ ง Server สำ� หรบั
สำ� หรับใหบ้ รกิ าร API GraphQL, สรา้ ง Server ส�ำหรับ สำ� หรบั ให้บรกิ าร API ในการตดิ ตอ่ กบั MySQL และสรา้ ง Serv-
er สำ� หรับให้บรกิ าร API ในการตดิ ต่อกับฐานขอ้ มูล mongoDB
โดยในบทน้ีเราจะมาเรียนรูก้ ารสร้าง Express Web Server พ้ืนฐานแบบง่าย เพื่อเรยี นรู้หลักการทำ� งานตา่ งๆ จะได้
ไม่ “งง” ครบั
1. ให้สร้าง folder ช่ือ reacttopro ส่วนเครื่องผู้เรียนสร้างไวท้ ่ี drive ไหนกไ็ ด้นะครับตามสะดวก และงานตอ่ ๆ
ไปก็จะถกู เก็บไวใ้ นโฟลเดอร์ reacttopro
2. สร้าง folder ช่อื server_express จากนัน้ เปิด Terminal แลว้ cd เขา้ ไปที่ server_express
19
WorkShop WebApplication ด้วย React : 20
3. พิมพ์ npm init -y เพือ่ สร้างไฟล์ package.json
4. เปดิ โปแกรม Visual Studio Code แล้วเปิด folder server_express ซึ่งจะมไี ฟล์ package.json อย่คู รับ
5. กลบั ไปที่ Terminal พมิ พ์ npm i express -S (npm i -S ยอ่ มาจาก npm install --save)
6. กลับมาทีโ่ ปรแกรม Visual Studio Code แล้วสรา้ งไฟล์ server.js แล้วพมิ พ์โคด้ ดา้ นล่างนี้
const express = require('express') A
const app = express() B
app.listen(8000, () => {
console.log('ready on http://localhost:8000')
})
20
WorkShop WebApplication ดว้ ย React : 21
อธบิ ายโค้ด
A. สรา้ งตัวแปร Server ชอ่ื app โดยเรียกใช้ function express จากตัวแปร express
B. กำ� หนดให้ server (app) พรอ้ มท�ำงานท่ี port 8000 และแสดงขอ้ ความออกมาเมือ่ server ท�ำงานส�ำเร็จ
7. กลับมาท่ี Terminal แล้วพิมพ์ node server.js เป็นคำ� สัง่ ของ node ในการส่ังรนั ค�ำส่ังไฟลท์ ี่ต้องการ ซึง่ กค็ อื
การรนั server ทเี่ ราพง่ึ เขียนข้ึน โดยจะแสดงข้อความ ready on http://localhost:8000 ดงั ภาพด้านล่างน้ี
8. ลองเปดิ browser แลว้ พิมพ์ http://localhost:8000 ก็จะพบว่ามันทำ� งานได้ แตม่ ันจะแสดงข้อความ
Canont GET / เนอื่ งจากเรายังไมไ่ ด้กำ� หนด route
Route คืออะไรและสรา้ งยังไง
Route อธบิ ายแบบ simpleๆ กค็ อื path ต่างๆ ของเว็บนั่นเองครับ เชน่ http::/abc.com/member, http://abc.
com/order ซ่งึ Route กค็ อื member และ order (ถา้ เป็น PHP เราไมจ่ �ำเป็นตอ้ งสรา้ ง route ครับเพราะมันทำ� ลิงคไ์ ปได้เลย
แต่ PHP Framework บางตวั ก็ตอ้ งสร้าง Route เพอ่ื บอกเส้นทางลงิ ค์ต่างๆ) วิธีสร้าง route ใน express ท�ำไดไ้ ม่ยากครับ
จัดการ Route แบบ GET request
1. แก้ไขไฟล์ server.js โดยแกเ้ ป็นโคด้ ดา้ นลา่ งน้ี
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('Root Page')
})
app.listen(8000, () => {
console.log('ready on http://localhost:8000')
})
อธิบายโค้ด
ก. ในการสรา้ ง route แบบ GET นัน้ parameter ตัวแรกคือ url ของ path ที่ต้องการในที่น้ีระบุเปน็ / หมาย
ถึง root path ครับ
ข. parameter ตัวที่ 2 เป็น function ซ่งึ จะรับ parameter 2 ตัว คอื req, res โดยที่
req = request จะรับพวก params ตา่ งๆ เชน่ http://localhost/member/2 (params จะอยถู่ ัดจาก url
ของ route นน่ั ๆ ในทนี่ ้คี ือค่า 2)
res = response เปน็ การ send ค่าออกไป (งา่ ยๆ คอื คนื คา่ ออกไปน่ันเองครับ)
สังเกตุวา่ เราเขยี นแบบ arrow function นะครบั ซง่ึ โดยทวั่ ไปเราก็จะใช้ส่วนน้ใี นการ get ข้อมูลจาก DB แตใ่ น
โคด้ เราส่ังให้แสดงขอ้ ความ Root Page ออกมาครับ
21
WorkShop WebApplication ด้วย React : 22
2. กลับไปท่ี Terminal ยกลกิ การรนั node โดยกดแปน้ ctrl + c แลว้ ส่ังรนั ใหม่โดยพิมพ์ node server.js (ทุก
ครัง้ ที่แก้ไขไฟล์ server.js แล้วหาตอ้ งการเห็นการเปลี่ยนแปลงตอ้ ง ยกเลิกการรนั แล้วรันใหม่ครับเรียกว่าเปน็ การ restart
server ครับ)
3. ท่ี browser ลอง refresh ใหมด่ คู รบั จะเห็นข้อความ Root Page แล้วครบั
4. ลองสร้าง route อน่ื โดยแก้ไขไฟล์ server.js ตวั เดิมในโค้ดผมจะเพิม่ route สำ� หรบั แสดงหนา้ เพจ member
และ order
พอแก้ไขแลว้ ท่ี Terminal กก็ ด ctrl+c เพอ่ื ยกเลกิ การรัน แล้วส่ังรันอกี ครงั้ โดยพมิ พ์ node server.js
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('Root Page')
})
app.get('/member', (req, res) => {
res.send('Member Page')
})
app.get('/order', (req, res) => {
res.send('Order Page')
})
app.listen(8000, () => {
console.log('ready on http://localhost:8000')
})
5. ที่ browser ลองพิมพ์ http:://localhost:8000/member และ http://localhost:8000/order กจ็ ะเหน็
วา่ เวบ็ server ของเราแสดงหน้าเพจตาม route ทกี่ �ำหนดแลว้ ครับ
22
WorkShop WebApplication ด้วย React : 23
6. กรณีทตี่ ้องการแสดงคา่ params ทส่ี ่งมากบั url เช่น http://localhost:8000/order/2 สามารถทำ� ไดโ้ ดยเพมิ่
โคด้ ด้านลา่ งนี้
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('Root Page')
})
app.get('/member', (req, res) => {
res.send('Member Page')
})
app.get('/order', (req, res) => {
res.send('Order Page')
})
app.get('/order/:orderId', (req, res) => {
res.send('Order Page Id=' + req.params.orderId)
})
app.listen(8000, () => {
console.log('ready on http://localhost:8000')
})
จากนนั้ ที่ Terminal ยกเลกิ การรนั โดยกดแป้น ctrl+c แลว้ รนั ใหมอ่ ีกคร้งั โดยพมิ พ์ node server.js กลบั ไปที่
browser แลว้ กรอก url เป็น http://localhost:8000/order/2 กจ็ ะได้ผลดังภาพด้านลา่ งน้คี รับ
23
WorkShop WebApplication ดว้ ย React : 24
จัดการ Route แบบ POST request
ตวั อย่าง route แบบ POST ก็อยา่ งเชน่ การ submit คา่ จาก form โดยใน express ก็จะมวี ิธกี ารรบั คา่ เหล่านีไ้ ด้
โดยอาศยั แพค็ เกจตัวหนงึ่ ทชี่ ่ือ body-parser เพื่อท�ำให้ express สามารถเขา้ ถงึ คา่ ของ form ได้ หรือนอกจากการ submit
form แลว้ กย็ งั สามารถใชไ้ ดก้ ับการ POST ค่าในแบบตา่ งๆ เช่น POST คา่ แบบ json ศึกษาเพิ่มเตมิ ได้ที่ https://github.
com/expressjs/body-parser
1. ที่ Terminal ยกเลกิ การรนั server ก่อนครับ (กดแป็น ctrl + c)
2. พิมพ์ npm i body-parser -S แลว้ กดแป้น Enter
3. แก้ไขไฟล์ server.js เปน็ โค้ดด้านลา่ งนี้
const express = require('express') A B
const bodyParser = require('body-parser') C
const app = express()
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json({ type: '*/*' }));
app.get('/', (req, res) => {
res.send('Root Page')
})
app.get('/member', (req, res) => {
res.send('Member Page')
})
app.get('/order', (req, res) => {
res.send('Order Page')
})
app.get('/order/:orderId', (req, res) => {
res.send('Order Page Id=' + req.params.orderId)
})
app.post('/order', (req, res) => {
console.log(req.body)
res.json({ status: 'ok' })
})
app.listen(8000, () => {
console.log('ready on http://localhost:8000')
})
อธบิ ายโคด้
A. สร้างตวั แปรรองรบั การใชง้ าน body-parser
B. ค�ำสง่ั use (app.use) เป็นการบอกกับ express วา่ จะมกี ารใช้ middleware ซึ่งในโค้ดคอื การใช้งาน middle-
ware ท่ีชอ่ื body-parser (bodyParser) โดยท่ีผมทำ� ไว้ 2 แบบคอื
app.use(bodyParser.urlencoded({ extended: true })) คำ� สัง่ น้ี จะท�ำให้ express เขา้ ใจการส่งค่า
body แบบ form submit ทำ� ให้ express อ่านค่าท่ีสง่ มาได้
app.use(bodyParser.json({ type: ‘*/*’ })) ค�ำสั่งนี้ จะท�ำให้ express เขา้ ใจการสง่ คา่ body ในรปู แบบ
json ท�ำให้ express อา่ นคา่ ทส่ี ่งมาได้
24
WorkShop WebApplication ดว้ ย React : 25
C. เป็นรูปแบบการสร้าง route แบบ POST request มนั ก็เหมือนๆ กบั GET โดยในโคด้ ผมให้แสดง log ค่าของ
body ทสี่ ่งมา และแสดงขอ้ ความกลับไปแบบ json
4. กลับไปที่ Terminal แลว้ สง่ั รัน server โดยพมิ พ์ node server.js สง่ั รอไวน้ ะครบั สว่ นการทดสอบนัน้ เราจะใช้
โปรแกรมตวั หนง่ึ ทีเ่ ปน็ extenstion ของ Google Chrome ท่ชี อ่ื วา่ Postman
ติดตง้ั และใช้งาน Postman
Postman เปน็ extension เสริมตัวหนึ่งของ Google Chrome ที่มไี วท้ ดสอบการท�ำงานของ API เชน่ การ GET,
POST เปน็ ต้น ท�ำใหเ้ ราไม่ต้องสรา้ งหนา้ เวบ็ มาไวท้ ดสอบ เรยี กไดว้ ่าจำ� เป็นตอ้ งใช้เลยทเี ดียวเชยี ว
การตดิ ตง้ั ท�ำได้โดย คน้ หาค�ำวา่ chrome postman จะเจอลิงค์ด้านลา่ งน้ี กค็ ลกิ เขา้ ไปเลยครบั
25
WorkShop WebApplication ดว้ ย React : 26
เขา้ ใช้งาน Postman
เม่อื เขา้ ใชง้ านโปรแกรม Postman คร้ังแรกเขาจะให้เราสมัครสมาชิกกอ่ นนะครบั หรอื เลอื ก Login ดว้ ย Gmail ที่
เรามีอยู่แลว้ กไ็ ด้ ในท่นี ผ้ี มเลอื กเป็น Sign Up with Google (แลว้ ระบบจะพาเราไปยงั หนา้ กรอก email กับ password)
เมอื่ เขา้ สโู่ ปรแกรมกจ็ ะได้หนา้ จอดังภาพด้านลา้ งนค้ี รบั
26
WorkShop WebApplication ด้วย React : 27
วิธใี ชง้ าน Postman
1. คลิกเลอื กเป็นแบบ POST
2. กรอก url เปน็ http://localhost:8000/order
3. แทบ็ Body เลอื กการสง่ ขอ้ มูลแบบ x-www-form-urlencoded เพราะในไฟล์ server.js เรากำ� หนดให้ body
parser เขา้ ถงึ ขอ้ มลู ท่สี ่งมาแบบ urlencoded จากน้นั กำ� หนด key และ value ดังภาพ
4. แสดงผลลัพธท์ ี่มาจากการ response
2
1
3
4
เมื่อดูที่ Terminal ก็จะแสดงค่าท่ี POST มา เพราะในโคด้ เราได้สง่ั ให้ console.log ออกมานนั่ เองครับ พร้อมกบั ส่ง
response กลบั ไปแบบ json ดงั นน้ั โปรแกรม Postman จึงแสดงข้อความ ok ออกมาครับ
app.post(‘/order’, (req, res) => {
console.log(req.body)
res.json({ status: ‘ok’ })
})
เพม่ิ เตมิ
ในโปรแกรม Postman เราเลือกการ request ไดห้ ลายแบบไมว่ ่าจะเป็น POST, GET, DELETE หรอื อนื่ ๆ ครับ และ
ถ้าจำ� ไดใ้ นไฟล์ server.js เรามกี ารใช้ body-parser เขา้ ถงึ ข้อมลู แบบ json ด้วย ดงั น้นั ถ้าตอ้ งการทดสอบการ POST แบบ
json ก็สามารถท�ำได้โดย Body เลอื กเปน็ raw แลว้ เลอื กประเภทเป็น JSON (application/json) ดงั ภาพด้านลา่ งครบั
27
WorkShop WebApplication ดว้ ย React : 28
Express Middleware ใชย้ ังไง
ใน express จะมสี ิ่งหน่ึงทเี่ ราจะไดใ้ ชง้ านอยู่ประจำ� น่ันคือ Middleware ซึง่ ผมเชือ่ วา่ หลายๆ คนอาจจะยงั ไม่เข้าใจ
ว่า ทำ� ไมต้องใช้ Middleware (แค่ชอื่ ก็ชวนง งง)
หลักการทำ� งานของ Middleware คือ
1. ใช้ middle โดยเรียกใช้ use ซึ่งจะรบั ฟงั ก์ชนั โดยมี parameter 3 ตัวคือ req, res, next เชน่
app.use((req, res, next))
2. แต่เราตอ้ งวางโคด้ app.use ไว้กอ่ นคำ� ส่งั บรรทัด route หรอื กอ่ นบรรทัดท่เี ราต้องการให้ middleware me
ทำ� งานกอ่ นนะครับ พดู ง่ายๆ มนั ก็ทำ� งานเป็นแบบเรียงล�ำดบั บนลงล่างนน่ั เองครบั
3. parameter ทชี่ อื่ next ถ้ามกี ารเรยี กใช้ next() ตวั express middleware จะมองหา middleware ตัวถดั ไป
4. ข้อควรจำ� ในการใช้ app.use ถอื เป็นการเรยี กใช้ middleware เราจะตอ้ งส่ัง next() หรอื ไมก่ ม็ ีการ re-
sponse เสมอ ไม่งัน้ มนั จะท�ำงานอยูต่ ลอดไมห่ ลดุ ออกจาก Loop (แต่จากโค้ดกอ่ นหนา้ นท้ี ี่มกี ารเรียกใช้ body-parser แล้ว
เราไมไ่ ด้สง่ั next() ก็เพราะว่าตัว body-parser เขาเขยี น next() ภายในใหแ้ ลว้ ครบั ) ตัวอย่างการใช้ middleware เช่น
app.use((req, res) => { app.use((req, res) => {
console.log('middle ware') console.log('middle ware')
next() res.json({success : 'ok'})
}) })
โคด้ ตอ่ ไปน้ีเป็นการสาธิตการทำ� งานของ middleware เปน็ โคด้ ทเ่ี ขา้ ใจงา่ ยๆ นะครบั โดยแก้ไขไฟล์ server.js เป็น
โคด้ น้คี รบั
const express = require('express')
const app = express()
app.use((req, res, next) => {
console.log('middle ware')
next()
})
app.get('/member', (req, res) => {
console.log('member page')
res.send('Member Page')
})
app.get('/order', (req, res) => {
console.log('order page')
res.send('Order Page')
})
app.listen(8000, () => {
console.log('ready on http://localhost:8000')
})
ที่ Terminal ให้ Stop node ก่อนโดยกดแปน็ ctrl + c จากนัน้ สัง่ รันใหม่โดยพมิ พ์ node server.js ตอนน้ีให้
เปิดหน้าต่าง Terminal ค้างไวค้ กู่ บั browser นะครบั แลว้ ท่ี browser พิมพ์ url เป็น http://localhost:8000/order
จะเหน็ ว่าท่ี browser กแ็ สดงคำ� วา่ Order Page สว่ นที่ Terminal กจ็ ะแสดงค�ำวา่ middle ware ก่อนแสดง
ค�ำว่า order page
28
WorkShop WebApplication ด้วย React : 29
จากผลลพั ธ์ก็จะพอเข้าใจแลว้ ใช่ม้ยครับว่า middleware จะท�ำงานกอ่ นที่จะมีการ handle route order คราวนม้ี า
ดูอกี ตัวอยา่ งหนง่ึ ครบั แกไ้ ขไฟล์ server.js เป็นโค้ดดา้ นลา่ งน้คี รบั
const express = require('express')
const app = express()
app.use('/order', (req, res, next) => {
console.log('middle ware for order')
next()
})
app.get('/member', (req, res) => {
console.log('member page')
res.send('Member Page')
})
app.get('/order', (req, res) => {
console.log('order page')
res.send('Order Page')
})
app.listen(8000, () => {
console.log('ready on http://localhost:8000')
})
จากโค้ดด้านบนจะแสดงให้เหน็ วา่ middleware สามารถ handle เฉพาะ route ทเ่ี ราต้องการไดโ้ ดยในทน่ี ม้ี ันจะ
ทำ� งานเฉพาะกบั route /order เทา่ นั้นครบั
รปู แบบการใช้งาน middleware ยงั มีอีกเยอะครบั ใครอยากศึกษาเพ่ิมเติมสามารถดไู ด้ที่
http://expressjs.com/en/guide/using-middleware.html
29
3 WorkShop WebApplication ด้วย React : 30
ติดตั้ง React
และพื้นฐาน ES6
การติดต้งั React
ในการเขยี น javascript สมัยใหม่อยา่ งเชน่ React นน้ั จะเปลยี่ นมาใชร้ ูปแบบของ javascript เวอร์ชัน ES2015 หรือ
เรยี กส้ันๆ ว่า ES6 (ปจั จบุ ันมีมากกวา่ ES6 แล้วครับแต่รูปแบบเขียนเหมอื น ES6 เพียงแต่เพ่มิ ความสามารถบางอย่าง)
ในการเขยี น javascript แบบ ES6 นนั้ browser บางตวั บางรุ่นยงั ไม่เขา้ ใจบางคำ� สง่ั เนื่องจากมกี ารออก feature
ใหมๆ่ อยู่เสมอทำ� ใหต้ อ้ งมกี ารแปลง javascript แบบ ES6 เพอ่ื ให้ browser เข้าใจค�ำส่ัง ซึ่งสว่ นใหญเ่ ขาจะใชต้ ัว babel ในการ
แปลง (ดูเพ่ิมเติมได้ท่ี https://babeljs.io/) และต้องใช้ webpack ในการควบคมุ การแปลงโดยตอ้ ง config webpack ต่างๆ
นาๆ เรยี กได้ว่ายุง่ ยากพอสมควร ทาง facebook จงึ คดิ วิธีการ config เรอ่ื งเหลา่ นีใ้ นแบบที่งา่ ยที่สดุ เพ่ือให้คนท่เี ร่ิมเขียน Re-
act ได้เร่มิ ต้นระบบงา่ ยข้ึน จงึ ได้สร้างชดุ คำ� สั่ง cretae-react-app ขึ้นมาครับ (อยากรู้แบบเจาะลกึ สามารถดูได้ที่ https://
github.com/facebookincubator/create-react-app)
create-react-app เป็น command ในการสร้างโปรเจค React ท่ีงา่ ยทส่ี ดุ เหมาะกับนกั พฒั นาทไ่ี ม่ตอ้ งการความ
ยงุ่ ยากและการปรับแต่ง optimize ต่างๆ แตถ่ ือวา่ ณ. ปัจจบุ ันการสรา้ งโปรเจคดว้ ยคำ� ส่งั create-react-app เมอ่ื build แลว้
ก็ได้ performance ท่ีดีในระดับหนึ่งแล้วครบั และในหนังสือเล่มน้เี รามุง่ เน้นการใชง้ าน React ในแบบตา่ งๆ เพือ่ ให้ชำ� นาญใน
การใช้งาน ไม่ไดม้ ุ่งเนน้ ในการปรับจูน Performance
ก่อนอ่ืนเราต้องตดิ ตั้งคำ� สง่ั create-react-app ในระดับ global กอ่ น (กอ่ นจะใช้งานได้ตอ้ งตดิ ตั้ง Node.js ก่อน
นะครบั ดไู ดใ้ นบทท่ี 2 ครับ) โดยท่ี Terminal พิมพ์
npm install -g create-react-app
ถา้ เป็น MacOS หรอื Linux ใหใ้ ชค้ �ำส่งั sudo กอ่ นดงั นี้ (และเมื่อใช้ค�ำสัง่ sudo ระบบจะถามให้กรอก password)
sudo npm install -g create-react-app
(การติดต้งั แบบ global เราจะทำ� เพียงคร้งั เดียวในเครอ่ื งๆ นนั้ ครบั )
การสร้างโปรเจค
กอ่ นอน่ื เครอื่ งคอมฯ จะตอ้ งเช่ือมต่อ internet ไว้นะครับ และ folder โปรเจคของเราท้งั หมดจะถกู เก็บไวท้ ี่ folder
ช่อื reacttopro ดังนัน้ ใครยังไม่มโี ฟลเดอรน์ ี้กส็ รา้ งไวน้ ะครับ ไดรฟ์ ไหนก็ได้ครบั
1. ท่ี Terminal cd เขา้ ไปยัง folder reacttopro
2. จากนนั้ พิมพค์ ำ� สัง่ create-react-app myapp
ค�ำวา่ myapp คอื ชื่อโปรเจคท่ีตอ้ งการ คำ� ส่ัง create-react-app จะสร้างโฟลเดอร์ชื่อ myapp ใหอ้ ตั โนมตั ิครับ
และในการสรา้ งโปรเจคเครือ่ งจะต้องใช้งาน internet ไดน้ ะครบั โดยจะใชเ้ วลาสร้างไมน่ านขึน้ กบั ความเร็ว internet ดว้ ย
30
WorkShop WebApplication ดว้ ย React : 31
เมอ่ื สรา้ งโปรเจคเสร็จแล้วท่ี Terminal จะแสดงข้อความดงั ภาพดา้ นลา่ ง ซึง่ มีการแนะนำ� ดว้ ยครบั วา่ มีคำ� สงั่ อะไร
npm อะไรที่มใี ห้ใช้งานได้ โดยก่อนใชง้ าน npm พวกนเ้ี ราตอ้ ง cd myapp คอื เข้าไปยงั folder myapp ก่อนนัน่ เองครับ
npm start เป็นค�ำสง่ั ส�ำหรบั สงั รันโปรเจคโดยใชเ้ วลานิดหน่งึ ในการท�ำงานครับ ค�ำส่งั น้เี ราจะได้ใชบ้ ่อยมากๆ ครบั
npm run build เป็นค�ำสงั่ build โปรเจคเพอ่ื นำ� ไปใช้งานบน server จริง
npm test เปน็ คำ� สั่ง ทดสอบต่างๆ แต่ในหนังสืเลม่ น้จี ะยงั ไม่มกี ารสอนการเขียน test
npm run eject ค�ำสั่งนอ้ี ยา่ ใช้นะครับ เพราะมนั เป็นการแตกการ config ต่างๆ ออกมาเพอื่ ปรบั แต่ง ซงึ่ จะ งง
มากๆ ไมเ่ หมาะกบั มือใหมส่ ุด (ส่วนใหญเ่ ขาไม่ใช้กนั ครับ)
31
WorkShop WebApplication ดว้ ย React : 32
การสั่งรนั โปรเจค
1. ยงั อยูท่ ่ี Teminal เหมือนเดมิ นะครับ พิมพ์ cd myapp เพื่อเขา้ ไปยงั folder โปรเจคของเรา
2. พมิ พ์ npm start จะเปน็ การสง่ั รนั โปรเจคและ rect จะเปิด browser Google Chrome อัตโนมตั ิ ถา้ มนั ไม่
เปดิ ให้อตั โนมตั ใิ ห้เราเปดิ ขน้ึ มาเองแลว้ พิมพ์ url ว่า http://localhost:3000
ผลการรนั โปรเจคจะแสดงที่ browser ดังภาพดา้ นลา่ งนค้ี รบั
32
WorkShop WebApplication ด้วย React : 33
โครงสรา้ งโปรเจค
เปดิ โปรแกรม Visual Studio Code แล้วเปิดโฟลเดอร์ myapp ทีเ่ ราพง่ึ สร้างกจ็ ะไดด้ ังภาพดา้ นลา่ งครับ
node_modules คือโฟลเดอรท์ เ่ี กบ็ แพค็ เกจตา่ งๆ ท่ีเรา install โดยปกตแิ ล้วถ้าเราจะ copy โปรเจคของเราหรือ
เอาข้ึน Git HUB เขาจะไม่นยิ มเอาโฟลเดอรน์ ี้ไปด้วยเนื่องจากมนั ใหญ่ โดยเม่ือเราเอาโปรเจคของคนอนื่ มาใช้งานก็จะใช้คำ� สั่ง
npm install เพ่อื ติดตงั้ แพค็ เกจต่างๆ folder node_modules กจ็ ะปรากฏเขา้ มาเองครับ
public คอื โฟลเดอร์เก็บไฟล์ index.html และไฟลต์ า่ งๆ ทใี่ ชป้ ระกอบในการรันโปรเจคเพอ่ื แสดงผล (เราไมต่ อ้ ง
ทำ� อะไรกบั ส่งิ ทอี่ ย่ขู า้ งในนี้ก็ไดค้ รบั ปลอ่ ยมันไวอ้ ย่างนน้ั )
src คอื โฟลเดอร์หลักทเี่ ราจะใช้สรา้ งไฟล์ตา่ งๆ ทเี่ ก่ยี วกับโปรเจคของเรา นี้คือ folder ทีเ่ ปน็ หวั ใจในการทำ� งาน
ของเราครับ
.gitignore คือไฟลท์ เ่ี กย่ี วกบั การใช้งาน GIT โดยไฟล์นจี้ ะเป็นตวั บอกวา่ ไม่ตอ้ งเราไฟล์ หรือโฟลเดอรไ์ หนเข้าสู่
ระบบ GIT
package.json คือไฟลท์ ีเ่ กยี่ วขอ้ งกบั npm โดยไฟล์น้จี ะรวม dependencies ต่างๆ (รายชื่อแพ็คเกจท่ีตดิ ต้ัง
นัน่ เอง), คำ� ส่ังการสง่ั run ส่ัง build ฯลฯ ต่างๆ ของโปรเจคเรา ซ่ึงเวลาทเี่ ราคดั ลองโปรเจคของคนอนื่ มาใชง้ าน และเมอ่ื เรา
ใชค้ ำ� สงั่ npm install ตวั npm จะมาอา่ นไฟลน์ ี้แหละครบั วา่ มีแพ็คเกจอะไรบา้ ง มันจะได้ install ให้ จงึ ท�ำให้เราไม่จำ� เป็น
ตอ้ ง copy folder node_modules ใหค้ นอื่นครบั
README.md คือไฟลท์ อี่ ธิบายโปรเจค ว่าคือะไร ท�ำอะไร ใช้งานยังไง กเ็ หมอื นๆ คมู่ ือสัน้ ๆ นัน่ เองครบั ไฟล์นถ้ี ือ
เปน็ ธรรมเนียมในการสรา้ งโปรเจควา่ ตอ้ งมีครบั
33
4 WorkShop WebApplication ด้วย React : 34
พนื้ ฐาน React
แบบชวิ ๆ
เร่มิ ต้นพ้นื ฐาน
ในการพัฒนา WebApplication ดว้ ย React จะเขยี นแยกเป็นแต่ละ component แลว้ น�ำมาประกอบกัน นึก
ภาพง่ายๆ เชน่ แยกปุ่มบนั ทกึ , ปุ่มลบ, ฟอรม์ กรอกข้อมลู ออกเปน็ คนละ component แลว้ น�ำมาประกอบกัน เป็น 1 หน้า
เพจ
ฟงั ดูอาจจะคดิ วา่ “วุ่นวายจัง” แตพ่ อทำ� จรงิ ๆ แลว้ กลบั เป็นแนวคดิ ท่ีดีมากๆ เพราะทำ� ให้เรา Maintenance โค้ด
ได้งา่ ยขน้ึ , โคด้ ไมป่ นกันม่วั ...ฯลฯ อกี สารพดั ความดีงาม คณุ ต้องได้ลองครับจะรวู้ ่ามนั ดจี ริง
โดยการเขียน component ลักษณะดังกลา่ วทาง React จะเรยี กวา่ เปน็ การเขียนแบบ JSX อธิบายแบบเข้าใจ
ง่ายๆ คอื เหมือนกับเราเขยี นแท็ก HTML ปกตแิ ตต่ า่ งทเี่ ราเขียนลงบนไฟล์ .js (javascript) แลว้ มันยงั สามารถเอา javas-
cript เชน่ ตวั แปร, ฟงั ก์ชนั ไปแสดงผลในแท็ก HTML (เชน่ div) ได้
โดย React จะเขยี นดว้ ย javascript สมยั ใหม่ ES2015 (ES6) ซ่งึ ผมจะเรยี กสั้นๆ วา่ ES6 โดยสงิ่ ท่ี ES6 ตา่ งจาก
javascript สมยั ก่อน (ใหน้ กึ ถงึ jquery แลว้ กันครับเพราะคนนา่ จะคุ้นกับ jquery) ทีเ่ ราจะเห็นกนั บ่อยๆ เช่น
1. เราไม่จำ� เปน็ ตอ้ งใช้ semicolon ( ; ) อีกตอ่ ไป (ใสห่ รอื ไมใ่ ส่กไ็ ด้ แต่ผมชอบใสต่ รงส่วน import นะครับ)
2. function สว่ นใหญ่จะเขยี นในรปู แบบ Arrow Function
3. เปล่ยี นจากการประกาศตวั แปรด้วย var มาเปน็ const และ let
4. ร้จู ัก Module แลว้ กลา่ วคือสามารถ import/export ไฟลไ์ ด้แล้วครับ
และอนื่ ๆ อีกเยอะครบั โดยจะสอดแทรกลงในแตล่ ะบทเรยี นเพอ่ื ให้ค่อยๆ จดจ�ำกนั ได้ และในบทเรยี นนจ้ี ะเปน็ พ้ืน
ฐานของ React ท่นี า่ จะรูไ้ วก้ อ่ นครับ กอ่ นอนื่ ที่ Terminal ให้ cd เข้าไปยังโปรเจค myapp ในบทท่ี 3 แล้วรันโปรเจคไว้รอ
ดว้ ยการพิมพ์ npm start (ใครจำ� ไมไ่ ด้วา่ cd เข้าไปทไ่ี ปท่ไี หน รันโปรเจคยังไง ให้ย้อนกลบั ไปดูในบทท่ี 3 นะครบั )
34
WorkShop WebApplication ดว้ ย React : 35
5. แกไ้ ขโปรเจคด้วยการเปดิ โปรแกรม Visual Studio Code แล้วลบไฟล์ใน folder src ออกให้เหลือแคไ่ ฟลใ์ น
รปู ดา้ นลา่ งนค้ี รับ
6. แก้ไขไฟล์ src/App.js ให้เปน็ โค้ดดา้ นล่างนี้ (และเมอ่ื กลบั ไปดทู ่ี browser ก็จะเห็นแค่ข้อความ Hello
React โดยไม่มีรูปภาพ สีสรรค์อะไรเลย)
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
Hello React
</div>
);
}
}
export default App;
Props และการใช้งาน
Props คอื การสง่ คา่ จาก Component หน่ึงไปใหอ้ ีก Component หนึ่ง ซงึ่ เปน็ การส่งจากบนลงลา่ งเราจะมาลอง
ส่งคา่ props กันดคู รับ โดย
1. สร้างไฟล์ src/Header.js แล้วพมิ พโ์ คด้ ดา้ นล่างน้ี
import React, {Component} from 'react'
class Header extends Component{
render(){
return(
<div>
<h1>This is Header {this.props.title}</h1>
</div>
)
}
}
export default Header 35
WorkShop WebApplication ดว้ ย React : 36
2. แก้ไขไฟล์ src/App.js เป็นโคด้ ดา้ นลา่ งน้ี
import React, { Component } from 'react';
import Header from './Header'
class App extends Component {
render() {
return (
<div>
<Header title="React"/>
Hello React
</div>
);
}
}
export default App;
จากน้ันดผู ลลัพธท์ ี่ Browser นะครับ
จากโคด้ เราจะเหน็ วา่ ในไฟล์ Header.js นัน้ เรารบั props มาจากไฟล์ App.js ท่สี ง่ มาดว้ ยชื่อ title และมคี า่ เปน็
ขอ้ ความวา่ “React” โดยในการส่งค่า props นนั้ สามารถสง่ ได้ทง้ั ข้อความธรรมดา, ตวั แปร, function หรือแบบอน่ื ๆ
สว่ นการรับคา่ จาก props ท่ีส่งมาเราจะใช้ค�ำวา่ this.props แล้วตามด้วยชื่อ props ที่สง่ มานะครับ แต่ถา้ เปน็ การ
สร้าง component แบบ Stateless Functional Components เราสามารถใช้ค�ำวา่ props ไดเ้ ลย ตัวอยา่ งเช่น
import React from 'react'
const Header=(props)=>{
return(
<div>
<h1>This is Header {props.title}</h1>
</div>
)
}
export default Header
36
WorkShop WebApplication ด้วย React : 37
ตัวอย่างการส่งค่า props แบบ ตัวแปร จะเปลีย่ นจากเครอ่ื งหมาย “ ” เปน็ เครอ่ื งหมาย { }
import React, { Component } from 'react';
import Header from './Header'
class App extends Component {
render() {
const titleName = "Yes"
return (
<div>
<Header title={titleName}/>
Hello React
</div>
);
}
}
export default App;
ตัวอย่างการส่งคา่ props แบบ Function การส่งคา่ props จะส่งแบบ บนลงลา่ ง
App.js
Header.js
import React, { Component } from 'react'; import React, {Component} from 'react'
import Header from './Header' class Header extends Component{
class App extends Component { render(){
render() { return(
return ( <div>
<h1>This is Header</h1>
<div> <button onClick={this.props.click}>
<Header click={this.sampleFunction} /> Click me
Hello React </button>
</div> </div>
); )
}
}
sampleFunction = () => { }
console.log('Event Click') export default Header
}
}
export default App;
37
WorkShop WebApplication ด้วย React : 38
จากตัวอยา่ งจะเหน็ วา่ การสง่ ค่า porps นนั้ จะเปน็ การสง่ คา่ จาก บนลงล่าง (ส่งจาก App.js ไป Header.js) แล้วถา้
หากวา่ เราตอ้ งการสง่ คา่ จาก Header.js ไป App.js หละจะท�ำไง
ใน React จะมีสิ่งหนึ่งท่ีเรียกวา่ State เพ่อื ใชเ้ ก็บค่าต่างๆ ท่ีเราตอ้ งการ ซ่งึ เราจะใหค้ วามสามารถของ State น้ี
แหละครับในการที่จะส่งคา่ จาก Header.js ไป App.js
State และการใช้งาน
State ถือเป็นจุดขายอีกจุดหนึง่ ของ React ทด่ี ีมากๆ ครับ โดย State จะมหี น้าที่เก็บข้อมลู ของ Component โดย
นิยมเก็บในรูปแบบของ Object ครับ
เมือ่ State มีการเปลี่ยนแปลง Component นนั้ ๆ จะ render ใหม่ให้อตั โนมตั ิ หลายคนอาจคดิ ว่า “render ใหม่
เลยเหรอ” แบบนก้ี ็ชา้ นะสิ “ไมค่ รับ...React เขาบอกแลว้ วา่ เขาใช้วิธีการ Virtual DOM” อธบิ ายแบบบ้านๆ คอื มนั จะ
render เฉพาะ dom ท่ีเปลย่ี นแปลงเทา่ นน้ั React มันถึง render ไดเ้ ร็วกวา่ ชาวบ้านชาวชอ่ งเขาหนะครับ (อันนี้ผมอวยเอง
นะครับ) ตัวอย่างการใช้งาน State และเรยี นรกู้ ารแก้ปัญหา props ที่เราอยากจะสง่ คา่ จาก ลา่ งข้นึ บน วา่ จะแก้ปัญหายงั ไง
ซึ่งเราจะใช้การสง่ ค่าแบบ function เพ่อื เปลย่ี นแปลง state ของ Component ชน้ั บนครับ มาดูตวั อยง่ กันเลยครบั
1. แก้ไขไฟล์ Header.js เป็นโคด้ ด้านลา่ งนคี้ รับ
import React, {Component} from 'react'
class Header extends Component{
render(){
return (
<div>
<h1>This is Header</h1>
</div>
);
}
}
export default Header
2. สร้างไฟล์ FbButton.js ไว้ท่ี src แลว้ พมิ พโ์ คด้ ด้านล่างน้ี
ไฟล์นี้จะลองสร้าง Component แบบ Stateless Functional Components ข้อดคี ือมนั ได้ Performance
ทด่ี ขี ึน้ (ถา้ ไมม่ กี ารใช้ state ใน Component กส็ ามารถเขยี นแบบน้ีไดค้ รบั )
การเรียกใช้ props จะไม่ได้ใช้ this แลว้ นะครับเพราะเรามีการรบั props เขา้ มาเปน็ parameter แลว้
import React from 'react'
const FbButton = (props) => {
return (
<button onClick={props.handleClick}>{props.caption}</button>
)
}
export default FbButton
38
WorkShop WebApplication ดว้ ย React : 39
3. แก้ไขไฟล์ App.js เป็นโคด้ ด้านล่างนี้ จากน้ันลองดูที่ Browse จะเหน็ การเปลยี่ นแปลงครบั แลว้ ลองคลิกปุม่
Like กบั ปมุ่ DisLike ดนู ะครับ จะเหน็ ว่าค่าใน B ไดม้ กี ารเปล่ียนแปลง และน่แี หละครบั เปน็ วิธีหนึ่งในการท่เี ราตอ้ งการ
เปลย่ี นแปลงคา่ ใน Component ตัวท่อี ยชู่ ้ันบน (หรือเรยี กวา่ เปลย่ี นจากล่างข้นึ บน)
import React, { Component } from 'react';
import Header from './Header'
import FbButton from './FbButton'
class App extends Component { A
state = { like: 0, dislike: 0 }
render() {
return (
<div>
<Header/>
<h4>Like : {this.state.like}</h4> B
<h4>DisLike: {this.state.dislike}</h4>
<FbButton handleClick={this.onLike} caption="Like" /> C
<FbButton handleClick={this.onDisLike} caption="DisLike"/>
</div>
);
}
onLike = () => { D
this.setState({ like: this.state.like + 1 })
}
onDisLike = () => { E
this.setState({ dislike: this.state.dislike + 1 })
}
}
export default App;
อธิบายโคด้
A. ในการใชง้ าน State เราจะต้องมกี ารก�ำหนดค่าเร่มิ ต้นใหก้ ับ State โดยในโคด้ สรา้ ง State แบบ Object มี
สมาชิก 2 ตัวคอื like และ dislike มีคา่ เร่ิมต้นเป็น 0 ทั้งคคู่ รับ
B. เปน็ การเรียกดูขอ้ มลู ใน State โดยระบุวา่ จะดขู ้อมลู ตวั ไหนครับเช่น this.state.like
C. เรียกใช้ Component ตวั ใหม่ทเี่ ราสรา้ งขึน้ มาครบั ช่ือ FbButton โดยส่ง props ไป 2 ตวั คอื handleClick
และ caption จะเห็นวา่ 2 บรรทัดน้มี นั เปน็ Component ตวั เดยี วกันนะครบั แต่เราจะแยกการทำ� งานด้วย props ซึง่ กถ็ อื ว่า
เปน็ การ reuse โคด้ ด้วยนะครบั แบบน้ี
D. function onLike จะท�ำการเปลี่ยนแปลงค่า like ใน state โดยใหม้ กี ารบวกคา่ เดิมเข้าไปอีก 1
E. function onDisLike จะท�ำการเปลี่ยนแปลงคา่ dislike ใน state โดยใหม้ ีการบวกค่าเดิมเข้าไปอกี 1
จะเห็นวา่ ทัง้ D และ E มกี ารเปลยี่ นแปลงค่าใน State ซึง่ ทาง React เขาจะมี function ใหเ้ ราเปลย่ี นแปลง
ค่าใน State โดย function น้นั คือ setState ครับ โดยระบสุ มาชกิ ใน state ท่ตี ้องการเปลี่ยนแปลง
เม่อื state เปลี่ยน Component นน้ั ๆ จะ render ใหอ้ ตั โนมัติครับจึงทำ� ใหต้ วั เลข Like และ DisLike เกิดการ
เปลยี่ นแปลงตามการคลกิ ครบั
39
WorkShop WebApplication ดว้ ย React : 40
ปญั หาการใช้ setState
จากโคด้ ในไฟล์ App.js เราทำ� การเปลย่ี นแปลงค่า like โดยสั่ง this.setState({like: this.state.like + 1}) มองดู
เผนิ มันกท็ �ำงานไดไ้ มม่ ปี ญั หาอะไร แต่...facebook เองเขาไม่แนะนำ� ใหใ้ ช้วธิ ีนี้ครับ เพราะคา่ ทไ่ี ดอ้ าจไมเ่ ปลีย่ นแปลง
เนอื่ งจากคำ� สั่ง setState มนั ท�ำงานแบบ async ... ฟังดูอาจจะนกึ ภาพไม่ออก งน้ั มาลองแกโ้ ค้ดในไฟล์ App.js ดูกนั ครบั
onLike = () => {
this.setState({ like: this.state.like + 1 })
this.setState({ like: this.state.like + 1 })
}
ท่ี function onLike ผมไดเ้ พม่ิ setState อีกบรรทัดหน่ึง แลว้ ลองดทู ี่ browser นะครับ ผมเชือ่ ว่าทกุ คนคดิ วา่ เมื่อ
คลิกป่มุ Like แล้วคา่ ทีไ่ ดจ้ ะต้องเพ่มิ ข้นึ ท่ลี ะ 2 แนน่ อน....ลองดคู รับวา่ ใชอ่ ย่างทคี่ ณุ คิดหรอื เปลา่
...ผลคือมันยังบวกกันทลี ะ 1 อยู่...”สงสัยม้ยั ครบั ว่าท�ำไม” กอ็ ย่างทีผ่ มบอกว่า setState มันทำ� งานแบบ async
ดังนน้ั เราไมอ่ าจคาดหวังคา่ ทแี่ นน่ อนกับมันได้ ดงั นั้นถ้าต้องการเปลย่ี นคา่ ใน state ควรทำ� แบบนีค้ รบั
onLike = () => {
this.setState((prevState, props) => {
return {
like: prevState.like + 1
}
})
this.setState(prevState => {
return {
like: prevState.like + 1
}
})
}
ลองดูที่ browser ใหม่นะครับแลว้ คลิกปุ่ม Like ดูจะเหน็ วา่ มนั บอกกนั ทีละ 2 ละ ค�ำส่ัง setState เราสามารถท�ำ
เปน็ Arrow Function ได้โดยรบั parameter เข้ามา 2 ตวั
ตัวแรกคอื prevState คือ state กอ่ นหน้านี้ (เราตังช่ืออ่นื กไ็ ด้นะครับ)
ตวั ท่ี 2 คอื props ตวั นี้เราจะระบุหรอื ไม่ก็ไดค้ รบั ถ้าไม่ระบุเราสามารถเขยี นแบบโคด้ setState อีกบรรทดั ไดค้ รับ
คือไมต่ อ้ งมี วงเลบ็ (มนั เป็นรูปแบบของ ES6 หนะครบั )
จากนนั้ เราก็สัง่ return state ตัวใหม่ออกไปครบั (state ตวั ใหม่นะครบั ) จากโค้ดเราจะเห็นว่า return like หลาย
คนคิดว่ามันก็คอื state ทปี่ ระกาศต้ังแตบ่ รรทัดบนๆ นิ จรงิ ๆ แล้วคอื เรา return state ตัวใหม่ครบั แตถ่ ้าเราไมร่ ะบเุ ป็นชอื่
like แลว้ บรรทดั ทสี่ ัง่ แสดงผล state ชือ่ like มันจะแสดงการเปล่ยี นแปลงเหรอครบั ...555
“แล้ว setState แบบเดิมหละเลิกใชเ้ ลยเหรอ” เราจะใช้ setState แบบเดิมก็ไดค้ รบั ในกรณีเราไมไ่ ด้ตอ้ งการ
เปลย่ี นแปลงคา่ ทมี่ ีการใช้คา่ state เดิมดว้ ย เช่น this.setState({like : true}) แบบน้ีครบั คือเราต้องการให้มนั เปน็ true
ตรงๆ เลย
40
WorkShop WebApplication ด้วย React : 41
Children Props สิง่ ทมี่ ากกว่า Props
นอกจาก Props ท่ไี ด้รู้จักกันแล้วยงั มี Props อกี ประเภทหนงึ่ ทีเ่ รยี กว่า Children Props ซึ่งหนา้ ทีข่ องมนั คอื ใช้
แสดงสง่ิ ทอี่ ยู่ใน Component ฟังดูแลว้ งง เนาะ ผมว่าเราไปดตู ัวอย่างกันเลยดีกวา่
แก้ไขไฟล์ App.js เป็นโค้ดด้านล่างน้คี รบั
import React, { Component } from 'react';
import Header from './Header'
import FbButton from './FbButton'
class App extends Component {
state = { like: 0, dislike: 0 }
render() {
return (
<div>
<Header>
I am Header
</Header>
<h4>Like : {this.state.like}</h4>
....
โคด้ ดา้ นลา่ งเปน็ โคด้ เดิมครับ
แก้ไขไฟล์ Header.js เป็นโคด้ ด้านล่างน้คี รบั
import React, {Component} from 'react'
class Header extends Component{
render(){
return (
<div>
<h1>{this.props.children}</h1>
</div>
);
}
}
export default Header
จากโคด้ ในไฟล์ App.js การเรยี กใช้ Header จะมีการสง่ props ชอื่ title เพือ่ แสดงขอ้ ความใช่มัย้ ครบั ตอนนี้เรา
เปลี่ยนวิธกี ารส่ง props ใหม่ โดยอย่ภู ายใตแ้ ทก็ ของ component นัน้ ๆ และฝัง่ Header.js เวลารบั props แบบนีจ้ ะใช้
this.props.children
ขอ้ ดีของการส่ง props แบบนคี้ อื
1. ส่วนใหญเ่ ขาจะใชใ้ นการทำ� Layout ของโปรเจค (โปรเจคต่อๆ ไปจะได้เหน็ ว่าใชย้ งั ไงนะครับ)
2. ส่งขอ้ ความท่เี ปน็ Tag HTML ตา่ งๆ เข้าไปได้เชน่
และอื่นๆ อกี ครับอยทู่ ีก่ ารน�ำไปดดั แปลงใช้ <Header>
<ul>
<li>Menu 1</li> 41
<li>Menu 2</li>
</ul>
</Header>
WorkShop WebApplication ด้วย React : 42
React Lifecycle
วงจรชีวิตใน React จะถกู แบง่ ออกเปน็ 3 Part ตามรปู ดา้ นลา่ งครับ
ข้อแนะนำ� คือ componentDidMount() คอื method ทจ่ี ะได้ใช้งานบอ่ ยทส่ี ุดเพราะ method นจี้ ะท�ำงานหลัง
render เสร็จแลว้ จงึ นยิ มใช้ componentDidMount() ในการทำ� งานตา่ งๆ เช่น การ fetchdata เป็นตน้
componentWillMount() และ componentDidMount () มีโคด้ ตอ่ ดา้ นล่าง
42
1. แก้ไขไฟล์ App.js เป็นโคด้ ดา้ นลา่ งน้คี รับ
import React, { Component } from 'react';
import Header from './Header'
import FbButton from './FbButton'
class App extends Component {
state = { like: 0 }
componentWillMount() {
console.log('App: willMount')
}
componentDidMount() {
console.log('App: didMount')
}
render() {
console.log('App: render')
return (
<div>
<Header>I am Header</Header>
<h1>Like {this.state.like}</h1>
<FbButton handleClick={this.onLike} caption="คลิกบวก Like"/>
</div>
);
}
onLike = () => { WorkShop WebApplication ดว้ ย React : 43
this.setState(prevState => { โคด้ ต่อจากด้านบน
return {
like: prevState.like + 1
}
})
}
}
export default App;
1. แก้ไขไฟล์ Header.js เป็นโคด้ ดา้ นลา่ งนีค้ รับ
import React, { Component } from 'react'
class Header extends Component {
componentWillMount() {
console.log('Header: willMount')
}
componentDidMount() {
console.log('Header: didMount')
}
render() {
console.log('Header: render')
return (
<div>
<h1>{this.props.children}</h1>
</div>
);
}
}
export default Header
จากนั้นที่ browser ใหด้ ูที่ Console โดยวิธเี ปดิ Console ของ Google Chrome คือ
1. คลกิ เมาสข์ วาแลว้ เลือก Inspect 2. เลอื กแท็บ console
43
WorkShop WebApplication ด้วย React : 44
จากหนา้ ตา่ ง Console จะรเู้ ลยวา่ React จะเรมิ่ ท�ำงานท่ี method componentWillMount() แล้วพอมันเจอ
component ไหน (ในโคด้ คอื Header) มนั ก็จะเข้าไปทำ� งานใน component นัน้ กอ่ นครับ
componentWillMount() นั้นแท้จรงิ เราเอาไวก้ �ำหนดคา่ เร่มิ ตน้ ของระบบ แตใ่ นปัจจุบนั method น้แี ทบไมต่ อ้ ง
ใช้ เพราะเราสามารถกำ� หนดคา่ เริ่มตน้ ไดเ้ ลยเหมือนในโคด้ ทีก่ �ำหนดค่าเรม่ิ ตน้ ของ State
componentDidMount() จะทำ� งานเมอื่ มกี าร render DOM จนเสรจ็ สน้ิ แลว้ เราจึงนยิ มใช้ method น้ีการ
fetchdata หรอื การท�ำอะไรกต็ ามทเ่ี ก่ียวกบั DOM เพราะ DOM
จากนน้ั ลองคลิกปมุ่ “คลกิ บวก Like” ดนู ะครับ เม่ือตัวเลขเปลย่ี น (state เปลี่ยน) component App จะ render
ใหม่สง่ ผลให้ Header ถูก render ตามไปดว้ ย ทัง้ ทคี่ วามจริงเราไมต่ อ้ งการให้ render Header ใหม่เลย ซ่งึ มนั เปลอื ง perfor-
mance เฉยๆ โดยใน React เราสามารถความคมุ การ render ได้ด้วย method ที่ชื่อว่า shouldComponentUpdate()
ค�ำสั่ง console.log สามารถแสดงตวั แปรร่วมกับขอ้ ความได้ เชน่ console.log(‘render’, like) อยาก
แสดงหลายตวั กบั ระบเุ ครือ่ งหมาย , ไปเรอ่ื ยๆ
shouldComponentUpdate(nextProps, nextState)
method นใ้ี ช้ส�ำหรับควบคุมการ rerender หลกั ๆ กเ็ พอ่ื performance ทตี่ ้องการโดยจะรับ parameter 2 ตัว
คอื nextProps, nextState โดย nextProps จะใชเ้ ปรียบเทียบค่า props ทสี่ ง่ เข้ามากบั props ปจั จบุ ันทมี่ อี ยู่ สว่ น next-
State ก็ทำ� งานเหมอื นกนั ครบั จะระบุหรือไม่ก็ได้นะครับ แตส่ ง่ิ ทตี่ ้องจ�ำคอื ห้ามสง่ั setState เพราะจะทำ� ใหเ้ กดิ การ infinity
loop เนือ่ งจากมนั มีการตรวจสอบ nextState
เรามาลองกันดดู กี วา่ ครบั โดยแก้ไขไฟล์ Header.js เปน็ โค้ดดา้ นล่างนี้
import React, { Component } from 'react'
class Header extends Component {
componentWillMount() {
console.log('Header: willMount')
}
componentDidMount() {
console.log('Header: didMount')
}
shouldComponentUpdate(nextProps, nextState) {
return false
}
render() {
console.log('Header: render')
return (
<div>
<h1>{this.props.children}</h1>
</div>
);
}
}
export default Header
44
WorkShop WebApplication ดว้ ย React : 45
shouldComponentUpdate คา่ default จะ return true พอเราเปลย่ี นเปน็ false ตวั component นจ้ี ะไมถ่ กู
render ซำ้� อกี ครบั
ท่ี browser ลองคลิกปุม่ “คลกิ บวก Like” ก็จะเหน็ วา่ Header ไมถ่ กู render ออกมาอีกครงั้ แล้วครับ สังเกตุตรง
ข้อความทแ่ี ท็บ Console นะครบั เปรยี บเทียบกบั ครง้ั แรกกอ่ นมีการใช้ shouldComponentUpdate
componentWillReceiveProps(nextProps)
method น้ีจะท�ำงานเมอื่ component ได้รับ props เข้ามาใหมก่ ่อนที่ component นน้ั จะท�ำการ re-render (ครั้ง
แรกท่ี render เสร็จจะยงั ไม่ทำ� งาน) เรามาดูตวั อยา่ งกนั เลยครบั
1. แก้ไขไฟล์ App.js เป็นโคด้ ดา้ นล่างน้ี
import React, { Component } from 'react';
import Header from './Header'
import FbButton from './FbButton'
class App extends Component {
state = { like: 0 }
componentDidMount() {
console.log('App: didMount')
}
render() {
console.log('App: render')
return (
<div>
<Header title="I am Header" like={this.state.like}/>
<h1>Like {this.state.like}</h1>
<FbButton handleClick={this.onLike} caption="คลกิ บวก Like"/>
</div>
);
}
onLike = () => {
this.setState(prevState => {
return {
like: prevState.like + 1
}
})
}
}
export default App;
จากโค้ดผมได้เปล่ยี นการสง่ ค่า props ให้ Header ใหมน่ ะครบั จะได้ดไู ม่ งง จนเกนิ ไป และสง่ props ไป 2 ตัวตาม
โค้ดเลยครบั
45
WorkShop WebApplication ด้วย React : 46
2. แก้ไขไฟล์ Header.js เป็นโคด้ ด้านล่างนี้
import React, { Component } from 'react'
class Header extends Component {
componentDidMount() {
console.log('Header: didMount')
}
componentWillReceiveProps(nextProps) {
console.log('nextProps', nextProps.like, 'props', this.props.like)
}
render() {
console.log('Header: render')
return (
<div>
<h1>{this.props.title} Like {this.props.like}</h1>
</div>
);
}
}
export default Header
จากนน้ั ดทู ่ี browser สงั เกตุการเปลยี่ นแปลงที่แทบ็ Console นะครับ หลงั จากทคี่ ลิกป่มุ “คลกิ บวก Like”
1
2
3
จากตัวอยา่ งผมไดค้ ลกิ ปมุ่ 2 ครัง้ สงั เกตตุ รง Console ครง้ั แรกเป็นการ render ปกติ พอคลกิ ปุ่ม ครงั้ ที่ 1 และ 2 ก็
จะแสดงคา่ ของ nextProps กบั props ปจั จุบนั ซึง่ จะเห็นวา่ เราสามารถใชค้ วามสามารถของ componentWillReceiveProps
ในการเปรยี บเทียบคา่ props เพอ่ื ทำ� งานบางอยา่ ง (ส่วนใหญ่จะใชเ้ รียก function เพอ่ื ท�ำงานบางอยา่ ง)
componentWillUpdate(nextProps, nextState)
method นท้ี �ำงานคลา้ ยๆ componentWillReceiveProps คือใช้เขียนเงอื่ นไขเพอ่ื ให้ท�ำอะไรบางอยา่ งก่อน
re-render แตส่ ่ิงท่ีต้องจำ� คือ ห้ามส่งั setState เพราะจะทำ� ใหเ้ กิดการ infinity loop กลา่ วคือมนั method นี้มกี ารรับ
nextState ดงั นัน้ ถา้ เราสัง่ setState มนั ก็จะมาทำ� งานท่ี method นอี้ ีกวนลปู เปน็ งูกนิ หาแบบไมห่ ยดุ
46
WorkShop WebApplication ดว้ ย React : 47
componentDidUpdate(prevProps, prevState)
method นี้จะทำ� งานหลงั จากเกิดการเปล่ยี นแปลงของ component แตจ่ ะไม่ถกู เรยี กในการ render ครัง้ แรก
การท�ำงานจะเหมือนกัน componentDidMount กลา่ วคอื ใช้ตรวจสอบการเปล่ียนแปลงหลังจาก render เสร็จแล้ว (DOM มี
การอัพเดทแลว้ )
componentWillUnmount()
method นีถ้ ูกเรียกใช้กอ่ นท่ี component นัน้ ไดท้ ำ� การ unmount และ destroy สว่ นใหญ่ใช้ reset ค่าตา่ งๆ
แต่ส่ิงท่คี วรจ�ำคอื ห้าม setState ที่ method นี้
สุดทา้ ยอยากฝากว่าเรอ่ื งของ Lifecycle น้ันเราไมจ่ ำ� เป็นตอ้ งจำ� ทกุ method นะครับเพราะบางอนั กแ็ ทบจะไม่ได้ใช้
เลย และที่ขาดไมไ่ ดล้ อง console.log ออกมาดูว่าในเหตุการนัน้ ๆ มันทำ� งานยังไง
เข้าถึง DOM element ด้วย Ref
ปกติใน jQuery เวลาท่ีเราต้องการ set focus ให้กับ textbox เราจะสั่ง $(‘#textid’).focus() ส�ำหรบั React นนั้
เราต้องใช้ Ref โดยมวี ิธีใชง้ านแบบนีค้ รับ
แก้ไขไฟล์ App.js เป็นโคด้ ดา้ นล่างน้ี
import React, { Component } from 'react';
class App extends Component {
componentDidMount() {
this.refs.txt2.focus()
}
render() {
return (
<div>
<h1>App Page</h1>
<input type="text" ref="txt1" />
<input type="text" ref="txt2"/>
</div>
);
}
}
export default App;
เราตอ้ งการเขา้ ถงึ DOM ตัวไหนเราก็ระบุ props วา่ ref แล้วก�ำหนดช่ือให้มัน ซ่ึงก็เหมือนใน javascript ทั่วๆ ไปท่ี
มีการกำ� หนด id
จากนั้นเราจะเขา้ ถงึ ref ได้ท่ี componentDidMount() โดยเรียก this.refs.txt2 สงั เกตวุ ่า refs น้ีเตมิ s นะครบั
แล้วตอ่ ดว้ ยชอื่ ของ reft จากน้นั กร็ ะบวุ า่ จะท�ำอะไร โดยสว่ นใหญก่ ็เป็นการ set focus ด้วยค�ำสง่ั focus() ครับ
การกำ� หนดคา่ ref วิธีข้างบนทาง React เขาไม่แนะน�ำใหใ้ ช้ แต่เขาใหใ้ ช้อกี วิธคี รบั เป็นลักษณะของการกำ� หนด
แบบ function เหมือนเดมิ ครบ แกโ้ คด้ App.js เปน็ โคด้ ด้านล่างน้ีครบั
47
WorkShop WebApplication ดว้ ย React : 48
import React, { Component } from 'react';
class App extends Component {
componentDidMount() {
this.txt2.focus()
}
render() {
return (
<div>
<h1>App Page</h1>
<input type="text" ref={(input) => { this.txt1 = input; }} />
<input type="text" ref={(input) => { this.txt2 = input; }} />
</div>
);
}
}
export default App;
รปู แบบการประกาศ ref ก็คอื ref={(input) => { this.txt1 = input; }} โดยที่ input คอื ตัวแปรทเี่ ราต้ังข้ึน
ครบั เป็นอะไรก็ได้ไม่ต้องเปน็ ค�ำว่า input สว่ นการเข้าถึง ref ใน componentDidMount() ก็เปล่ยี นจาก this.refs เปน็ อา้ ง
ถงึ this.txt2 คือชือ่ ของ ref ไดเ้ ลยครบั
FetchData (โหลดข้อมูล)
ใน ES6 มี feature หนง่ึ ท่ีใช้ในการโหลดขอ้ มูลจาก API ชือ่ วา่ FetchData ใครเคยใช้ jQuery มนั กจ็ ะคลา้ ยๆ กนั
หนะครบั ซึง่ เวลาเราน�ำมาใชก้ บั React กจ็ ะง่ายๆ ไมม่ อี ะไรครบั มาดูตวั อย่างกันเลยดกี ว่า โดยแกไ้ ขไฟล์ App.js
import React, { Component } from 'react';
class App extends Component {
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
.then(result => result.json())
.then(result => console.log(result))
.catch(err => {
console.error(err)
})
}
render() {
return (
<div>
<h1>App Page</h1>
<h4>Sample FetchData</h4>
</div>
);
}
}
export default App;
48
WorkShop WebApplication ดว้ ย React : 49
เสรจ็ แล้วดูท่ี browser แลว้ ดูที่ Console นะครับจะเห็นว่ามกี าร fetch ขอ้ มูลมาใหเ้ ราพรอ้ มใช้งานละ
อธบิ ายโคด้
การ fetchdata เราจะทำ� กันที่ componentDidMount() นะครบั จากตวั อยา่ งผม fetchdata จากเว็บที่ให้
บรกิ าร API เพือ่ ส�ำหรบั ทดสอบขอ้ มูล
ในการ fetchdata นน้ั จะคนื คา่ เปน็ Promise เราจึงตอ้ งใช้ then เพราะจะเป็นการบอกวา่ ถ้าขอ้ มูลดงึ มาเสรจ็
แลว้ จะเข้าสู่ then น่นั เองครับ
แต่ then ตัวแรกเราจะได้เปน็ object มาหลากหลายตวั เราจึงตอ้ งสงั่ response.json() จึงจะได้ then ตวั ท่ี 2
มาใช้านครบั สุดทา้ ยเราตอ้ งทำ� การ catch เผื่อไวใ้ นกรณเี กิดข้อผิดพลาดครบั แต่ขอ้ ผิดพลาดนไี้ ม่เกีย่ วกับการทเี่ รากรอก url
ผดิ หรอื เราเชอื่ มต่อ Server ไมไ่ ด้นะครบั (ถา้ ไม่อยากใช้ then หลายตวั จะมี module หนึ่งให้โหลดมาใช้ช่อื ว่า axios ใคร
สนใจดูเพม่ิ เตมิ ไดท้ ี่ https://github.com/axios/axios)
คราวน้ีเรามาลองเอาข้อมูลท่ี fetch มาใชง้ านดูนะครับ เหมอื นเดิมครบั แก้ไขไฟล์ App.js
import React, { Component } from 'react';
class App extends Component { A
state = { data: null }
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
.then(result => result.json())
.then(result => this.setState(this.setState({ data: result }))) B
.catch(err => {
console.error(err) 49
})
}
render() { C
const { data } = this.state D
return (
<div> E
<h1>App Page</h1>
{data && data.map(d => {
return (
<div key={d.id}>
<div><b>{d.title}</b></div>
<div>{d.body}</div>
<hr/>
</div>
)
})}
</div>
WorkShop WebApplication ดว้ ย React : 50
)
}
}
export default App;
เสรจ็ แลว้ ก็ลองดทู ่ี browser นะครบั กจ็ ะเห็นว่ามีขอ้ มูลแสดงข้นึ มาละ
อธบิ ายโค้ด
A. สรา้ ง state และกำ� หนดค่าเร่ิมต้นให้ data มีค่าเท่ากับ null เพอ่ื ทเ่ี ราจะใช้เก็บคา่ ทไ่ี ดจ้ ากการ fetchdata
B. จัดเก็บค่าท่ีได้ลง state ครบั สงั เกตุวา่ ผมสงั่ setState แบบธรรมดาเน่อื งจากเรารูแ้ น่นอนแล้ววา่ เราจะ set
คา่ นล้ี งไปใน state มนั ไมเ่ หมือนการบวกเลขในตัวอย่างก่อนๆ นะครับ
C. โค้ดบรรทดั นอ้ี าจจะแปลกตาหนอ่ ยนะครับ ใน ES6 เขาเรยี กวา่ เป็นการ destructuring ออกจาก object โดย
เรากำ� หนดชอ่ื ตัวแปรเป็นชือ่ เดียวกับ ตัวแปรท่อี ยู่ใน object ครบั ข้อดีของการ destructuring คือถา้ เราไม่ท�ำเหมือนโคด้
ขา้ งบน ทกุ คร้ังทเี่ ราจะเรยี กใช้ data ใน state เราจะต้องเขียนเปน็ this.state.data แบบนีต้ ลอดซึ่งถ้ามหี ลายบรรทดั คงไม่ดี
แน่ๆ
D. เป็นการ loop Array โดยใชค้ ำ� สั่ง map โดยเราจะต้องเช็คก่อนวา่ data มคี ่าหรือไม่ โดยใน map เราก็เขยี น
เปน็ Arrow Function เหมอื นในโคด้ ตรงนีท้ �ำไปบอ่ ยๆ จะชินกบั Arrow Function เองครับ จดุ ทน่ี ส่ี ังเกตุคอื
<div key={d.id}> ในการ map น้ัน React บอกว่าจะมกี ารก�ำหนด key ไว้ด้วยใน Element ที่มีการ loop
จากโค้ดเราเอา div ครอบไวจ้ งึ ต้องก�ำหนด key (React มนั ใช้ key ในการเช็คครบั ว่า dom มีการเปลี่ยนแปลงหรอื ไม่
การแสดงข้อมูลจากการ map เชน่ d.title, d.body สว่ น object ชอ่ื title กบั body ก็ไดม้ าจากการ fetch
data น่ันเองครับ ไม่เช่ือก็ลองดตู วั อยา่ งกอ่ นหนา้ น้ีทมี่ กี าร console.log คา่ result ดูสคิ รับจะรู้วา่ ได้ object อะไรมาบ้าง
เราสามารถเปลย่ี นชอื่ ตวั แปรท่ี destructuring ได้โดยใชเ้ คร่อื งหมาย : เชน่
const {data : ac} = this.state
50
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
workshopreact
Discover the best professional documents and content resources in AnyFlip Document Base.
Search