ภาพปก นำมาจาก https://reactjs.org และ https://redux-toolkit.js.org และ https://www.typescriptlang.org และ https://www.primefaces.orgสวัสดีครับ บทความนี้จะพูดถึงการ ติดตั้ง reactJS + hooks + redux toolkit + prime react ด้วย typescript กันครับ โดยสิ่งที่ต้องเตรียมเป็นหลักก็คือ nodejs และ npm / npx นะครับ โดยสามารถติดตั้งได้จาก https://nodejs.org หรือ ติดตั้ง nvm นะครับ (แนะนำให้ install ตัว tls version ใหม่ๆนะครับ ซึ่งในบทความนี้ผมใช้ nodejs version 14.17.3)หลังจากทำการติดตั้ง nodejs เรียบร้อยแล้ว ให้ทำการ รัน command โดยให้เปลี่ยน เป็นชื่อ project ของท่านนะครับ ซึ่ง hooks จะรวมเข้ากับ reactjs version 16.8.0 เป็นต้นไปครับnpx create-react-app --template redux-typescriptหลังจากการติดตั้งก็ให้ทำการรัน commandnpm startหากไม่พบข้อผิดพลาดจะแสดงผลดังภาพด้านล่างครับภาพที่ 1 โดย Tonicorn/ภาพต้นฉบับ ผลลัพธ์หลังจากรัน npm startจากนั้นก็สามารถของเข้า http://localhost:3000 ผ่าน browser ได้เลยครับ ก็จะได้ผลดังภาพ (หากต้องการหยุด server ให้ทำการกด ctrl + c)ภาพที่ 2 โดย Tonicorn/ภาพต้นฉบับ การแสดงผลหน้าเว็บ** กรณีที่ทำการกด ctrl + c เพื่อหยุด server แล้วทำการรันใหม่ หากเจอ error port 3000 ถูกใช้งานสามารถใช้คำสั่ง npx kill-port 3000 ได้นะครับ (ปกติ windows จะไม่เจอเคสนี้ครับ แต่ผมเจอใน mac)หลังจากที่ติดตั้งเรียบร้อยแล้ว สิ่งที่ขาดไม่ได้ก็คือ css ที่จะใช้ร่วมกับ reactjs โดย css ที่ผมจะใช้คือ prime react นะครับ สามารถเข้าไปที่ link https://primefaces.org/primereact/เริ่มติดตั้ง prime react โดยการรัน commandnpm install primereact primeicons --save จากนั้นให้ทำการ import css เข้ามาใน project reactjs ของเรา โดยให้ทำการ import primeicons.css / primereact.min.css และ themes ใน App.tsx ดังภาพภาพที่ 3 โดย Tonicorn/ภาพต้นฉบับ ตัวอย่างการ code การ import prime reactจากนั้นเราจะทำการทดสอบการใช้งาน prime react css กันตามภาพครับภาพที่ 4 โดย Tonicorn/ภาพต้นฉบับ ตัวอย่างการใช้งาน prime reactให้เราทำการสร้าง grid system ก่อนนะครับ โดยให้ทำการ import 'primeflex/primeflex.css'; เพิ่มใน App.tsx (สามารถดูการใช้งานได้ที่ https://primefaces.org/primereact/showcase/#/flexgrid)แล้วให้ทำการลบโค้ด template และทำการสร้าง grid โดยการเพิ่ม Codeภาพที่ 5 โดย Tonicorn/ภาพต้นฉบับ ตัวอย่างไฟล์ App.tsx ตอนนี้เราจะได้ grid มาเบื้องต้นแล้วให้เราทำการสร้าง card เพิ่มเข้ามาใน grid กันครับ โดยผมก็เอา code ตัวอย่างมาจาก prime react (เอารูปแบบ Simple Card มานะครับ) (สามารถดูการใช้งานได้ที่ https://primefaces.org/primereact/showcase/#/card) โดยผมได้ทำการแยกออกมาเป็นไฟล์ component นะครับ จะได้ code ดังภาพภาพที่ 6 โดย Tonicorn/ภาพต้นฉบับ ตัวอย่างไฟล์ card.tsx จากนั้นก็เรียกใช้งานใน App.tsx ครับ โดยการเปลี่ยนตัวเลข 1 2 3 เป็น อย่าลืม import CardDemo เข้ามาด้วยนะครับ ดังภาพภาพที่ 7 โดย Tonicorn/ภาพต้นฉบับ ตัวอย่างการใช้งาน จากนั้นผมก็จะทำการเพิ่ม Accordion Component เข้ามานะครับ เช่นเดิมครับ เอาตัวอย่างจาก prime react (สามารถดูการใช้งานได้ที่ https://primefaces.org/primereact/showcase/#/accordion) ซึ่งผมก็แยก component ออกมาเช่นกัน โดยหากใช้ typescript อาจจะเกิด error ขณะ complie ได้นะครับ เนื่องจาก typescript บังคับให้กำหนดชนิดตัวแปร หรือ typesafe นะครับ ซึ่งผมก็ได้ทำการแก้ไข code ไปบางส่วนตาม highlight ดังภาพครับ ภาพที่ 8-9 โดย Tonicorn/ภาพต้นฉบับ Hightlight การแก้ไข้ code เพื่อให้รัน Accordion Component ด้วย Typescriptจากนั้นก็ทำการ สร้าง grid และ import AccordionDemo มาใช้งานครับ โดย code App.tsx จะได้ภาพที่ 10 โดย Tonicorn/ภาพต้นฉบับ Complete Code App.tsx เมื่อทำการรัน npm start ก็จะได้ผลลัพธ์ ดังภาพครับภาพที่ 9 โดย Tonicorn/ภาพต้นฉบับ ผลลัพธ์หน้าเว็บ เท่านี้ก็จะเป็นการเริ่มต้น web project โดนใช้ reactjs + hooks + redux toolkit + prime react ด้วย typescript แล้วครับ หวังว่าจะมีประโยชน์ไม่มากก็น้อยนะครับ ขอบคุณครับอัปเดตสาระ IT ดี ๆ มีประโยชน์แบบนี้อีกมากมาย โหลดเลยที่ App TrueID ฟรี !