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

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

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

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