Babel Coder

คอร์ส Core React: เรียนรู้การใช้งาน React อย่างมืออาชีพ


Creator
Nuttavut Thongjor
Category
Web Development
คำอธิบายหลักสูตร

คอร์สนี้อยู่ระหว่างการจัดทำ สนใจติดต่อ facebook: babelcoder ครับ

หมายเหตุ: หากต้องการหักภาษี ณ ที่จ่าย หรือออกเอกสารอื่นใด แอดมินขอคิดราคาเต็มที่ 9,500 บาท นะครับ

เรียนรู้การใช้งาน React, Redux, Webpack2, การทำ Universal JavaScript และการใช้งานเครื่องมือต่างๆใน Ecosystems ของ React ตั้งแต่เริ่มต้นจนเป็นเซียน

บทเรียน

  • ทบทวนพื้นฐาน ES2015
  • Functional Programming
  • การใช้ create-react-app
  • React
  • การใช้งาน Recompose และ Higher Order Component
  • React Router
  • Redux
  • Middleware
  • Normalizr
  • Async
  • Restful & Express.js, Authen & Author & JWT
  • CSS Module
  • Webpack 2
  • Deployment, Docker, DigitalOcean
  • และอื่นๆอีกเยอะแยะ
บทเรียน
Level 1
แนะนำ React
React คืออะไร รู้จักคุณสมบัติและการใช้งาน React เบื้องต้น
  • Gold
    1. รู้จัก React
    1.39
  • Gold
    2. Declarative
    3.43
  • Gold
    3. Component-Based
    2.46
  • Gold
    4. ปัญหาของ Data Flow
    4.15
  • Gold
    5. การจัดการ Data Flow
    7.3
  • Gold
    6. ปัญหาการพัฒนาแอพพลิเคชันค้นหาบทความ
    2.26
  • Gold
    7. Learn Once, Write Anywhere
    0.57
  • Gold
    8. สรุป
    1.21
Level 2
2. ES2015 and Basic Functional Programming
ทบทวนพื้นฐาน JavaScript, ES2015 และ พื้นฐานของ Functional Programming ใน JavaScript
  • Gold
    1. ECMAScript
    3.32
  • Gold
    2. Execution Context
    7.34
  • Gold
    3. Scope Chain
    4.39
  • Gold
    4. Closure
    6.57
  • Gold
    5. Variable Scope
    8.29
  • Gold
    6. Keyword this
    9.51
  • Gold
    7. Lexical this
    3.43
  • Gold
    8. Arrow Function
    2.48
  • Gold
    9. Lab 1
    3.02
  • Gold
    10. ทบทวนไวยากรณ์ 1
    3.13
  • Gold
    11. Asynchronous Programming
    6.08
  • Gold
    12. Promise
    4.1
  • Gold
    13. ทบทวนความเข้าใจ 1
  • Gold
    14. เฉลยทบทวนความเข้าใจ 1 ข้อ 1
    1.05
  • Gold
    15. เฉลยทบทวนความเข้าใจ 1 ข้อ 2
    1.33
  • Gold
    16. เฉลยทบทวนความเข้าใจ 1 ข้อ 3
    2.2
  • Gold
    17. เฉลยทบทวนความเข้าใจ 1 ข้อ 4
    1.02
  • Gold
    18. เฉลยทบทวนความเข้าใจ 1 ข้อ 5
    2.24
  • Gold
    19. เฉลยทบทวนความเข้าใจ 1 ข้อ 6
    2.36
  • Gold
    20. Object
    2.26
  • Gold
    21. Array
    5.57
  • Gold
    22. String
    3.57
  • Gold
    23. Spread and Rest Operators
    3.55
  • Gold
    24. Destructuring
    4.59
  • Gold
    25. Class
    2.55
  • Gold
    26. Composition over Inheritance
    6.07
  • Gold
    27. Module
    5.33
  • Gold
    28. Functional Programming
    6
  • Gold
    29. Immutability
    4.42
  • Gold
    30. Pure Function
    2.06
  • Gold
    31. Data Transformation
    8.17
  • Gold
    32. Higher Order Functions
    2.56
  • Gold
    33. Composition
    3.19
  • Gold
    34. Recursion
    2.48
  • Gold
    35. Tail Call Optimization
    3.04
  • Gold
    36. Tail Call Position
    4.4
  • Gold
    37. Lab2
    6.34
  • Gold
    38. ทบทวนความเข้าใจ 2
  • Gold
    39. เฉลยทบทวนความเข้าใจ 2 ข้อ 1
    4.13
  • Gold
    40. เฉลยทบทวนความเข้าใจ 2 ข้อ 2
    3.15
  • Gold
    41. เฉลยทบทวนความเข้าใจ 2 ข้อ 3
    4.26
  • Gold
    42. เฉลยทบทวนความเข้าใจ 2 ข้อ 4
    3.09
  • Gold
    43. สรุป
    3.31
  • Gold
    44. แบบฝึกหัด
  • Gold
    45. เฉลยแบบฝึกหัดข้อ 1
    8.21
  • Gold
    46. เฉลยแบบฝึกหัดข้อ 2
    1.58
  • Gold
    47. เฉลยแบบฝึกหัดข้อ 3
    1.18
  • Gold
    48. เฉลยแบบฝึกหัดข้อ 4
    1.51
  • Gold
    49. เฉลยแบบฝึกหัดข้อ 5
    6.28
