Syllabus for React.js
Orientation เป้าหมายและการวางแผนการเรียน 
React คืออะไร 
อาชีพที่สามารถต่อยอดได้
การใช้งาน ChatGPT เพื่อแก้ไขปัญหา
วางแผนการเรียนรู้
ทบทวน javaScript and Learning path
Functional programming
Functional Programming คืออะไร ?
ทำไมต้อง Functional Programming?
Shorthand Syntax
The Ternary Operator
Short-circuit Evaluation Shorthand
Declaring Variables Shorthand
Arrow Function – หลาย parameters
Arrow Function – parameter เดียว
Arrow Function – ไม่มี parameter
Arrow Function – Return Object
Multi-line String Shorthand
Template Literals
Destructuring Assignment Shorthand
Spread Operator - Array
Spread Operator - String
Spread Operator - Combine / Merge / Concat Array
Lab 1 - Shorthand Syntax
Functional Programming
Array.map Function
Array.map คืออะไร?
Array.map - เบื้องหลังการทำงาน
ตัวอย่างการใช้งาน Array.map
ตัวอย่างการใช้งาน Array.map - shorthand
Array.map - Example 2
Array.map - Example 3
Lab 2: Array.map
Array.filter Function
Array.filter คืออะไร?
Array.filter - เบื้องหลังการทำงาน
ตัวอย่างการใช้งาน Array.filter
Array.filter - Example 2
Array.filter - Example 3
Lab 3: Array.filter
Array.reduce คืออะไร
Array.reduce - เบื้องหลังการทำงาน
ตัวอย่างการใช้งาน Array.reduce
Lab 4: Array.reduce
Chaining คืออะไร?
ตัวอย่างการเขียน Chaining
ตัวอย่างการใช้งาน Chaining
Lab 5: Chaining
Link ที่น่าสนใจ
Key Takeaways
Homework

React เบื้องต้น 
React JSX
React คืออะไร
SPAs
Virtual DOM
Components Base
การ Setup สำหรับการเขียน React
Element
JSX คืออะไร
ข้อกำหนด JSX
การเพิ่ม CSS ใน JSX (Styling ใน React)
การใส่ CSS แบบ Inline
การใส่ CSS แบบ Plain CSS
Mini Workshop: เพิ่ม CSS ให้ Component
Expression
JavaScript expression มีอะไรบ้าง
Ternary
การนำอาเรย์มาผ่าน map ฟังก์ชันทำให้เป็น Element
JSX คืออะไร? – การนำอาเรย์มาผ่าน map ฟังก์ชันทำให้เป็น Element
การคำนวณทางคณิตศาสตร์
การใช้ฟังก์ชัน
JavaScript Expression บางตัวก็ไม่สามารถแสดงผลหน้าเว็บได้
Components
Components คืออะไร
Function Component 
Class Component 
Component VS Element
การส่งข้อมูลผ่าน Props
Events 
Events คืออะไร
การ Setup สำหรับการเขียน React
การใส่ Event ใน React
การใส่ Function ใน Event
State
State คืออะไร
วิธีการใช้ State
Import
เรียกใช้งาน
ข้อควรระวังของ useState
นำ State ไปใช้งาน
การเปลี่ยนค่า State โดยใช้ setState
คอนเซปต์ของ State ที่ต้องรู้
Form
Form คืออะไร
Input Form
คอนเซปต์ Lifting State Up

React conditional rendering
Introduction to React conditional rendering
If-else
&& (inline if ด้วย && operator)
? : (ternary operator)
การไม่ให้ component render ใดๆ
การแสดงข้อมูล Array
Key
HTML DOM
ประเภทของ component
Controlled component
Uncontrolled component
Controlled vs Uncontrolled Component


