ตามหนังสือที่ อว.69.5.8/019 ลงวันที่ 10 กุมภาพันธ์ 2564 ได้อนุญาตให้ข้าพเจ้าเข้าร่วมการฝึกอบรมผ่านระบบอินเตอร์เน็ต ในหลักสูตรหัวข้อ เรื่อง “React - The Complete Guide” เมื่อวันที่ 15 กุมภาพันธ์ 2564 ถึงวันที่ 31 มีนาคม 2564 โดยฝึกอบรมในรูปแบบออนไลน์ผ่านทาง www.udemy.com โดยใช้งบประมาณส่วนตัว

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

1. สรุปเนื้อหาที่ได้รับจากการเข้าประชุม/อบรม ฯลฯ

ได้เข้าร่วมอบรมการสร้างเว็บไซต์ด้วยเทคโนโลยี Reactive Web Apps ผ่านระบบอินเตอร์เน็ต www.udemy.com  โดยมีเนื้อหาความรู้และหัวข้อการฝึกอบรมที่สำคัญ

• What is React ? รีแอ๊ก คือ จาวาสคริปต์ไรบาลี่ (JavaScript Library) สำหรับการสร้างหน้าจอส่วนติดต่อผู้ใช้ หรือหน้าจอแอพลิเคชันซึ่ง React ถูกสร้างขึ้นโดย Facebook และปัจจุบันคือ Facebook ทำหน้าที่คอย Maintenance React อยู่ปัจจุบัน React ถูกนำไปใช้งานมากมายในบริษัทยักใหญ่ขอโลก  ไม่ว่าจะเป็น Facebook , Twitter , Instagram ,  หรือแม่กระทั่ง Netflix เป็นต้น
• Components คอมโพเน้นท์ (Components) คือส่วนประกอบเล็กๆ ที่นำมาประกอบกันเพื่อสร้างหน้าแอพลพลิเคชัน โดยแต่ละส่วนจะแยกการทำงานกันอย่างชิ้นเชิง ลองจำลองคิดถึงคอมโพเน้นท์ของเลโก้ ที่เป็นชิ้นส่วนเล็กๆ แล้วนำมาต่อ ๆ ประกอบกันให้กลายเป็นรูปร่างต่าง ๆยกตัวอย่างเช่น Facebook ถ้าทำการแบ่งออกเป็นส่วนๆ แบบคอมโพเน้นท์  ยกตัวอย่างเช่นบนสุดของเฟสบุ๊ค เป็นส่วนของ Navbar  ด้านซ้ายก็เป็น sidebar  และส่วนตรงกลางประกอบไปด้วย Feed , Room , Story , post ต่าง ๆ และด้านขวาสุดเป็นส่วนประกอบของเพจ เป็นต้น
• State & Props : State สเตท คือ Object หนึ่ง ที่ใช้ในการเก็บข้อมูลของ Component ถ้า State มีการเปลี่ยนแปลงไป คอมโพเน้นท์ก็จะถูก re-rendering (เรียกให้มีการแสดงผลใหม่อีกครั้ง)

ถ้าสมมุติว่าต้องการสร้าง State สามารถใช้ React hook (ฮุก) ตัวหนึ่งที่เรียกว่า useState  โดย useState สามารถสร้างสเตทใน functional component ได้  ก็คือ component ที่เห็นใน navbar ใน app ที่สร้างกันนั้นเอง

Props ย่อมาจาก Properties ซึ่งในการ pass ข้อมูลระหว่าง components โดยใช้หลักการของ HTML attributes   และ PropTypes ประกอบไปด้วยตัว Variator ตัวตรวจสอบความถูกต้อง ที่จะช่วยทำให้แน่ใจว่าชนิดของคุณสมบัติตัว properties ถูกส่งผ่านไปยัง component

• Handling Events การใช้งาน Event ใน React นั้นทำได้ง่าย โดย Event จะมีลักษณะการทำงานเหมือน คล้ายๆ กับ properties คือ สามารถสร้างเป็น Event แล้วสามารถที่จะ pass ค่าเป็น properties ไว้ได้  แต่ Event มีความพิเศษคือ มักขึ้นต้นด้วยคำว่า on เสมอ  แล้วชื่อของ Event จะเป็น Camel case คือ คำแรกจะขึ้นต้นด้วยตัวเล็ก คำที่สองจะเป็นตัวใหญ่ เช่น onClick , onChange และ onKeyDown เป็นต้น
• Rendering การ Render  ยกตัวอย่างเช่นหากต้องการนำตัว Post ของที่เก็บในรูปของ Array  ไป Rendering คือ การแสดงผลต้องมีขั้นตอนอย่างไรกันบ้าง การ Render และการใช้ fragment (= การแยกชินส่วน) กันด้วย ตัวอย่างเช่น <div className="App">

<Navbar />  <Input addPost={addPost}/> {posts.map((post) =>(<Post key="{post.id}" id={post.id} title={post.title} />))}</div>);  เพิ่มตัว key properties เข้าไปโดยจะให้เป็น unique id ในที่นี้กำหนดเป็น {post.id}  โดยคีย์ตัวนี้จะห้ามเป็นค่าที่ซ้ำกัน ซึ่งเบื้องหลัง React จะนำไปใช้ในทำการคำนวณ Render ว่ามี component อันไหน ที่เปลี่ยนแปลงไปบ้าง

• Workshop Reactive Web Apps

https://www.udemy.com/share/101WbyAEIec1dRRHw=/     

2. ประโยชน์ต่อการปฏิบัติงานในตำแหน่งหน้าที่

การเข้าร่วมการฝึกอบรมการสร้างเว็บไซต์ด้วยเทคโนโลยี Reactive Web Apps ผ่านระบบอินเตอร์เน็ต www.udemy.com ข้าพเจ้าได้รับความรู้เกี่ยวกับการพัฒนาเว็บไซต์ด้วยเทคโนโลยี React  ทั้งนี้ได้นำองค์ความรู้ที่ได้ไปประยุกต์ใช้กับการเรียนการสอนในรายวิชา ทส215 การโปรแกรมฝั่งไคลเอนต์ ในภาคเรียนที่ 2/2563  ในเนื้อหาเกี่ยวกับเรื่อง React JS ทั้งนี้ได้ถอดองค์ความรู้ครั้งนี้ผ่านทางเอกสารประกอบการสอน Facebook Groups เรียน IT215 และ Google Classroom IT215  เป็นที่เรียบร้อยแล้ว  สไลด์ประกอบการสอน React JS 

   3. ประโยชน์ต่อหน่วยงาน (ระดับงาน/หลักสูตร/คณะ)

1. ได้ปรับปรุงเนื้อหาใหม่ มคอ.3 และ มคอ.5 ในรายวิชา ทส215 การโปรแกรมฝั่งไคลเอนต์ ในภาคเรียนที่ 2/2563
2. เป็นการช่วยเตรียมความพร้อมนักศึกษาก่อนไปปฏิบัติสหกิจศึกษาให้กับทางหลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