Level 3
React Toolchain
ศึกษาการติดตั้งและใช้งานเครื่องมือต่างๆเพื่อพัฒนาแอพพลิเคชันด้วย React
  • Gold
    1. การติดตั้ง Node.js
    0.33
  • Gold
    2. การติดตั้ง VS Code
    0.16
  • Gold
    3. การติดตั้ง create-react-app
    1.05
  • Gold
    4. การสร้างโปรเจคด้วย create-react-app
    1.5
  • Gold
    5. การ Debug ด้วย VS Code
    4.22
  • Gold
    6. React Developer Tools
    2.12
Level 4
Components
ศึกษาการใช้งานคอมโพแนนท์เบื้องต้นใน React รวมถึงการออกแบบตามแนวคิด Component-Based Design
  • Gold
    1. ข้อแตกต่างของ HTML Centric และ JavaScript Centric
    3.09
  • Gold
    2. React DOM
    3.23
  • Gold
    3. JSX
    3.17
  • Gold
    4. Conditional Rendering
    5.03
  • Gold
    5. Stateless Functional Components
    3.37
  • Gold
    6. การจัดการ Events
    4.27
  • Gold
    7. setState
    5.48
  • Gold
    8. Extract Callbacks
    2.49
  • Gold
    9. คีย์เวิร์ด this
    5.53
  • Gold
    10. Bind
    2.39
  • Gold
    11. Callback ของ setState
    3.35
  • Gold
    12. ref
    7.31
  • Gold
    13. Data Binding
    3.29
  • Gold
    14. Component-Based Design
    1.39
  • Gold
    15. แอพพลิเคชัน Address Book
    3.32
  • Gold
    16. props
    10.18
  • Gold
    17. Controlled Components
    10.37
  • Gold
    18. Unidirectional Data Flow
    8.05
  • Gold
    19. Container และ Presentational Components
    5.13
  • Gold
    20. defaultProps
    2.38
  • Gold
    21. propTypes
    5.18
  • Gold
    22. Module
    5.56
  • Gold
    23. ทบทวนการใช้งาน props
    4.28
  • Gold
    24. ทบทวนความเข้าใจ 1
  • Gold
    25. เฉลยทบทวนความเข้าใจ 1 ข้อ 1
    12.29
  • Gold
    26. ทบทวนข้อแตกต่างของ State และ Props
    4.3
  • Gold
    27. ปัญหาของ setState
    2.43
  • Gold
    28. ทบทวนความเข้าใจ 2
  • Gold
    29. เฉลยทบทวนความเข้าใจ 2 ข้อ 1
    1.48
  • Gold
    30. Airbnb PropTypes
    4.28
Level 5
Context
ศึกษาการใช้งาน Context เพื่อสร้างคอมโพแนนท์ที่มีความซับซ้อน รวมถึงรู้จักข้อดีข้อเสียของการใช้งาน Context
  • Gold
    1. ภาพรวมของบทเรียน
    1.36
  • Gold
    2. Tabs
    11.34
  • Gold
    3. classnames
    5.32
  • Gold
    4. Lifting State Up
    6.5
  • Gold
    5. Children
    18.43
  • Gold
    6. Tabs, TabList, Tab และ TabPanel
    6.5
  • Gold
    7. context
    14.07
  • Gold
    8. Context และ Stateless Functional Component
    7.41
  • Gold
    9. ข้อดีและข้อเสียของการใช้ context
    2.17
  • Gold
    10. สรุป
    4
Level 6
Routing & Nativation
รู้จักการทำงานของ Router, Route และ Link ด้วยการสร้างการจัดการเส้นทางภายในเพจ
  • Gold
    1. Router
    4.18
  • Gold
    2. Location
    2.1
  • Gold
    3. pushState
    6.31
  • Gold
    4. Load Content
    3.27
  • Gold
    5. onpopstate
    2.15
  • Gold
    6. pushState Data
    1.2
  • Gold
    7. replaceState
    1.53
  • Gold
    8. back, forward และ go
    1.4
  • Gold
    9. Link Component
    5.49
  • Gold
    10. Router Component
    8.39
  • Gold
    11. Active Link
    4.45
  • Gold
    12. Route Component
    5.41
  • Gold
    13. สรุป
    0.49
Level 7
Advance Components
รู้จักหลักการของ Reconciliation ศึกษาการทำงานของ React Lifecycle และ การเพิ่มประสิทธิภาพการทำงานด้วย PureComponent
  • Gold
    1. Virtual DOM
    8.31
  • Gold
    2. Reconciliation
    3.21
  • Gold
    3. Reconciliation และ Parent-Child
    7.3
  • Gold
    4. Lifecycle
    7.49
  • Gold
    5. Reconciliation และ Lifecycle
    5.3
  • Gold
    6. shouldComponentUpdate
    4.09
  • Gold
    7. ตัวอย่างการใช้งาน shouldComponentUpdate
    6.27
  • Gold
    8. Immutable Data
    9.17
  • Gold
    9. shallowCompare
    7.14
  • Gold
    10. PureComponent
    4.03
  • Gold
    11. สรุป
    4.46
Level 8
RESTful API
ทบทวน REST API การสร้างและใช้งาน REST API การทำ Authentication และ Authorization รวมไปถึงการใช้งาน React เพื่อเข้าถึงข้อมูลจาก REST API
  • Gold
    1. RESTful API
    12
  • Gold
    2. json-server
    8.33
  • Gold
    3. HTTP Status Codes
    3.43
  • Gold
    4. Express.js
    7.39
  • Gold
    5. Model-View-Controller
    5.22
  • Gold
    6. Server และ Database
    2.49
  • Gold
    7. Routes
    12.31
  • Gold
    8. Controllers
    3.41
  • Gold
    9. Models
    22
  • Gold
    10. Serializers
    8.04
  • Gold
    11. Authentication และ Authorization
    2.43
  • Gold
    12. Bcrypt
    10.11
  • Gold
    13. Storing Password
    7.3
  • Gold
    14. JWT
    9.5
  • Gold
    15. Generating Token
    3.29
  • Gold
    16. Configuration File
    4.1
  • Gold
    17. User Verification
    6.41
  • Gold
    18. Modular Design
    1.27
  • Gold
    19. Token Verification
    10.54
  • Gold
    20. Policies
    5.57
  • Gold
    21. Pagination
    10.52
  • Gold
    22. CORS
    4.08
  • Gold
    23. Fetch API
    4.47
  • Gold
    24. ENV
    3
  • Gold
    25. สรุป
    2.47
Level 9
React Router V.4
ศึกษาการใช้งาน React Router V.4 เพื่อจัดการเส้นทางภายในเพจ และการติดต่อกับ RESTful API Server
  • Gold
    1. แนะนำ React Router
    4.09
  • Gold
    2. แนะนำโปรเจค
    3.49
  • Gold
    3. Setup Project
    3.34
  • Gold
    4. Router และ Route
    6.43
  • Gold
    5. Route Props
    1.57
  • Gold
    6. Proxy
    7.44
  • Gold
    7. Link
    7.02
  • Gold
    8. Exact Match
    2.43
  • Gold
    9. NavLink
    2.21
  • Gold
    10. Named Parameters
    9.29
  • Gold
    11. History
    1.14
  • Gold
    12. Update Route Params
    3.04
  • Gold
    13. Location
    13.2
  • Gold
    14. Switch
    11.22
  • Gold
    15. withRouter
    14.2
  • Gold
    16. PropTypes
    5.15
  • Gold
    17. Prompt
    16.52
  • Gold
    18. Redirect
    4.2
  • Gold
    19. Not Found
    2.32
  • Gold
    20. สรุป
    11.2