React Router
Routing คืออะไร
การติดตั้ง Router
Rendering routes
การใช้งาน router ในการเปลี่ยนหน้าต่างๆ 
การใช้งาน Route parameters
การเปลี่ยน Route โดยการเขียนโค้ด
Redirect
การกำหนดเงื่อนไข/อนุญาติให้เข้าถึงในบาง Route
Router Hooks
useHistory
useParams
useLocation
Workshop on site: 

JSON, HTTP และ Axios
หลักการการเชื่อมต่อ Frontend กับ Backend
JSON คืออะไร
ความแตกต่างระหว่าง JSON กับ Object
ตัวอย่างของ JSON
JSON with Table Structure
JSON functions
JavaScript
Callback function คืออะไร
Function as variable or call
Pass function not value
ตัวอย่าง Callback
Function as parameters
Why do we use callback?
API คืออะไร
ทบทวนหลักการเชื่อมต่อ Frontend กับ Backend
ประโยชน์ของ API
ตัวช่วยอ่าน Data จาก API (JSON)
Request API
Response API
Axios
HTTP Request
HTTP Request Type
How to install Axios
Axios - Get Example
Anonymous function
Axios - Get with Parameters 
Axios - POST Example
Axios as function
Axios as callback

Promise, Async, and Await
Synchronous, Asynchronous ในโลกของ Programming
Synchronous คืออะไร
Asynchronous คืออะไร
การ run instructions ใน Javascript ในรูปแบบ Asynchronous
Asynchronous Build-in function in JavaScript
เหตุผลและประโยชน์ของการเข้าใจ Asynchronous Build-in function
Explore Build-in function - setTimeout 
การทำงาน Asynchronousในรูปแบบต่างๆ
แบบคู่ขนาน ( parallel )
แบบต่อเนื่องตามลำดับ ( sequential ) 
การจัดการ Asynchronous ใน ภาษา Javascript
Traditional way
Call back function
ปัญหาของ Call back function
Modern way
Promise
Promise คืออะไร
ประโยชน์ของ Promise
Consuming Promise จาก API 
จัดการ Promise function ด้วย .then, .catch
สร้าง Promise Object ด้วย new Promise
Reuse Promise code
Sequential Promise
Async, await
async, await คืออะไร
ประโยชน์ของ Async, await
ดัก catch ด้วย try, catch statement
Consuming API โดยใช้ async await
Dive deeper into Promise
Promise status
จัดการ Parallel Promise ด้วย Promise.all

Workshop on site: 

React Hook
การใช้ useEffect
Side Effect คืออะไร?
การใช้ useReducer
useReducer vs useState
React context
ข้อจำกัดของ Context
เรื่องเพิ่มเติมของ Hooks
กฏของฟังก์ชัน Hooks

Workshop on site: 

React Form validation
Introduction to Form Validation in React
Understanding the importance of form validation.
Basic concepts: controlled components, state management.
Controlled Components:
Overview of controlled components in React.
Managing form data with state.
Handling form input changes with onChange event.
Basic Validation Techniques:
Required fields validation.
Conditional rendering of error messages.
Displaying error messages based on form state.
Email Validation:
Using regular expressions for basic email validation.
Displaying email-related error messages.
Password Validation:
Setting minimum password length.
Displaying password-related error messages.
Form Submission
Handling form submission using the onSubmit event.
Preventing default form behavior.
Logging form data to the console.
Validation on Submit:
Validating the entire form on submission.
Displaying a summary of errors.
Formik Library:
Introduction to the Formik library for form management.
Simplifying form validation with Formik.
Yup Schema Validation:
Integrating Yup for schema-based validation with Formik.
Advanced validation rules using Yup.


React Redux
State management
ประเภทของ state ใน Application 
state management คืออะไร
ทำไมถึงต้อง มี tool มาช่วยmanage state
ปัญหาของการส่ง prop
redux 
redux structure 
Store
Dispatch
Action
Reducer
React redux
store provider
useSelector
useDispatch
useStore
Dive deeper into React redux
useSelector vs useStore
shallow equal
Workshop onsite: Redux คิดโปรเจคอีกครั้ง
Final Project: