React.JS Typescript + MaterialDesign Programming | 2,727 min.
1,790 บาท จากปกติ 2,700 บาท ดูได้ 360 วัน (ไม่รวม Vat.)

React.JS + TypeScript + Redux + Hooks + MaterialDesign Programming 2022 (เวอร์ชันเต็ม พร้อมซอสโค้ด)

React-JS คือ Web Frontend Framework ที่ใช้ในการพัฒนา Web Application แบบสมัยใหม่ที่เรียกว่า SPA (Single Page-Web-Application) ซึ่งทำให้เว็บไซต์สามารถทำงานได้เหมือนกับ Windows หรือ Mobile Application ที่รวดเร็วและต่อเนื่อง โดยไม่ต้อง Refresh หน้าจออยู่ตลอดเวลา รวมถึง Library ที่รองรับที่มากขึ้นด้วย, ในส่วนภาษา (ES6 / JSX) คือภาษาหลักที่ใช้การพัฒนา React.JS ซึ่งใกล้เคียงกับ Javascript / Typescript / XML 

React-JS ถูกพัฒนาโดยบริษัท Facebook Inc. ซึ่งมีความสามารถแบบเดียวกับ Angular และ Vue แต่มีประสิทธิภาพที่ดีกว่าที่ด้านของความเร็ว แต่ก็ต้องเวลาในการศึกษานานเช่นเดียวกัน เนื่องด้วยรูปแบบโครงสร้างโปรเจคในการการพัฒนา สามารถปรับแต่งได้หลากหลายมาก และเรื่อง State Managment ที่จัดการด้วย Redux 

นอกจากนี้ Concept และ Source-code ของ React.JS ยังสามารถใช้งานร่วมกับ React-Native ในการพัฒนาแอปบนมือถืออย่าง Android และ iOS ได้อีกด้วย โดยสามารถ Reuse Code ได้มากกว่า 70%

ในหลักสูตรจะมีการสอน Redux, Formik, Redux-Loggger ในการจัดการ State อย่างเข้มข้น การดึง AdminLTE และ MaterialUI Theme มาใช้รวมกับ React.JS สอนทำ Workshop เป็นหลักเพื่อให้นักเรียนเกิดความชำนาญจนลงไปในกล้ามเนื้อเลย และแนวทางในการพัฒนาที่ถูกต้อง เพื่อให้สามารถรองรับระบบที่ซับซ้อนและดูเป็นมืออาชีพมากขึ้น

เนื้อหาอัพเดท 2022 เพิ่มส่วนการเขียน Component เป็นแบบ Functional Style ทั้งหมด และ การใช้ React Hooks และ Redux Hooks แบบต่างๆ

การติดตั้งและเรียนรู้การใช้เครื่องมือในการพัฒนา

  • การติดตั้ง Node.JS
  • การติดตั้ง React.JS CLI 
  • การติดตั้ง Visual Studio และ React Extension Pack
  • การติดตั้ง Postman
  • การใช้งาน ReactJS CLI เบื้องต้น
  • การทำ Code Format and Completion และ อื่นๆ
  • การวิเคราะห์ Error ตอน compile time
  • การใช้งาน Debugging / JS Debugging / Auto Reload

เนื้อหาหลักในการพัฒนา React JS.

  • โครงสร้าง React JS Project
  • การใช้งาน ReactJS Language (Typescript and JSX) เบื้องต้น
  • การใช้งาน React Component (Class and Functional) และ UI เบื้องต้น
  • การส้ราง Subcomponents
  • เครื่องแปลง HTML ให้เป็น JSX
  • การใช้งาน Data Binding (Props and State)
  • การดัก Event ที่เกิดขึ้นกับ UI Components แต่ละตัวเช่น การคลิกที่ Button, Input
  • การใช้งาน Redux (Unidirectional DataFlow)
  • การใช้งาน React Router
  • การส่งและรับค่าระหว่าง Pages
  • การใช้งาน Redirect React Routing Page
  • การใช้งาน Secured React Routing Page
  • การใช้งาน Redux for Page Navigation
  • เข้าใจหลักการทำงาน ของ Component Lifecycle Events
  • การใช้งาน Library 3rd Party
  • การ Compile และ Run โปรเจค