Level 10
Higher Order Components
เรียนรู้การจัดการ cross cutting concerns ด้วย Higher Order Components
  • Gold
    1. Higher Order Components
    3.28
  • Gold
    2. Cross-Cutting Concerns
    7.52
  • Gold
    3. Manipulating Props
    10.2
  • Gold
    4. HOC Instance
    9.43
  • Gold
    5. Mutation
    6.34
  • Gold
    6. Inheritance Inversion
    2.27
  • Gold
    7. State Management
    7.05
  • Gold
    8. Static Properties
    5.43
  • Gold
    9. Arguments
    2.1
  • Gold
    10. displayName
    4.18
  • Gold
    11. render
    2.37
  • Gold
    12. สรุป
    1.14
Level 11
Recompose
รู้จักการใช้งาน Recompose เพื่อขยายขีดความสามารถให้กับ Functional Component
  • Gold
    1. Recompose
    1.09
  • Gold
    2. Compose
    5.32
  • Gold
    3. withState
    4.08
  • Gold
    4. withHandlers
    7.05
  • Gold
    5. lifecycle
    2.3
  • Gold
    6. withProps
    1.56
  • Gold
    7. setPropTypes
    2.33
  • Gold
    8. ทบทวนไวยากรณ์ 1
    10.47
  • Gold
    9. Forms
    9
  • Gold
    10. ทบทวนไวยากรณ์ 2
    4.58
  • Gold
    11. branch
    8.11
  • Gold
    12. renderComponent
    1.59
  • Gold
    13. Custom Higher-Order-Component
    4.04
  • Gold
    14. setDisplayName
    2.39
  • Gold
    15. ทบทวนไวยากรณ์ 3
    5.3
  • Gold
    16. flattenProp
    2.3
  • Gold
    17. pure
    1.19
  • Gold
    18. onlyUpdateForKeys
    2.18
  • Gold
    19. สรุป
    0.3
Level 12
Webpack 2 สำหรับ Development
เรียนรู้การตั้งค่าและใช้งาน Webpack 2 เพื่อการทำงานบนโหมดของ Development
  • Gold
    1. Webpack
    8.27
  • Gold
    2. Yarn
    1.45
  • Gold
    3. Webpack Dev Server
    3.33
  • Gold
    4. Entry
    7.05
  • Gold
    5. Babel
    4.27
  • Gold
    6. Loaders
    4.22
  • Gold
    7. Output
    3.57
  • Gold
    8. react-hot-loader
    8.29
  • Gold
    9. Resolve
    2.25
  • Gold
    10. Source Map
    6.53
  • Gold
    11. sass-loader
    6.3
  • Gold
    12. CSS Source Map
    2.11
  • Gold
    13. CSS Module
    5.23
  • Gold
    14. PostCSS
    2.56
  • Gold
    15. devServer
    5.25
  • Gold
    16. ESLint
    2.34
  • Gold
    17. Tree Shaking
    2.17
Level 13
Redux
รู้จักการใช้งาน Redux ไลบรารี่สำหรับการจัดการสถานะของแอพพลิเคชัน พร้อมตัวอย่างการใช้งานในแอพพลิเคชันขนาดใหญ่
  • Gold
    1. Project
    9.02
  • Gold
    2. State และ Feature Components
    12.25
  • Gold
    3. Store
    9.06
  • Gold
    4. subscribe
    7.27
  • Gold
    5. unsubscribe
    6.52
  • Gold
    6. Multiple Stores Problems
    8.17
  • Gold
    7. Single Store
    6.01
  • Gold
    8. dispatch
    5.55
  • Gold
    9. createStore
    9.55
  • Gold
    10. Reducers
    13.22
  • Gold
    11. combineReducers
    4.21
  • Gold
    12. Action Creators
    3.28
  • Gold
    13. Provider
    6.41
  • Gold
    14. connect
    17.33
  • Gold
    15. Action Types
    3.08
  • Gold
    16. Redux Principles
    6.04
  • Gold
    17. react-redux
    4.04
  • Gold
    18. Pure Option
    5.11
  • Gold
    19. สรุป
    2.29
