รายงานสรุปเนื้อหาและการนำไปใช้ประโยชน์จากการเข้าอบรม สัมมนา หรือประชุมวิชาการ
สรุปเนื้อหาและการนำไปใช้ประโยชน์ของการเจ้าร่วมฝึกอบรมดังต่อไปนี้
เข้าร่วมฝึกอบรมผ่านระบบอินเตอร์เน็ต บริษัท โค้ดโมบายส์ จำกัด (CodeMobiles Co.,Ltd.) : ในหลักสูตรหัวข้อเรื่อง React.JS + MaterialDesign Programming ผ่านระบบอินเตอร์เน็ต www.codemobiles.com เข้าฝึกอบรม ตั้งแต่วันที่ 17 พฤศจิกายน 2564 ถึง 17 มกราคม 2565 โดยมีเนื้อหาความรู้และหัวข้อการฝึกอบรมหลักดังนี้
ได้นำความรู้ในการฝึกอบรมมาปรับปรุงเนื้อหา มคอ.3 รายวิชา ทส215 การโปรแกรมฝั่งไคลเอนต์ ภาคเรียนที่ 2/2564
- ReactJS 2020 ชุดที่ #1 - Fundamental
- ReactJS 2020 ชุดที่ #2 React Hook
- ReactJS 2020 - Redux-Hooks New!
- CM Stock Workshop Material + Hooks 2022
React คือ เป็น จาวาสคริปต์ไรบารี่ สำหรับการสร้าง User Interface แบบรูปถัดไป เราต้องทำการสร้าง Header , footer , content ถ้าเราสร้างโปรแกรมด้วย react มันจะสามารถทำแต่ละส่วนให้เป็นระบบระเบียบมากขึ้นมากกว่าการเขียนพวกโปรแกรม php ธรรมดาโดยการเขียนโปรแกรม React จะมีสำหรับการเขียน for Web คือ React JS และอีกตัวคือ for mobile คือ React Native React เป็นเพียง User Interface ที่คล้าย Angular แต่ ไม่ได้เป็น Framework อย่างเช่น Angular ซึ่ง React เป็นการใช้สำหรับการพัฒนา single page web application “SPA” React พัฒนาโดย Facebook ทั้งนี้เราสามารถเรียนรู้ React JS แล้วนำไปต่อยอด React Native ได้ มากว่า 70%
การทำงาน React มองแต่ละส่วนเป็นก้อนทำงาน ก้อนใหญ่ๆ เรียกว่าเป็น component ยกตัวอย่างเช่น เรามี Report 1 หน้า เกี่ยวกับการแสดง กราฟ เราสามารถนำ component กราฟ ไปวางในตำแหน่งที่ต้องการได้ คือการ Reuse react ไม่ว่าจะเป็นเทคโนโลยี React , Angular หรือ Vue ใช้คอนเซปการทำงานนี้เหมือนกันคือเรื่องการ Reusable code ในรูปของ component
React.JS เวอร์ชันปัจจุบันคือ V18.0.0 (เมษายน 2565)
การเปิดตัวครั้งแรกสู่สาธารณะ (V0.3.0) คือในเดือนกรกฎาคม 2013
React.JS ถูกใช้ครั้งแรกในปี 2011 สำหรับฟีเจอร์ฟีดข่าวของ Facebook
วิศวกรซอฟต์แวร์ของ Facebook, Jordan Walke เป็นผู้พัฒนา
เวอร์ชันปัจจุบันของ create-react-app คือ v5.0.1 (เมษายน 2565)
create-react-app ประกอบด้วยเครื่องมือที่สร้างขึ้นเช่น webpack, Babel และ ESLint
เอกสารเกี่ยวกับคำสั่ง React JS ได้ทาง https://create-react-app.dev/docs/getting-started/
- คำสั่งการสร้างโปรเจค React JS ด้วย Command line : npx create-react-app my-app
- การเข้าถึงที่อยู่โฟล์เดอร์ของโปรเจค React JS ที่ต้องการสร้างหรือจัดเก็บไว้ : cd my-app
- คำสั่งเริ่มทำงานของ React : npm start
บทเรียนที่ได้เรียนเนื้อหาพื้นฐานที่สำคัญประกอบไปด้วยเรื่อง
- Introduction React JS
- Installation node.js and React JS
- Vscode setting
- App js
- Emmet and format
- Project structure
- Variables
- Component render condition
- Class vs functional component
- Style and css
- Image
- Variable state props
- Props Introduction
- Props types and default
- Destructuring props and variables
- Functional props custom event Listeners
- Prevent Default
React Hook
ได้มีการเพิ่ม Hooks ใน React ในเวอร์ชัน 16.8 Hooks อนุญาตให้ส่วนประกอบฟังก์ชั่นสามารถเข้าถึงสถานะ (State) และคุณสมบัติ (Component) React อื่น ๆ ด้วยเหตุนี้ โดยทั่วไปส่วนประกอบคลาส (Class) จึงไม่จำเป็นอีกต่อไป ซึ่ง Hooks ช่วยให้เราสามารถ "เชื่อมต่อ" กับคุณสมบัติ React เช่น วิธีสถานะและวงจรชีวิต
การใช้งานจะต้อง import Hooks จาก Library react
หลังจากประกาศใช้งานไลบารี่เรียบร้อยแล้วก็สามารถใช้งานได้ ยกตัวอย่างเช่น useState Hook ใช้งานเพื่อติดตามสถานะแอปพลิเคชัน สถานะโดยทั่วไปหมายถึงข้อมูลแอปพลิเคชันหรือคุณสมบัติที่ต้องติดตาม เป็นต้น ยกตัวอย่างฟังก์ชันที่น่าสนใจของ React Hook
- useState
- useState Object
- useState Array
- useEffect Update and Init
- useEffect Destroy Listener
- setInterval in useEffect
- useEffect feedJSON with Axios
- useContext Sharing Global Value
- useMemo Caching Data or Optimization
- useCallback Caching Callback Function or Optimization
เป็นต้น
โดยการเข้าร่วมฝึกอบรมผ่านระบบอินเตอร์เน็ต บริษัท โค้ดโมบายส์ จำกัด (CodeMobiles Co.,Ltd. : www.codemobile.com) ในหลักสูตรหัวข้อเรื่อง React.JS + MaterialDesign Programming นั้น ข้าพเจ้าได้รับความรู้ และได้นำองค์ความรู้ที่ได้ประยุกต์ใช้กับการเรียนการสอนในรายวิชา ได้นำความรู้ในการฝึกอบรมมาปรับปรุงเนื้อหา มคอ.3 รายวิชา ทส215 การโปรแกรมฝั่งไคลเอนต์ และมีการจัดทำเอกสารประกอบการสอนในรูปแบบของสไลด์ การนำไปใช้สอนในรูปแบบบรรยายและการจัดทำ Workshop และ assignment ภาคเรียนที่ 2/2564