JavaScript Frameworks Masterclass

Refresh and extend your JavaScript with the language features frameworks rely on every day: block scoping, arrow functions, ES modules, and asynchronous code.

• 1.1 let, const, and Block Scope
  Preview 32:10
• 1.2 Arrow Functions, Destructuring, and Spread
  48:22
• 1.3 ES Modules: import and export
  41:05
• 1.4 Promises and async/await
  55:40
• 1.5 Array Methods: map, filter, reduce
  44:18
• 1.6 Exercise: Fetching and Transforming API Data
  52:30

Understand the mental model shared by every modern framework: breaking a UI into reusable components with inputs, outputs, and a predictable lifecycle.

• 2.1 What Is a Component?
  36:14
• 2.2 Composition, Props Down, Events Up
  42:50
• 2.3 Declarative Rendering and the Virtual DOM
  39:28
• 2.4 Thinking in Components: Breaking Down a Design
  28:45

Build your first React applications using JSX, props, and state, then add interactivity and side effects with hooks.

• 3.1 JSX and Rendering Elements
  45:30
• 3.2 Components and Props
  50:12
• 3.3 State with useState
  48:55
• 3.4 Handling Events and Forms
  52:40
• 3.5 Side Effects with useEffect
  58:18
• 3.6 Lists, Keys, and Conditional Rendering
  43:25
• 3.7 Project: Building an Interactive Task Board
  78:50

Scale React apps beyond a single component: share state across the tree, add navigation, and learn when to reach for a dedicated state library.

• 4.1 Lifting State Up and Prop Drilling
  40:15
• 4.2 The Context API with useContext
  47:30
• 4.3 Complex State with useReducer
  51:08
• 4.4 Global State with Redux Toolkit
  62:42
• 4.5 Client-Side Routing with React Router
  55:20
• 4.6 Project: Multi-Page Dashboard with Shared State
  82:35

Learn Vue 3 with the modern Composition API, building reactive components with single-file components and a transparent reactivity system.

• 5.1 Single-File Components and Templates
  44:10
• 5.2 Reactivity with ref and reactive
  49:35
• 5.3 The Composition API and setup
  53:48
• 5.4 Computed Properties and Watchers
  42:22
• 5.5 Vue Router and Pinia for State
  57:05
• 5.6 Project: Rebuilding the Task Board in Vue
  75:40

Explore Angular's opinionated, TypeScript-first approach: components, services, dependency injection, and reactive data streams with RxJS.

• 6.1 The Angular CLI and Project Structure
  46:18
• 6.2 Components, Templates, and Data Binding
  52:30
• 6.3 Services and Dependency Injection
  54:42
• 6.4 Observables and RxJS Basics
  59:15
• 6.5 The Angular Router and HttpClient
  50:08
• 6.6 Project: Rebuilding the Task Board in Angular
  80:25

Step back and evaluate React, Vue, and Angular across real criteria so you can make an informed, project-specific decision.

• 7.1 Architecture and Learning Curve Compared
  38:50
• 7.2 Performance, Bundle Size, and Tooling
  41:30
• 7.3 Ecosystem, Community, and Job Market
  35:14
• 7.4 A Decision Framework for Picking a Stack
  29:40

Write confidence-building tests for your components, from isolated unit tests to user-centric integration tests and end-to-end flows.

• 8.1 The Testing Pyramid for Front-End Apps
  33:20
• 8.2 Unit Testing with Vitest and Jest
  48:45
• 8.3 Component Testing with Testing Library
  55:30
• 8.4 End-to-End Tests with Playwright
  52:10
• 8.5 Exercise: Adding a Test Suite to the Task Board
  61:25

Understand what happens between your source code and the browser: bundling, environment configuration, optimization, and shipping to production.

• 9.1 How Bundlers Work: Vite and Webpack
  44:55
• 9.2 Environment Variables and Build Modes
  36:40
• 9.3 Code Splitting and Lazy Loading
  42:18
• 9.4 Deploying an SPA to Netlify and Vercel
  47:30
• 9.5 Continuous Deployment with GitHub Actions
  38:12

Bring everything together by building a complete single-page application in the framework of your choice, then deploying it live with tests and CI in place.

• 10.1 Planning Features and Component Architecture
  42:30
• 10.2 Building the UI and Routing
  95:20
• 10.3 Connecting to a REST API and Managing State
  88:45
• 10.4 Testing and Optimizing the Application
  72:15
• 10.5 Deploying and Presenting Your Project
  58:40