Level 14
Middlewares
ศึกษาการใช้งานและการสร้าง Middleware ของ Redux
  • Gold
    1. แนะนำบทเรียน
    2.04
  • Gold
    2. ทบทวน Redux I
    20.44
  • Gold
    3. ทบทวน Redux II
    6.53
  • Gold
    4. localStorage
    8.27
  • Gold
    5. Unique ID
    3.01
  • Gold
    6. Logging
    3.55
  • Gold
    7. Override Dispatch
    5.02
  • Gold
    8. Monkey Patch Dispatch
    3.34
  • Gold
    9. Middlewares
    7.37
  • Gold
    10. applyMiddlewares
    6.13
  • Gold
    11. createStore
    3.2
  • Gold
    12. redux-logger
    2
  • Gold
    13. redux-devtools
    5.25
  • Gold
    14. persistState
    2.24
  • Gold
    15. replaceReducer
    1.18
  • Gold
    16. สรุป
    1.4
Level 15
Async Actions
รู้จักการทำงานของ Async และแบบปฏิบัติที่ดีของการทำงานแบบ Async ภายใต้ Redux
  • Gold
    1. แนะนำบทเรียน
    1.39
  • Gold
    2. Fake API Server
    4.28
  • Gold
    3. API Server
    8.02
  • Gold
    4. Loading Indicator
    7.09
  • Gold
    5. Promise Support
    8.03
  • Gold
    6. Action Creators
    5.2
  • Gold
    7. redux-thunk
    1.22
  • Gold
    8. Load Article
    11.36
  • Gold
    9. ลำดับของ Middlewares
    1.51
  • Gold
    10. Auth
    15.53
  • Gold
    11. API Middleware
    13.54
  • Gold
    12. Custom Types
    15.33
  • Gold
    13. redux-api-middleware
    3.46
  • Gold
    14. Create Article
    5.08
  • Gold
    15. setToken Middleware
    6.01
  • Gold
    16. สรุป
    1.16
Level 16
Define State Shape
ศึกษาการออกแบบ Application State เพื่อการใช้งานกับ Redux อย่างมีประสิทธิภาพ
  • Gold
    1. State Shape Problem
    3.16
  • Gold
    2. Define State Shape
    7.07
  • Gold
    3. State Transformation
    4.46
  • Gold
    4. State Handler
    7.22
  • Gold
    5. Normalizr
    5.01
  • Gold
    6. Schema
    2.31
  • Gold
    7. Normalize API Response
    10.48
Level 17
Memozied Selectors
รู้จัก Selectors ใน Redux และการรู้จำค่าเพื่อเพิ่มประสิทธิภาพการคำนวณกับ Memozied Selectors
  • Gold
    1. Selectors
    11.11
  • Gold
    2. Memozied Selectors
    2.17
  • Gold
    3. Reselect
    4.36
  • Gold
    4. Multiple Input Selectors
    2.26
  • Gold
    5. Props
    1.13
  • Gold
    6. Sharing Selectors
    5.23
Level 18
UI State Management
ศึกษาการจัดการกับสถานะที่เรียกว่า UI State พร้อมทั้งเรียนรู้การจัดการฟอร์มไปกับ redux-form
  • Gold
    1. Redux Store VS React State
    5.02
  • Gold
    2. UI State
    8.39
  • Gold
    3. Redux Store Pros & Cons
    2.21
  • Gold
    4. Redux Form
    9.16
  • Gold
    5. initialValues
    3.47
  • Gold
    6. validate
    3.25
  • Gold
    7. Render Fields
    8.02
  • Gold
    8. Errors
    3.07
Level 19
Third Party Lib Integration
ศึกษาการใช้งาน React ควบคู่กับ 3rd party lib
  • Gold
    1. Introduction
    0.43
  • Gold
    2. DOM Event Handling
    3.15
  • Gold
    3. jQuery
    1.2
  • Gold
    4. 3rd-lib
    2.31
  • Gold
    5. CSS Handling
    6.04
  • Gold
    6. Global CSS
    3.01
  • Gold
    7. ProvidePlugin
    6.59
  • Gold
    8. Reactstrap
    6.03
