Babel Coder

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


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

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

เรียนรู้การใช้งาน 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
-
    Level 13
    Server Side Rendering
    -
      Level 14
      Redux
      -
        Level 15
        Normalizr
        -
          Level 16
          Redux Saga
          -
            Level 17
            Redux Form
            -
              Level 18
              Optimization
              -
                Level 19
                Docker
                -
                  Level 20
                  Universal JavaScript
                  -
                    Level 21
                    Deployment
                    -
                      Level 22
                      Workshop
                      -

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


                        Pongsakorn Kanapan10 วันที่ผ่านมา

                        สุดยอด


                        ไม่ระบุตัวตน27 วันที่ผ่านมา

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


                        Enc Gfx28 วันที่ผ่านมา

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