Workshop: State and Property

  • เรียนรู้การเขียน ES7 และ JSX
  • การทำ Arrow Function และ ความจำเป็นของมัน
  • เรียนรู้การทำงานของ State และ Property
  • การแชร์ข้อมูลไปมาระหว่าง Component ด้วย State and Property

Workshop: Integrate AdminLTE 

  • การติดตั้ง Theme AdminLTE & Bootstrap
  • สร้าง Header, Menu, and Footer
  • การติดตั้ง Bundled Files
  • การแปลง HTML ให้เป็น JSX
  • ติดตั้งระบบ Page Navigation with React Router
  • สร้าง Route สำหรับการเปลี่ยนหน้า อาทิ register, login, stock, create/edit/delete

Workshop: Integrate Material UI 

  • การติดตั้ง Material UI ที่มาจาก https://material-ui.com/
  • สร้าง Header, Menu, and Footer
  • การติดตั้ง Bundled Files
  • การใช้ Material Table
  • ติดตั้งระบบ Page Navigation with React Router ในแบบ Material

Workshop: Basic Login Authentication

  • ติดตั้ง Axios 
  • ติดตั้ง Backend ด้วย NodeJS / Express / Sequelize (DB ORM) 
  • ติดตั้ง Backend Libraries ที่จำเป็น express body-parser cors sequelize
  • สร้าง Web API ด้วย NodeJS
  • สร้าง NodeJS Router ด้วย Express 
  • สร้าง Sub Router
  • สร้าง REST API สำหรับทดสอบระบบ Authentication (Register and Login)
  • เรียนรู้การสร้าง DB Model (Code First) เพื่อเชื่อมต่อ SQLITE3 / MYSQL
  • ในการแปล HTTP Format แบบ URLEncodeed และ JSON , MultipleParts
  • เชื่อมต่อ ReactJS Login กับ NodeJS API

Workshop: Redux

  • ติดตั้ง Redux, React-Redux, Redux-Thunk, Redux-Logger
  • ทำความเข้าใจ ความจำเป็นในการใช้ Redux
  • ความหมายของ Unidirectional Data Flow
  • การขึ้นโครง Redux (Action, Reducer, Store)
  • Extension and plugin ที่ช่วยทำให้การใช้ Redux ง่ายขึ้น
  • การ Debug / Log ข้อมูล (State) ด้วย Redux-Logger

Workshop: Stock

  • สร้างระบบคลังสินค้า ประยุกต์เรื่อง Redux, Formik, Upload and Router
  • ติดตั้ง Redux
  • การใช้ Formik เพื่อให้ข้อมูลในหน้า Form 
  • สร้าง Web API ที่ NodeJS สำหรับ Insert / Update / Query / Delete
  • ทำหน้าแสดงผล สำหรับรายการสินค้า Stock-List
  • Stock Create + Upload Image
  • Stock Edit + Change Image
  • การใช้ Lodash ในการทำ Debounce search เพื่อประสิทธิภาพที่ดีขึ้น

Workshop: Deployment

  • ติดตั้ง Nginx Webserver
  • ติดตั้ง PM2 Node Monitor
  • การ build แบบ production
  • แก้ไขปัญหาเรือง CORS
  • แก้ไขปัญหาเรื่อง Fallback URL

Tips, Plug-in, Best Practices Videos (อัพเดทใหม่ๆ อยู่ตลอด)

  • ReactJS Plugin ที่น่าสนใจ
  • เทคนิคการเขียนให้มีประสิทธิภาพ
  • ReactJS 3rd Library ที่มีมาอัพเดทให้ดูกันเรื่อยๆ
  • และคลิปที่มีประโยชน์อีกมากมาย ที่ทำมาให้ดูกันอยู่เรื่อยๆ

 

ตัวอย่างภาพบางส่วนของ Workshop