Level 20
Redux Best Practices
ศึกษาแนวปฏิบัติที่ดีของการใช้งาน React ควบคู่กับ Redux
  • Gold
    1. Presentational and Container Components
    7.19
  • Gold
    2. Split Components
    5.02
  • Gold
    3. Avoid Intermediate Components
    11.53
  • Gold
    4. Organize Folder by Features
    3.42
  • Gold
    5. Feature Folders
    5.27
  • Gold
    6. Combine Container and Presentational Components
    3.29
  • Gold
    7. Class Components VS Functional Components
    2.39
Level 21
Optimization
  • Gold
    1. Introduction
    1.34
  • Gold
    2. HTML Webpack Plugin
    3.31
  • Gold
    3. Render Lists in Dedicated Components
    8.14
  • Gold
    4. Webpack Configuration Functions
    5.26
  • Gold
    5. Webpack Merge
    6.02
  • Gold
    6. Clean Webpack Plugin
    1.21
  • Gold
    7. Hash Placeholder
    4.39
  • Gold
    8. Chunk Hash
    5.06
  • Gold
    9. Commons Chunk Plugin
    6.29
  • Gold
    10. Webpack Build File
    2.06
  • Gold
    11. Define Plugin
    3.07
  • Gold
    12. UglifyJS
    1.46
  • Gold
    13. display-modules and display-chunks
    1.59
  • Gold
    14. Webpack Bundle Analyzer
    2.11
  • Gold
    15. Tree Shaking
    3.57
  • Gold
    16. Code Spliting
    7.52
  • Gold
    17. Webpack Chunk Name
    1.31
  • Gold
    18. Async Common Chunks
    3.09
  • Gold
    19. Scope Hoisting
    2.56
  • Gold
    20. Source Map
    0.44
  • Gold
    21. localIdentName
    1
  • Gold
    22. --p
    1.18
  • Gold
    23. Dynamic Import
    7.49
  • Gold
    24. Lazy Loading Components
    7.43
  • Gold
    25. Reducing Vendor Chunk Size
    5.42
  • Gold
    26. Share Plugins Across ENV
    1.59
Level 22
Universal JavaScript
-
    Level 23
    Docker
    -
      Level 24
      Deployment
      -

        แสดงความคิดเห็นของคุณ


        Songklod Teerakul14 วันที่ผ่านมา

        รอๆๆๆๆ


        Enc Gfxเดือนที่แล้ว

        เพิ่มเนื้อหาให้หน่อยนะครับ นิ่งมาหลายเดือนแล้ว


        Danglebz Highbreed3 เดือนที่ผ่านมา

        PWA ด้วยก้ดีนะครับ ^^


        Suwijak Kongtaworn5 เดือนที่ผ่านมา

        Redux-Saga ไปซะละ ตอนแรกยังมี ตอนนี้ไม่มีแล้วเหรอคับ


        Enc Gfx5 เดือนที่ผ่านมา

        ยังรอบทใหม่อยู่นะครับ


        Kasidesh Yontaradidthaworn6 เดือนที่ผ่านมา

        กดดูคอร์สตัวอย่างไม่ได้ครับ


        ไม่ระบุตัวตน6 เดือนที่ผ่านมา

        รอเนื้อหาครบอยู่นะครับ ในระหว่างนี้ขอเก็บตังแพร๊บ


        Wiput Pootong7 เดือนที่ผ่านมา

        รอเนื้อหามาครบจะจัดแน่นอนครับ ถ้า Deployment มีพวก Kubernetes ด้วยจะแจ่มมากครับ ^^


        Pongsakorn Kanapan8 เดือนที่ผ่านมา

        สุดยอด


        ไม่ระบุตัวตน8 เดือนที่ผ่านมา

        อธิบายเข้าใจง่ายเนื้อหาจัดเต็ม เน้นคุณภาพจริงๆครับ


        Enc Gfx8 เดือนที่ผ่านมา

        สอนดีมากครับ ตรงไหนดูรอบแรกไม่เข้าใจดูซ้ำก็เข้าใจได้ไม่ยากครับ ชอบที่ซอย video เป็นตอนๆ แต่ละตอนไม่ยาวเกินไป เนื้อหามีคุณภาพดีแล้วครับ