Learn By Example: ReactJS

Course Outline

• You, This course and us
  • You, This course and us (2:31)
• Introduction
  • What Is React? (9:18)
  • What Makes React Cool? (8:47)
• Install and Set up
  • Npm And Http Server Install (4:49)
  • Running Examples On The Http Server (2:41)
  • Accessing ReactJS Files (1:51)
  • Using SublimeText For Coding In React (2:16)
• React Basics
  • Example 1: HelloWorld (5:11)
  • The Virtual DOM (5:20)
  • Example 2: Nested Elements (5:25)
  • Terms In React (4:59)
  • Example3 Factory Functions (3:48)
• JSX and the Babel Compiler
  • What Is JSX (8:30)
  • The Babel REPL Environment (4:32)
  • Babel For Development And Production Environments (4:58)
  • Example 4: Elements With JSX (3:14)
• React Components
  • Introduction To Components (2:24)
  • Example 4: Stateless React Component (7:15)
  • Example 5: The Render Function (5:30)
• State and Props: Immutable Props
  • Introduction To State And Props (4:26)
  • Example 7: Props (3:48)
  • Example 8: Passing Props To Nested Components (5:02)
  • Example 9: Transferring Props To Child Components (5:27)
  • Example 10: The Spread Operator (4:48)
  • Example 11: DynamicTypesUsingProps (8:53)
  • Example 12: Validation With Prop Types (10:50)
  • Example 13: Accessing A Component's Children Using Props (4:45)
  • Example 14: Lambda Expressions As Children (4:45)
  • Example 15: Components And Child Expressions (7:52)
• State and Props: The Component as a State Machine
  • Components As State Machines (4:47)
  • Example 16: State (3:13)
  • Example 17: Update State (9:53)
  • Wxample 18: Accessing Previous State (5:22)
  • Properties Of State (6:10)
• Synthetic Events in React
  • Capture And Bubble Phases (7:48)
  • Example 19: Events (6:18)
  • The Synthetic Event (12:34)
  • Example 20: Working With Synthetic Events (3:52)
• Bringing It All Together in A Single Application
  • Example 21: The Comment App Visual Representation (9:09)
  • Example 22: The Comment App With Props (5:04)
  • Example 23: Adding A New Comment (9:30)
  • Example 23: Deleting Comments (5:43)
• The React Component Lifecycle
  • Component Lifecycle Methods: The Mounting Phase (5:59)
  • Example 24: The Mounting Phase Lifecycle Methods (8:35)
  • Example 25: The Unmounting Phase Lifecycle Methods (11:11)
  • Component Lifecycle Methods: The Updating Phase (3:24)
  • Example 26:The Updating Phase, componentWillReceiveProps() (9:15)
  • Example 27: The Updating Phase, shouldComponentUpdate() (12:13)
  • Example 28: The Updating Phase lifecycle method (7:06)
• Mixins
  • Mixins (4:12)
  • Example 29: Mixins (5:09)
  • Example 30: Nested And Multiple Mixins (6:30)
• ES Syntactic Sugar
  • ES6 Classes For React (3:23)
  • Example 31: ES6 Classes And The React.Create Class()Function (11:09)
• Forms
  • Introduction To Forms (2:18)
  • Example 32: Controlled Components (7:04)
  • Example 32: Controlled Components Continued (6:34)
  • Example 33: Componentize Forms (7:01)
  • Example 33: Componentize Forms Continued (4:26)
  • Example 34: Form Validation (10:49)
• Miscellaneous
  • Example 35: Accessing Native DOM Elements (7:07)
  • Example 36: Accessing DOM Elements In A React Component (5:28)
  • Example 36: The React Context (7:43)
  • DOM Reconciliation (9:25)
• React In Production
  • React In Production Setting Up Webpack (8:27)
  • React In Production The Babel Loader (6:07)
  • React In Production Watching For App Changes (3:04)
• Animations
  • Animation Add Ons In React (2:01)
  • Example 38: The React Transition Group (9:06)
  • Example 38: The React Transition Group Continued (5:54)
  • Example 39: The React CSS Transition Group (6:23)
• Routing
  • Example 40: React Router: Basic Routing (5:48)
  • Example 40: React Router: Routing With Links (6:10)
• One Last Thing…
  • The Webpack Dev Server (2:23)