คอร์สอบรม React.js และ Redux 101

ข้อมูลคอร์สอบรม

  • วันที่อบรม: 21-22 (ส-อา) กันยายน 2562 เวลา: 9.00-16.00 น.
  • ค่าอบรม: 4,500 บาท
  • โปรโมชั่นค่าอบรม: เพียง 3,490 บาท (ราคาส่วนลดก่อนวันที่ 9 กันยายน 2562)
  • มัดจำ: 1,000 บาท (ส่วนที่เหลือชำระในวันอบรม)
  • สถานที่อบรม: Oasis Coffee BTS: สถานีอนุสาวรีย์ชัยฯ

tutor4dev line-at

สอบถามเพิ่มเติม และ ลงทะเบียนอบรม LINE ID: @tutor4dev, โทร. 081-572-2129

Prerequisite

  • พื้นฐานการเขียนโปรแกรมภาษา HTML และ CSS
  • พื้นฐานการเขียนโปรแกรมภาษา JavaScript

เกี่ยวกับคอร์สอบรม

ตัวอย่างคลิปสอน React.js - สอนใช้งาน immer.js

มาทำความรู้จักกับ JavaScript Framework ยอดนิยมระดับโลกที่ก่อตั้งโดย Facebook ยักษ์ใหญ่แห่งวงการ Tech ซึ่งมีจุดเด่นเรื่องแนวคิดแบบ Uni-Directional Data Flow อันเลื่องชื่อ ที่มาพร้อมกับ Template Language สุดเจ๋งอย่าง JSX ซึ่งใช้ในการเขียนแอพพลิเคชั่นในแบบ Declarative Rendering ที่แม้แต่ Framework คู่แข่งก็ยังต้องแอบรองรับ Template Language ตัวนี้ใน Framework ของตนเองด้วยเช่นกัน

ในคอร์สนี้จะเน้น Workshop สุดเข้มข้นที่เน้นการลงมือปฏิบัติจริง โดยการใช้การ Feature ใหม่สุดเข๋งอย่าง React Hooks เพื่อให้ผู้เรียนสามารถเขียนแอพพลิเคชั่นจริงได้ภายใน 2 วัน โดยเน้นการเรียนรู้พื้นฐานของ React.js และ Redux เพื่อใช้งานร่วมกับ ReSTful API

คอร์สอบรมนี้เหมาะสำหรับ

  • นักเรียน และ นักศึกษาที่ชื่นชอบการทำเว็บแอพพลิเคชั่น
  • นักพัฒนาเว็บที่ต้องการเรียนรู้เครื่องมือที่ช่วยลดเวลาในการพัฒนาโปรเจค
  • นักพัฒนาในแพลตฟอร์มอื่นๆ ที่สนใจการพัฒนาเว็บแอพพลิเคชั่น
  • ผู้ที่สนใจ React.js และ ต้องการเริ่มต้นใช้งาน React.js อย่างถูกวิธี

หลังจากผ่านคอร์สอบรม

  • สามารถพัฒนาเว็บแอพพลิเคชั่นด้วย React.js
  • สามารถพัฒนาเว็บแอพพลิเคชั่นโดยใช้เทคนิค Single Page Application
  • สามารถพัฒนาเว็บแอพพลิเคชั่นเพื่อ Consume ข้อมูลจาก ReSTful API
  • สามารถพัฒนาเว็บแอพพลิเคชั่นขนาดใหญ่โดยการจัดการ Application State ด้วย Redux
  • สามารถติดตั้งเว็บแอพพลิเคชั่นผ่านระบบ Continuous Deployment

เนื้อหาของคอร์สอบรม

Overview

  • แนวคิดเรื่อง Declarative Rendering และ Component Based Application
  • React.js และ React DOM Overview
  • ใช้งาน ECMAScript
  • การเขียน React.js Application โดยใช้ CDN Library
  • ใช้งาน React.createElement()
  • ใช้งาน create-react-app
  • ใช้งาน React Developer Tools Chrome's Extension

JavaScript XML (JSX)

  • พื้นฐานภาษา JSX
  • การเขียน render() และ ใช้งาน JSX
  • การเขียน Class Component และ Functional Component
  • การเขียน Conditional, List โดยใช้ JSX และ ใช้งาน key
  • ใช้งาน React.Fragment

React Hooks

  • แนวคิด และ กฎการใช้ React Hooks
  • การจัดการ State โดยใช้ useState()
  • การจัดการ Lifecycle โดยใช้ useEffect()
  • การจัดการ Form และ Form Validation ด้วย React Hooks
  • ใช้งาน useRef(), useContext(), useReducer(), useCallback() และ useMemo()
  • การเขียน Custom Hooks

Dynamic CSS และ Style

  • การทำ Dynamic CSS และ Inline JSCSS (JavaScript CSS)
  • ใช้งาน styled-components

Form

  • แนวคิดเรื่อง Controlled Components
  • การจัดการ State ของ Form
  • การเขียน Event Handler สำหรับ Form และ Form Element
  • การทำ Form Validation

Nested Component และ props Management

  • ใช้งาน props และ การทำ props Validation
  • ใช้งาน React.PureComponent และ React.memo()
  • ใช้งาน props ในแบบ Function และ JSX
  • ใช้งาน props.children และ props.children()

Single Page Application และ react-router

  • ใช้งาน <BrowserRouter>
  • ใช้งาน <Route />, <Switch>, <Link>
  • การทำ <Route /> Constraint
  • ใช้งาน withRouter() Higher-order Component และ การทำ Programmatic Navigation
  • ใช้งาน Route Parameter และ Query String
  • การทำ Multiple View
  • การทำ Nested Route
  • การเขียน react-router Guard และ ใช้งาน <Redirect />
ReSTful CRUD Application
  • ใช้งาน JSONPlaceholder ReSTful API
  • ใช้งาน async และ await
  • การเขียน XMLHttpRequest และ ใช้งาน axios
  • การทำ Pagination

Application State Management และ Redux

  • แนวคิดเรื่อง Immutable และ Redux Data Flow
  • การเขียน Spread Syntax
  • การทำ Application State Management โดยใช้ Redux
  • การเขียน store และ reducer
  • ใช้งาน react-redux
  • การเขียน Action, Action Creator และ ใช้งาน dispatch()
  • การเขียน Async Action Creator และ ใช้งาน redux-thunk Middleware

Deployment

  • การทำ Production Build
  • การ Deployment ด้วย Netlify