เข้าร่วมการฝึกอบรมผ่านระบบอินเตอร์เน็ตในหลักสูตรหัวข้อ เรื่อง "React.JS + MaterialDesign Programming"
วันที่เขียน 26/4/2565 16:02:48     แก้ไขล่าสุดเมื่อ 19/3/2567 13:54:51
เปิดอ่าน: 1416 ครั้ง

รายงานสรุปเนื้อหาและการนำไปใช้ประโยชน์ จากการเข้าร่วมฝึกอบรมผ่านระบบอินเตอร์เน็ต บริษัท โค้ดโมบายส์ จำกัด (CodeMobiles Co.,Ltd.) : ในหลักสูตรหัวข้อเรื่อง React.JS + MaterialDesign Programming ผ่านระบบอินเตอร์เน็ต www.codemobiles.com เข้าฝึกอบรม ตั้งแต่วันที่ 17 พฤศจิกายน 2564 ถึง 17 มกราคม 2565

รายงานสรุปเนื้อหาและการนำไปใช้ประโยชน์จากการเข้าอบรม สัมมนา หรือประชุมวิชาการ

สรุปเนื้อหาและการนำไปใช้ประโยชน์ของการเจ้าร่วมฝึกอบรมดังต่อไปนี้

เข้าร่วมฝึกอบรมผ่านระบบอินเตอร์เน็ต บริษัท โค้ดโมบายส์ จำกัด (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

คำสำคัญ :
กลุ่มบทความ :
หมวดหมู่ :
แชร์ :
https://erp.mju.ac.th/acticleDetail.aspx?qid=1268
ความคิดเห็นทั้งหมด (0)
ไม่มีข้อมูลตามเงื่อนไขที่ท่านกำหนด
รายการบทความการแลกเปลี่ยนเรียนรู้หมวดหมู่ : วิทยาศาสตร์ เทคโนโลยี
เผยแพร่ผลงานวิจัย » Food Innovation Asia Conference 2023 “The Future Food for Sustainability, Health and We-bong
นำเสนอผลงานแบบโปสเตอร์ในหัวข้อ The Nutrition Value and Antioxidation Activity of Thai Chia Seed ทำให้ได้แลกเปลี่ยนความรู้เกี่ยวกับงานวิจัย เพื่อนำไปต่อยอดในอนาคต นอกจากนี้ยังได้รับฟังการบรรยายจาก...
Food Innovation Asia Conference 2023     บทความการแลกเปลี่ยนเรียนรู้ทั่วไป   วิทยาศาสตร์ เทคโนโลยี
ผู้เขียน อนรรฆอร ศรีไสยเพชร  วันที่เขียน 18/9/2566 10:51:39  แก้ไขล่าสุดเมื่อ 19/3/2567 2:49:09   เปิดอ่าน 311  ครั้ง | แสดงความคิดเห็น 0  ครั้ง