Section 1 : Let's Dive In!
|
Lecture 1 | INTRODUCTION TO BRAINMEASURES PROCTOR SYSTEM | |
|
Lecture 2 | Our First App copy | 00:07:55 Duration |
|
Lecture 3 | Critical Questions! | 00:12:38 Duration |
|
Lecture 4 | Installing Node JS | 00:03:41 Duration |
|
Lecture 5 | Important Update About React App Generation | |
|
Lecture 6 | Generating a React Project | 00:05:10 Duration |
|
Lecture 7 | Why Create React App | 00:05:25 Duration |
|
Lecture 8 | Exploring a Create-React-App Project | 00:04:08 Duration |
|
Lecture 9 | Starting and Stopping a React App | 00:03:37 Duration |
|
Lecture 10 | Javascript Module Systems | 00:07:55 Duration |
|
Lecture 11 | Displaying Content with Functional Components | 00:04:56 Duration |
|
Lecture 12 | Course Resources | |
|
Lecture 13 | Common Questions About My Environment |
Section 2 : Building Content with JSX
|
Lecture 1 | What is JSX | 00:05:12 Duration |
|
Lecture 2 | Converting HTML to JSX | 00:05:39 Duration |
|
Lecture 3 | Inline Styling with JSX | 00:03:13 Duration |
|
Lecture 4 | Converting Styling to JSX Format | 00:03:09 Duration |
|
Lecture 5 | Class vs ClassName | 00:02:19 Duration |
|
Lecture 6 | Referencing JS Variables in JSX | 00:02:55 Duration |
|
Lecture 7 | Values JSX Can't Show | 00:05:03 Duration |
|
Lecture 8 | Finding Forbidden Property Names | |
|
Lecture 9 | Exercise Introduction | 00:01:37 Duration |
|
Lecture 10 | JSX Exercise Solution | 00:01:09 Duration |
Section 3 : Communicating with Props
|
Lecture 1 | Three Tenets of Components | 00:02:54 Duration |
|
Lecture 2 | Application Overview | 00:02:50 Duration |
|
Lecture 3 | Semantic UI CDN Link | |
|
Lecture 4 | Getting Some Free Styling | 00:07:16 Duration |
|
Lecture 5 | Naive Component Approach | 00:04:33 Duration |
|
Lecture 6 | Important Note about Faker Images | |
|
Lecture 7 | Specifying Images in JSX | 00:06:06 Duration |
|
Lecture 8 | Duplicating a Single Component | 00:01:55 Duration |
|
Lecture 9 | Extracting JSX to New Components | 00:05:01 Duration |
|
Lecture 10 | Component Nesting | 00:06:42 Duration |
|
Lecture 11 | React's Props System | 00:03:42 Duration |
|
Lecture 12 | Passing and Receiving Props | 00:07:06 Duration |
|
Lecture 13 | Passing Multiple Props | 00:03:11 Duration |
|
Lecture 14 | Passing Props - Solutions | 00:06:07 Duration |
|
Lecture 15 | Component Reuse | 00:03:25 Duration |
|
Lecture 16 | Implementing an Approval Card | 00:05:52 Duration |
|
Lecture 17 | Showing Custom Children | 00:05:47 Duration |
|
Lecture 18 | Component Reuse | 00:02:46 Duration |
|
Lecture 19 | Exercise - Props | 00:01:32 Duration |
|
Lecture 20 | Props Exercise Solution | 00:02:28 Duration |
|
Lecture 21 | Exercise - Children | 00:02:01 Duration |
|
Lecture 22 | Children Exercise Solution | 00:02:35 Duration |
Section 4 : Structuring Apps with Class-Based Components
|
Lecture 1 | Class-Based Components | 00:06:04 Duration |
|
Lecture 2 | Application Overview | 00:04:01 Duration |
|
Lecture 3 | Scaffolding the App | 00:05:58 Duration |
|
Lecture 4 | Getting a Users Physical Location | 00:05:56 Duration |
|
Lecture 5 | Resetting Geolocation Preferences | 00:02:33 Duration |
|
Lecture 6 | Handling Async Operations with Functional Components | 00:03:54 Duration |
|
Lecture 7 | Refactoring from Functional to Class Components | 00:05:12 Duration |
Section 5 : State in React Components
|
Lecture 1 | The Rules of State | 00:06:07 Duration |
|
Lecture 2 | Initializing State Through Constructors | 00:06:17 Duration |
|
Lecture 3 | Updating State Properties | 00:07:44 Duration |
|
Lecture 4 | App Lifecycle Walkthrough | 00:07:06 Duration |
|
Lecture 5 | Handling Errors Gracefully | 00:06:21 Duration |
|
Lecture 6 | Conditionally Rendering Content | 00:05:38 Duration |
Section 6 : Understanding Lifecycle Methods
|
Lecture 1 | Introducing Lifecycle Methods | 00:07:15 Duration |
|
Lecture 2 | Why Lifecycle Methods | 00:06:36 Duration |
|
Lecture 3 | Refactoring Data Loading to Lifecycle Methods | 00:02:45 Duration |
|
Lecture 4 | Alternate State Initialization | 00:05:20 Duration |
|
Lecture 5 | Passing State as Props | 00:04:19 Duration |
|
Lecture 6 | Determining Season | 00:05:34 Duration |
|
Lecture 7 | Ternary Expressions in JSX | 00:03:39 Duration |
|
Lecture 8 | Icons Not Loading and CORS errors | |
|
Lecture 9 | Showing Icons | 00:04:34 Duration |
|
Lecture 10 | Extracting Options to Config Objects | 00:04:14 Duration |
|
Lecture 11 | Adding Some Styling | 00:09:32 Duration |
|
Lecture 12 | Showing a Loading Spinner | 00:06:20 Duration |
|
Lecture 13 | Specifying Default Props | 00:04:52 Duration |
|
Lecture 14 | Avoiding Conditionals in Render | 00:05:23 Duration |
|
Lecture 15 | Breather and Review | 00:08:17 Duration |
|
Lecture 16 | Exercise Solution - Class-Based Components | 00:02:02 Duration |
|
Lecture 17 | Updating Components with State | 00:03:43 Duration |
Section 7 : Handling User Input with Forms and Events
|
Lecture 1 | App Overview | 00:05:03 Duration |
|
Lecture 2 | Component Design | 00:03:39 Duration |
|
Lecture 3 | Adding Some Project Structure | 00:03:53 Duration |
|
Lecture 4 | Adding Some Project Structure | 00:04:30 Duration |
|
Lecture 5 | Showing Forms to the User | 00:03:53 Duration |
|
Lecture 6 | Adding a Touch of Style | 00:03:42 Duration |
|
Lecture 7 | Creating Event Handlers | 00:07:42 Duration |
|
Lecture 8 | Alternate Event Handler Syntax | 00:02:29 Duration |
|
Lecture 9 | Uncontrolled vs Controlled Elements | 00:03:39 Duration |
|
Lecture 10 | More on Controlled Elements | 00:10:27 Duration |
|
Lecture 11 | Exercise Overview - Receiving Values | 00:01:35 Duration |
|
Lecture 12 | Exercise Solution | 00:01:24 Duration |
|
Lecture 13 | Handling Form Submittal | 00:03:44 Duration |
|
Lecture 14 | Understanding 'this' In Javascript | 00:11:27 Duration |
|
Lecture 15 | Solving Context Issues | 00:07:20 Duration |
|
Lecture 16 | Communicating Child to Parent | 00:03:37 Duration |
|
Lecture 17 | Invoking Callbacks in Children | 00:04:43 Duration |
Section 8 : Making API Requests with React
|
Lecture 1 | Fetching Data | 00:04:30 Duration |
|
Lecture 2 | Axios vs Fetch | 00:04:41 Duration |
|
Lecture 3 | Viewing Request Results | 00:08:16 Duration |
|
Lecture 4 | Handling Requests with Async Await | 00:07:38 Duration |
|
Lecture 5 | Setting State After Async Requests | 00:06:19 Duration |
|
Lecture 6 | Binding Callbacks | 00:02:17 Duration |
|
Lecture 7 | Creating Custom Clients | 00:05:28 Duration |
Section 9 : Building Lists of Records
|
Lecture 1 | Rendering Lists | 00:02:41 Duration |
|
Lecture 2 | Review of Map Statements | 00:05:40 Duration |
|
Lecture 3 | Rendering Lists of Components | 00:02:55 Duration |
|
Lecture 4 | The Purpose of Keys in Lists | 00:05:32 Duration |
|
Lecture 5 | Implementing Keys in Lists | 00:04:27 Duration |
|
Lecture 6 | Exercise Overview - List Building | 00:01:07 Duration |
|
Lecture 7 | Exercise Solution | 00:01:40 Duration |
Section 10 : Using Ref's for DOM Access
|
Lecture 1 | Grid CSS | 00:06:20 Duration |
|
Lecture 2 | Issues with Grid CSS | 00:04:20 Duration |
|
Lecture 3 | Creating an Image Card Component | 00:05:16 Duration |
|
Lecture 4 | Accessing the DOM with Refs | 00:03:25 Duration |
|
Lecture 5 | Accessing Image Height | 00:07:43 Duration |
|
Lecture 6 | Callbacks on Image Load | 00:02:53 Duration |
|
Lecture 7 | Dynamic Spans | 00:07:19 Duration |
|
Lecture 8 | App Review | 00:03:55 Duration |
Section 11 : Let's Test Your React Mastery!
|
Lecture 1 | App Overview | 00:02:38 Duration |
|
Lecture 2 | Component Design | 00:03:06 Duration |
|
Lecture 3 | Scaffolding the App | 00:06:17 Duration |
|
Lecture 4 | Reminder on Event Handlers | 00:06:35 Duration |
|
Lecture 5 | Handling Form Submittal | 00:03:42 Duration |
|
Lecture 6 | Accessing the Youtube API | 00:09:12 Duration |
|
Lecture 7 | Axios Version Bug & 400 Required Parameter part Error | |
|
Lecture 8 | Searching for Videos | 00:06:54 Duration |
|
Lecture 9 | Adding a Video Type | |
|
Lecture 10 | Putting it All Together | 00:06:54 Duration |
|
Lecture 11 | Updating State with Fetched Data | 00:04:45 Duration |
|
Lecture 12 | Passing State as Props | 00:03:49 Duration |
|
Lecture 13 | Rendering a List of Videos | 00:04:41 Duration |
|
Lecture 14 | Rendering Video Thumbnails | 00:04:41 Duration |
|
Lecture 15 | Styling a List | 00:08:44 Duration |
|
Lecture 16 | Communicating from Child to Parent | 00:05:05 Duration |
|
Lecture 17 | Deeply Nested Callbacks | 00:06:00 Duration |
|
Lecture 18 | Conditional Rendering | 00:05:53 Duration |
|
Lecture 19 | Styling the VideoDetail | 00:03:10 Duration |
|
Lecture 20 | Displaying a Video Player | 00:08:15 Duration |
|
Lecture 21 | Fixing a Few Warnings | 00:06:39 Duration |
|
Lecture 22 | Defaulting Video Selection | 00:04:52 Duration |
Section 12 : Understanding Hooks in React
|
Lecture 1 | React Hooks | 00:03:37 Duration |
|
Lecture 2 | Important Note | |
|
Lecture 3 | App Architecture | 00:06:02 Duration |
|
Lecture 4 | Communicating the Items Prop | 00:04:50 Duration |
|
Lecture 5 | Building and Styling the Accordion | 00:06:12 Duration |
|
Lecture 6 | Helper Functions in Function Components | 00:05:16 Duration |
|
Lecture 7 | Introducing useState | 00:03:34 Duration |
|
Lecture 8 | Understanding useState | 00:08:46 Duration |
|
Lecture 9 | Setter Functions | 00:01:37 Duration |
|
Lecture 10 | Expanding the Accordion | 00:03:12 Duration |
|
Lecture 11 | Exercise Overview | 00:00:49 Duration |
|
Lecture 12 | Exercise Solution | 00:01:53 Duration |
|
Lecture 13 | Creating Additional Widgets | 00:02:46 Duration |
|
Lecture 14 | The Search Widget Architecture | 00:04:30 Duration |
|
Lecture 15 | Scaffolding the Widget | 00:01:41 Duration |
|
Lecture 16 | Text Inputs with Hooks | 00:04:28 Duration |
|
Lecture 17 | When do we Search | 00:06:46 Duration |
|
Lecture 18 | The useEffect Hook | 00:06:41 Duration |
|
Lecture 19 | Testing Execution | 00:04:03 Duration |
|
Lecture 20 | Async Code in useEffect | 00:07:21 Duration |
|
Lecture 21 | Executing the Request from useEffect | 00:03:42 Duration |
|
Lecture 22 | Default Search Terms | 00:04:55 Duration |
|
Lecture 23 | List Building! | 00:03:56 Duration |
|
Lecture 24 | XSS Attacks in React | 00:07:05 Duration |
|
Lecture 25 | XSS Server Code | |
|
Lecture 26 | Linking to a Wikipedia Page | 00:03:40 Duration |
|
Lecture 27 | Only Search with a Term | 00:01:01 Duration |
|
Lecture 28 | Throttling API Requests | 00:04:05 Duration |
|
Lecture 29 | Reminder on setTimeout | 00:03:32 Duration |
|
Lecture 30 | useEffect's Cleanup Function | 00:06:08 Duration |
|
Lecture 31 | Implementing a Delayed Request | 00:02:59 Duration |
|
Lecture 32 | Searching on Initial Render | 00:02:25 Duration |
|
Lecture 33 | Edge Case When Clearing Out Input Form | |
|
Lecture 34 | Optional Video - Fixing a Warning | 00:20:22 Duration |
|
Lecture 35 | Dropdown Architecture | 00:03:26 Duration |
|
Lecture 36 | Scaffolding the Dropdown | 00:03:07 Duration |
|
Lecture 37 | A Lot of JSX | 00:05:17 Duration |
|
Lecture 38 | Selection State | 00:06:17 Duration |
|
Lecture 39 | Filtering the Option List | 00:01:45 Duration |
|
Lecture 40 | Hiding and Showing the Option List | 00:07:41 Duration |
|
Lecture 41 | Err | 00:03:59 Duration |
|
Lecture 42 | Reminder on Event Bubbling | 00:04:35 Duration |
|
Lecture 43 | Applying What We've Learned | 00:03:32 Duration |
|
Lecture 44 | Binding an Event Handler | 00:02:47 Duration |
|
Lecture 45 | Why Stay Open! | 00:05:11 Duration |
|
Lecture 46 | Which Element Was Clicked | 00:04:21 Duration |
|
Lecture 47 | Important Update for React v17 | |
|
Lecture 48 | Making use of useRef | 00:04:13 Duration |
|
Lecture 49 | Body Event Listener Cleanup | 00:06:43 Duration |
|
Lecture 50 | The Translate Widget | 00:04:05 Duration |
|
Lecture 51 | Scaffolding the Translate Component | 00:05:04 Duration |
|
Lecture 52 | Adding the Language Input | 00:03:43 Duration |
|
Lecture 53 | Understanding the Convert Component | 00:06:25 Duration |
|
Lecture 54 | Google Translate API Key | |
|
Lecture 55 | Building the Convert Component | 00:03:43 Duration |
|
Lecture 56 | Using the Google Translate API | 00:06:31 Duration |
|
Lecture 57 | Displaying Translated Text | 00:05:31 Duration |
|
Lecture 58 | Debouncing Translation Updates | 00:06:45 Duration |
|
Lecture 59 | Reviewing UseState and UseEffect | 00:00:56 Duration |
|
Lecture 60 | Exercise Solution | 00:01:48 Duration |
Section 13 : Navigation From Scratch
|
Lecture 1 | Navigation in React | 00:02:23 Duration |
|
Lecture 2 | Basic Component Routing | 00:07:10 Duration |
|
Lecture 3 | Building a Reusable Route Component | 00:06:50 Duration |
|
Lecture 4 | Implementing a Header for Navigation | 00:02:42 Duration |
|
Lecture 5 | Handling Navigation | 00:03:57 Duration |
|
Lecture 6 | Building a Link | 00:05:21 Duration |
|
Lecture 7 | Changing the URL | 00:03:11 Duration |
|
Lecture 8 | Detecting Navigation | 00:04:02 Duration |
|
Lecture 9 | Updating the Route | 00:04:25 Duration |
|
Lecture 10 | Handling Command Clicks | 00:02:03 Duration |
Section 14 : Hooks in Practice
|
Lecture 1 | Project Overview | 00:02:24 Duration |
|
Lecture 2 | Refactoring the SearchBar | 00:08:06 Duration |
|
Lecture 3 | Refactoring the App | |
|
Lecture 4 | Removing a Callback | 00:02:53 Duration |
|
Lecture 5 | Overview on Custom Hooks | 00:05:42 Duration |
|
Lecture 6 | Process for Building Custom Hooks | 00:06:39 Duration |
|
Lecture 7 | Extracting Video Logic | 00:06:52 Duration |
|
Lecture 8 | Using the Custom Hook | 00:05:29 Duration |
|
Lecture 9 | Exercise Overview - Custom Hooks | 00:01:14 Duration |
|
Lecture 10 | Exercise Solution | 00:01:40 Duration |
Section 15 : Deploying a React App
|
Lecture 1 | Deployment Overview | 00:03:29 Duration |
|
Lecture 2 | Deployment with Vercel | 00:06:07 Duration |
|
Lecture 3 | Deployment with Netlify | 00:07:09 Duration |
Section 16 : On We Go
|
Lecture 1 | Introduction to Redux | 00:03:23 Duration |
|
Lecture 2 | Redux by Analogy | 00:07:06 Duration |
|
Lecture 3 | A Bit More Analogy | 00:05:20 Duration |
|
Lecture 4 | Finishing the Analogy | 00:09:24 Duration |
|
Lecture 5 | Mapping the Analogy to Redux | 00:05:44 Duration |
|
Lecture 6 | Modeling with Redux | 00:08:44 Duration |
|
Lecture 7 | Creating Reducers | 00:11:45 Duration |
|
Lecture 8 | Rules of Reducers | 00:04:56 Duration |
|
Lecture 9 | Testing Our Example | 00:08:27 Duration |
|
Lecture 10 | Important Redux Notes | 00:07:33 Duration |
|
Lecture 11 | Finished Insurance Policy Code |
Section 17 : Integrating React with Redux
|
Lecture 1 | React Cooperating with Redux | 00:01:40 Duration |
|
Lecture 2 | React, Redux, and | 00:05:34 Duration |
|
Lecture 3 | Design of the Redux App | 00:04:36 Duration |
|
Lecture 4 | How React-Redux Works | 00:06:44 Duration |
|
Lecture 5 | Redux Project Structure | 00:04:07 Duration |
|
Lecture 6 | Named vs Default Exports | 00:03:51 Duration |
|
Lecture 7 | Building Reducers | 00:05:13 Duration |
|
Lecture 8 | Wiring Up the Provider | 00:06:07 Duration |
|
Lecture 9 | The Connect Function | 00:05:54 Duration |
|
Lecture 10 | Configuring Connect with MapStateToProps | 00:06:43 Duration |
|
Lecture 11 | Building a List with Redux Data | 00:07:06 Duration |
|
Lecture 12 | Solution to Extracting More Data | |
|
Lecture 13 | Calling Action Creators from Components | 00:07:22 Duration |
|
Lecture 14 | Redux is Not Magic! | 00:06:04 Duration |
|
Lecture 15 | Functional Components with Connect | 00:06:33 Duration |
|
Lecture 16 | Conditional Rendering | 00:05:15 Duration |
|
Lecture 17 | Exercise Solution - Connecting Components to Redux | 00:06:29 Duration |
Section 18 : Async Actions with Redux Thunk
|
Lecture 1 | App Overview and Goals | 00:07:37 Duration |
|
Lecture 2 | Initial App Setup | 00:06:17 Duration |
|
Lecture 3 | Tricking Redux with Dummy Reducers | 00:03:16 Duration |
|
Lecture 4 | A Touch More Setup | 00:02:25 Duration |
|
Lecture 5 | How to Fetch Data in a Redux App | 00:06:00 Duration |
|
Lecture 6 | Wiring Up an Action Creator | 00:03:01 Duration |
|
Lecture 7 | Making a Request From an Action Creator | 00:05:13 Duration |
|
Lecture 8 | Understanding Async Action Creators | 00:08:57 Duration |
|
Lecture 9 | More on Async Action Creators | 00:05:48 Duration |
|
Lecture 10 | Middlewares in Redux | 00:03:52 Duration |
|
Lecture 11 | Behind the Scenes of Redux Thunk | 00:10:07 Duration |
|
Lecture 12 | Shortened Syntax with Redux Thunk | 00:06:44 Duration |
Section 19 : Redux Store Design
|
Lecture 1 | Rules of Reducers | 00:02:54 Duration |
|
Lecture 2 | Return Values from Reducers | 00:03:08 Duration |
|
Lecture 3 | Argument Values | 00:05:04 Duration |
|
Lecture 4 | Pure Reducers | 00:02:35 Duration |
|
Lecture 5 | Mutations in Javascript | 00:06:50 Duration |
|
Lecture 6 | Equality of Arrays and Objects | 00:02:40 Duration |
|
Lecture 7 | A Misleading Rule | 00:12:24 Duration |
|
Lecture 8 | Safe State Updates in Reducers | 00:10:00 Duration |
|
Lecture 9 | Switch Statements in Reducers | 00:04:08 Duration |
|
Lecture 10 | Switch Statements in Reducers | 00:04:08 Duration |
|
Lecture 11 | Reducer Case Solution | |
|
Lecture 12 | Dispatching Correct Values | 00:06:44 Duration |
|
Lecture 13 | List Building! | 00:04:00 Duration |
|
Lecture 14 | Displaying Users | 00:07:39 Duration |
|
Lecture 15 | Fetching Singular Records | 00:04:10 Duration |
|
Lecture 16 | Displaying the User Header | 00:05:08 Duration |
|
Lecture 17 | Finding Relevant Users | 00:07:49 Duration |
|
Lecture 18 | Extracting Logic to MapStateToProps | 00:07:47 Duration |
|
Lecture 19 | That's the Issue! | 00:02:38 Duration |
|
Lecture 20 | Memoizing Functions | 00:06:49 Duration |
|
Lecture 21 | Memoizing Functions | 00:06:55 Duration |
|
Lecture 22 | Memoization Issues | 00:06:49 Duration |
|
Lecture 23 | One Time Memoization | 00:04:47 Duration |
|
Lecture 24 | Alternate Overfetching Solution | 00:04:25 Duration |
|
Lecture 25 | Action Creators in Action Creators! | 00:07:43 Duration |
|
Lecture 26 | Finding Unique User Ids | 00:08:36 Duration |
|
Lecture 27 | Quick Refactor with Chain | 00:04:12 Duration |
|
Lecture 28 | App Wrapup | 00:03:35 Duration |
Section 20 : Navigation with React Router
|
Lecture 1 | App Outline | 00:06:16 Duration |
|
Lecture 2 | Mockups in Detail | 00:05:14 Duration |
|
Lecture 3 | App Challenges | 00:05:09 Duration |
|
Lecture 4 | Initial Setup | 00:02:46 Duration |
|
Lecture 5 | Introducing React Router | 00:08:06 Duration |
|
Lecture 6 | How React Router Works | 00:03:57 Duration |
|
Lecture 7 | How Paths Get Matched | 00:08:35 Duration |
|
Lecture 8 | How to Not Navigate with React Router | 00:04:56 Duration |
|
Lecture 9 | Navigating with React Router | 00:05:09 Duration |
|
Lecture 10 | [Optional] - Different Router Types | 00:18:18 Duration |
|
Lecture 11 | Component Scaffolding | 00:05:51 Duration |
|
Lecture 12 | Wiring Up Routes | 00:04:09 Duration |
|
Lecture 13 | Always Visible Components | 00:02:20 Duration |
|
Lecture 14 | Connecting the Header | 00:05:51 Duration |
|
Lecture 15 | Links Inside Routers | 00:02:45 Duration |
|
Lecture 16 | Exercise Overview - Additional Routes | 00:01:20 Duration |
|
Lecture 17 | Exercise Solution | 00:02:12 Duration |
Section 21 : Handling Authentication with React
|
Lecture 1 | OAuth-Based Authentication | 00:09:03 Duration |
|
Lecture 2 | OAuth for Servers vs Browser Apps | 00:05:34 Duration |
|
Lecture 3 | Creating OAuth Credentials | 00:05:12 Duration |
|
Lecture 4 | Wiring Up the Google API Library | 00:08:54 Duration |
|
Lecture 5 | Sending a User Into the OAuth Flow | 00:05:48 Duration |
|
Lecture 6 | Rendering Authentication Status | 00:09:48 Duration |
|
Lecture 7 | Updating Auth State | 00:07:15 Duration |
|
Lecture 8 | Displaying Sign In and Sign Out Buttons | 00:03:22 Duration |
|
Lecture 9 | On-Demand Sign In and Sign Out | 00:03:02 Duration |
|
Lecture 10 | Redux Architecture Design | 00:09:30 Duration |
|
Lecture 11 | Redux Setup | 00:04:13 Duration |
|
Lecture 12 | Connecting Auth with Action Creators | 00:04:35 Duration |
|
Lecture 13 | Building the Auth Reducer | 00:05:16 Duration |
|
Lecture 14 | Handling Auth Status Through Redux | 00:05:25 Duration |
|
Lecture 15 | Handling Auth Status Through Redux | 00:05:25 Duration |
|
Lecture 16 | Fixed Action Types | 00:05:34 Duration |
|
Lecture 17 | Recording the User's ID | 00:06:08 Duration |
Section 22 : Redux Dev Tools
|
Lecture 1 | Using Redux Dev Tools to Inspect the Store | 00:09:42 Duration |
|
Lecture 2 | Debug Sessions with Redux Dev Tools | 00:04:14 Duration |
Section 23 : Handling Forms with Redux Form
|
Lecture 1 | Forms with Redux Form | 00:06:10 Duration |
|
Lecture 2 | Useful Redux Form Examples | 00:02:41 Duration |
|
Lecture 3 | Connecting Redux Form | 00:04:05 Duration |
|
Lecture 4 | Creating Forms | |
|
Lecture 5 | Automatically Handling Events | 00:09:23 Duration |
|
Lecture 6 | Customizing Form Fields | 00:03:51 Duration |
|
Lecture 7 | Handling Form Submission | 00:05:34 Duration |
|
Lecture 8 | Validation of Form Inputs | 00:06:44 Duration |
|
Lecture 9 | Displaying Validation Messages | 00:05:25 Duration |
|
Lecture 10 | Showing Errors on Touch | 00:07:22 Duration |
|
Lecture 11 | Highlighting Errored Fields | 00:03:28 Duration |
Section 24 : REST-Based React Apps
|
Lecture 1 | Creating Streams | 00:02:46 Duration |
|
Lecture 2 | REST-ful Conventions | 00:04:48 Duration |
|
Lecture 3 | Setting Up an API Server | 00:06:22 Duration |
|
Lecture 4 | Creating Streams Through Action Creators | 00:05:36 Duration |
|
Lecture 5 | Creating a Stream with REST Conventions | 00:06:00 Duration |
|
Lecture 6 | Dispatching Actions After Stream Creation | 00:02:53 Duration |
|
Lecture 7 | Bulk Action Creators | 00:12:19 Duration |
|
Lecture 8 | Object-Based Reducers | 00:07:42 Duration |
|
Lecture 9 | Key Interpolation Syntax | 00:07:46 Duration |
|
Lecture 10 | Handling Fetching, Creating, and Updating | 00:06:01 Duration |
|
Lecture 11 | Deleting Properties with Omit | 00:03:11 Duration |
|
Lecture 12 | Merging Lists of Records | 00:07:43 Duration |
|
Lecture 13 | Fetching a List of All Streams | 00:03:25 Duration |
|
Lecture 14 | Rendering All Streams | 00:06:05 Duration |
|
Lecture 15 | Associating Streams with Users | 00:06:25 Duration |
|
Lecture 16 | Conditionally Showing Edit and Delete | 00:07:05 Duration |
|
Lecture 17 | Linking to Stream Creation | |
|
Lecture 18 | When to Navigate Users | 00:05:24 Duration |
|
Lecture 19 | History References | 00:06:11 Duration |
|
Lecture 20 | History Object Deprecation Warning | |
|
Lecture 21 | Creating a Browser History Object | 00:04:09 Duration |
|
Lecture 22 | Implementing Programmatic Navigation | 00:02:10 Duration |
|
Lecture 23 | Manually Changing API Records | 00:02:33 Duration |
|
Lecture 24 | URL-Based Selection | 00:06:32 Duration |
|
Lecture 25 | Wildcard Navigation | 00:05:18 Duration |
|
Lecture 26 | More on Route Params | 00:04:36 Duration |
|
Lecture 27 | Selecting Records from State | 00:08:04 Duration |
|
Lecture 28 | Component Isolation with React Router | 00:04:50 Duration |
|
Lecture 29 | Fetching a Stream for Edit Stream | 00:05:56 Duration |
|
Lecture 30 | Real Code Reuse! | 00:08:21 Duration |
|
Lecture 31 | Refactoring Stream Creation | 00:05:23 Duration |
|
Lecture 32 | Setting Initial Values | 00:09:56 Duration |
|
Lecture 33 | Avoiding Changes to Properties | 00:08:07 Duration |
|
Lecture 34 | Edit Form Submission | 00:04:04 Duration |
|
Lecture 35 | PUT vs PATCH Requests | 00:05:43 Duration |
Section 25 : Using React Portals
|
Lecture 1 | Why Use Portals | 00:07:17 Duration |
|
Lecture 2 | More on Using Portals | 00:13:10 Duration |
|
Lecture 3 | Creating a Portal | 00:07:36 Duration |
|
Lecture 4 | Hiding a Modal | 00:08:04 Duration |
|
Lecture 5 | Making the Modal Reusable | 00:05:41 Duration |
|
Lecture 6 | React Fragments | 00:04:51 Duration |
|
Lecture 7 | OnDismiss From the Parent | 00:03:09 Duration |
|
Lecture 8 | Reminder on Path Params | 00:04:20 Duration |
|
Lecture 9 | Fetching the Deletion Stream | 00:07:24 Duration |
|
Lecture 10 | Conditionally Showing Stream Details | 00:06:55 Duration |
|
Lecture 11 | Deleting a Stream | 00:07:50 Duration |
|
Lecture 12 | Exercise Overview - Closing the Modal | 00:00:55 Duration |
|
Lecture 13 | Exercise Solution | 00:01:09 Duration |
Section 26 : Implementing Streaming Video
|
Lecture 1 | Viewing a Stream | 00:03:43 Duration |
|
Lecture 2 | Switches with React-Router | 00:04:02 Duration |
|
Lecture 3 | Showing a Stream | 00:05:27 Duration |
|
Lecture 4 | RTMP NodeMediaServer is not a constructor error fix | |
|
Lecture 5 | RTMP Server Setup | 00:06:18 Duration |
|
Lecture 6 | OBS Installation | 00:02:30 Duration |
|
Lecture 7 | OBS Scene Setup | 00:04:31 Duration |
|
Lecture 8 | Video Player Setup | 00:03:37 Duration |
|
Lecture 9 | Implementing FLV JS | 00:04:03 Duration |
|
Lecture 10 | Creating a FLV Player | 00:06:33 Duration |
|
Lecture 11 | Optional Player Building | 00:07:19 Duration |
|
Lecture 12 | It Works! | 00:03:15 Duration |
|
Lecture 13 | Cleaning Up with ComponentWillUnmount | 00:04:26 Duration |
|
Lecture 14 | Exercise Overview - Adding Some Filtering | 00:00:52 Duration |
|
Lecture 15 | Exercise Solution | 00:01:20 Duration |
Section 27 : The Context System with React
|
Lecture 1 | The Context System | 00:03:28 Duration |
|
Lecture 2 | An App with Context | 00:04:20 Duration |
|
Lecture 3 | App Generation | 00:02:57 Duration |
|
Lecture 4 | Selecting a Language | 00:03:28 Duration |
|
Lecture 5 | A Touch More Setup | 00:04:03 Duration |
|
Lecture 6 | Getting Data Out of Context | 00:04:06 Duration |
|
Lecture 7 | Creating Context Objects | 00:08:28 Duration |
|
Lecture 8 | Consuming the Context Value | 00:05:02 Duration |
|
Lecture 9 | The Context Provider | 00:04:10 Duration |
|
Lecture 10 | Gotchas Around Providers | 00:09:11 Duration |
|
Lecture 11 | Accessing Data with Consumers | 00:05:45 Duration |
|
Lecture 12 | Pulling From Multiple Contexts | 00:09:01 Duration |
|
Lecture 13 | Exercise Overview - Consuming Context Values From Providers | 00:02:04 Duration |
|
Lecture 14 | Exercise Solution | 00:02:04 Duration |
Section 28 : Replacing Redux with Context
|
Lecture 1 | Replacing Redux with Context | 00:05:53 Duration |
|
Lecture 2 | Creating a Store Component | 00:04:08 Duration |
|
Lecture 3 | Implementing a Language Store | 00:07:10 Duration |
|
Lecture 4 | Rendering the Language Store | 00:03:45 Duration |
|
Lecture 5 | Connecting the Selector to the Store | 00:03:05 Duration |
|
Lecture 6 | Connecting the Field and Button to the Store | 00:03:04 Duration |
|
Lecture 7 | Context vs Redux Recap | 00:03:41 Duration |
|
Lecture 8 | That's All For Now |
Section 29 : Working with Older Versions of React
|
Lecture 1 | Note on the Following Videos | |
|
Lecture 2 | Introduction - Github Links for Project Files! | 00:03:39 Duration |
|
Lecture 3 | Completed Projects - Github Links | |
|
Lecture 4 | Project Setup | 00:02:32 Duration |
|
Lecture 5 | A Taste of JSX | 00:11:29 Duration |
|
Lecture 6 | More on JSX | 00:04:35 Duration |
|
Lecture 7 | Quick Note - Getting Different Error Messages | |
|
Lecture 8 | ES6 Import Statements | 00:03:59 Duration |
|
Lecture 9 | ReactDOM vs React | 00:02:27 Duration |
|
Lecture 10 | Differences Between Component Instances and Component Classes | 00:03:38 Duration |
|
Lecture 11 | Render Targets | 00:05:53 Duration |
|
Lecture 12 | Component Structure | 00:06:26 Duration |
|
Lecture 13 | Youtube Search API Signup | 00:06:39 Duration |
|
Lecture 14 | Export Statements | 00:08:40 Duration |
|
Lecture 15 | Class-Based Components | 00:08:11 Duration |
|
Lecture 16 | Handling User Events | 00:09:31 Duration |
|
Lecture 17 | Introduction to State | 00:05:13 Duration |
|
Lecture 18 | More on State | 00:06:05 Duration |
|
Lecture 19 | Controlled Components | 00:07:48 Duration |
|
Lecture 20 | Breather and Review | 00:03:37 Duration |
Section 30 : Ajax Requests with React
|
Lecture 1 | Youtube Search Response | 00:04:26 Duration |
|
Lecture 2 | Refactoring Functional Components to Class Components | 00:07:44 Duration |
|
Lecture 3 | Props | 00:07:44 Duration |
|
Lecture 4 | Building Lists with Map | 00:07:06 Duration |
|
Lecture 5 | List Item Keys | 00:03:55 Duration |
|
Lecture 6 | Video List Items | 00:07:54 Duration |
|
Lecture 7 | Detail Component and Template Strings | 00:07:05 Duration |
|
Lecture 8 | Handling Null Props | 00:04:42 Duration |
|
Lecture 9 | Video Selection | 00:11:40 Duration |
|
Lecture 10 | Styling with CSS | 00:03:43 Duration |
|
Lecture 11 | Searching for Videos | 00:07:52 Duration |
|
Lecture 12 | Throttling Search Term Input | 00:05:47 Duration |
|
Lecture 13 | React Wrapup | 00:05:25 Duration |
Section 31 : Modeling Application State
|
Lecture 1 | Foreword on Redux | 00:02:17 Duration |
|
Lecture 2 | What is Redux | 00:02:45 Duration |
|
Lecture 3 | More on Redux | 00:03:42 Duration |
|
Lecture 4 | Even More on Redux! | 00:04:20 Duration |
Section 32 : Managing App State with Redux
|
Lecture 1 | Putting Redux to Practice | |
|
Lecture 2 | Reducers | 00:07:43 Duration |
|
Lecture 3 | Containers - Connecting Redux to React | 00:07:23 Duration |
|
Lecture 4 | Containers Continued | 00:04:00 Duration |
|
Lecture 5 | Implementation of a Container Class | 00:10:46 Duration |
|
Lecture 6 | Containers and Reducers Review | 00:04:10 Duration |
|
Lecture 7 | Actions and Action Creators | 00:07:31 Duration |
|
Lecture 8 | Binding Action Creators | 00:09:41 Duration |
|
Lecture 9 | Creating an Action | 00:06:45 Duration |
|
Lecture 10 | Consuming Actions in Reducers | 00:07:16 Duration |
|
Lecture 11 | Consuming Actions in Reducers Continued | 00:05:06 Duration |
|
Lecture 12 | Conditional Rendering | 00:06:39 Duration |
|
Lecture 13 | Reducers and Actions Review | 00:05:03 Duration |
Section 33 : Intermediate Redux Middleware
|
Lecture 1 | App Overview and Planning | 00:05:10 Duration |
|
Lecture 2 | Component Setup | 00:07:57 Duration |
|
Lecture 3 | Controlled Components and Binding Context | 00:09:56 Duration |
|
Lecture 4 | Form Elements in React | 00:06:29 Duration |
|
Lecture 5 | Working with API's | 00:08:13 Duration |
|
Lecture 6 | Introduction to Middleware | 00:07:27 Duration |
|
Lecture 7 | Ajax Requests with Axios | 00:13:03 Duration |
|
Lecture 8 | Redux-Promise in Practice | 00:10:16 Duration |
|
Lecture 9 | Redux-Promise Continued | 00:10:56 Duration |
|
Lecture 10 | Avoiding State Mutations in Reducers | 00:09:54 Duration |
|
Lecture 11 | Building a List Container | 00:06:54 Duration |
|
Lecture 12 | Mapping Props to a Render Helper | 00:06:07 Duration |
|
Lecture 13 | Adding Sparkline Charts | 00:09:55 Duration |
|
Lecture 14 | Making a Reusable Chart Component | 00:06:01 Duration |
|
Lecture 15 | Labeling of Units | 00:10:38 Duration |
|
Lecture 16 | Google not Defined Errors | |
|
Lecture 17 | Google Maps Integration | 00:08:00 Duration |
|
Lecture 18 | Google Maps Integration Continued | 00:07:17 Duration |
|
Lecture 19 | Project Review | 00:02:36 Duration |
Section 34 : React Router + Redux Form v6
|
Lecture 1 | App Overview and Goals | 00:06:50 Duration |
|
Lecture 2 | Posts API | 00:09:21 Duration |
|
Lecture 3 | Quick Note | |
|
Lecture 4 | Installing React Router | 00:03:00 Duration |
|
Lecture 5 | What React Router Does | 00:05:37 Duration |
|
Lecture 6 | The Basics of React Router | 00:08:59 Duration |
|
Lecture 7 | Route Design | 00:06:31 Duration |
|
Lecture 8 | Our First Route Definition | 00:05:58 Duration |
|
Lecture 9 | State as an Object | 00:09:07 Duration |
|
Lecture 10 | Back to Redux - Index Action | 00:07:08 Duration |
|
Lecture 11 | Implementing Posts Reducer | 00:10:29 Duration |
|
Lecture 12 | Action Creator Shortcuts | 00:08:07 Duration |
|
Lecture 13 | Rendering a List of Posts | 00:09:19 Duration |
|
Lecture 14 | Creating New Posts | 00:05:43 Duration |
|
Lecture 15 | A React Router Gotcha | 00:04:45 Duration |
|
Lecture 16 | Navigation with the Link Component | 00:05:58 Duration |
|
Lecture 17 | Redux Form | 00:05:33 Duration |
|
Lecture 18 | Setting Up Redux Form | 00:09:27 Duration |
|
Lecture 19 | The Field Component | 00:10:50 Duration |
|
Lecture 20 | Generalizing Fields | 00:08:55 Duration |
|
Lecture 21 | Validating Forms | 00:10:32 Duration |
|
Lecture 22 | Showing Errors to Users | 00:04:31 Duration |
|
Lecture 23 | Handling Form Submittal | 00:09:31 Duration |
|
Lecture 24 | Form and Field States | |
|
Lecture 25 | Conditional Styling | 00:07:06 Duration |
|
Lecture 26 | More on Navigation | 00:03:12 Duration |
|
Lecture 27 | Create Post Action Creator | 00:10:05 Duration |
|
Lecture 28 | Navigation Through Callbacks | 00:07:31 Duration |
|
Lecture 29 | The Posts Show Component | 00:03:39 Duration |
|
Lecture 30 | Receiving New Posts | 00:09:27 Duration |
|
Lecture 31 | Selecting from OwnProps | 00:11:27 Duration |
|
Lecture 32 | Data Dependencies | 00:05:32 Duration |
|
Lecture 33 | Caching Records | 00:06:13 Duration |
|
Lecture 34 | Deleting a Post | 00:09:26 Duration |
|
Lecture 35 | Wrapup | 00:09:10 Duration |
Section 35 : Bonus Topics
|
Lecture 1 | Basics of Redux Thunk | 00:07:17 Duration |
|
Lecture 2 | Combining Redux and Firebase | 00:12:17 Duration |
|
Lecture 3 | Dynamic Forms with Redux Form | 00:14:43 Duration |
|
Lecture 4 | Logicless Components with Reselect | 00:18:09 Duration |
|
Lecture 5 | Data Loading Methods with Redux | 00:09:29 Duration |
|
Lecture 6 | Animation of React Components | 00:12:33 Duration |
|
Lecture 7 | The Best Way to Store Redux Data | 00:15:05 Duration |
|
Lecture 8 | Four Most Common Errors with React and Redux | 00:12:02 Duration |
|
Lecture 9 | Modals in React and Redux Apps | 00:18:43 Duration |
|
Lecture 10 | Deployment of ReactWebpack Apps | 00:23:15 Duration |
|
Lecture 11 | BrowserHistory in Production | 00:19:46 Duration |
|
Lecture 12 | React Integration with 3rd Party Libraries | 00:18:42 Duration |
|
Lecture 13 | Introducing JSPlaygrounds for Rapid Prototyping | 00:12:19 Duration |
Section 36 : React Router + Redux Form v4
|
Lecture 1 | Important Note - Do Not Skip! | |
|
Lecture 2 | App Overview and Goals | 00:06:49 Duration |
|
Lecture 3 | Exploring the Posts Api | 00:13:27 Duration |
|
Lecture 4 | Installing React Router | 00:02:36 Duration |
|
Lecture 5 | React Router - What is It | 00:05:34 Duration |
|
Lecture 6 | Setting Up React Router | 00:04:40 Duration |
|
Lecture 7 | Route Configuration | 00:05:17 Duration |
|
Lecture 8 | Nesting Of Routes | 00:08:02 Duration |
|
Lecture 9 | IndexRoutes with React Router | 00:05:05 Duration |
|
Lecture 10 | Back To Redux - Index Action | 00:05:50 Duration |
|
Lecture 11 | Catching Data with Posts Reducer | 00:06:30 Duration |
|
Lecture 12 | Catching Data with Posts Reducer Continued | 00:02:38 Duration |
|
Lecture 13 | Fetching Data with Lifecycle Methods | 00:05:43 Duration |
|
Lecture 14 | Fetching Data with Lifecycle Methods Continued | 00:06:51 Duration |
|
Lecture 15 | Creating New Posts | 00:05:23 Duration |
|
Lecture 16 | Navigation with the Link Component | 00:04:26 Duration |
|
Lecture 17 | Forms and Form Submission | 00:10:12 Duration |
|
Lecture 18 | More on Forms and Form Submission | 00:07:37 Duration |
|
Lecture 19 | Passing Control to Redux Form | 00:07:51 Duration |
|
Lecture 20 | CreatePost Action Creator | 00:11:22 Duration |
|
Lecture 21 | Form Validation Continued | 00:08:52 Duration |
|
Lecture 22 | Navigating on Submit | 00:12:37 Duration |
|
Lecture 23 | Posts Index | 00:04:31 Duration |
|
Lecture 24 | Dynamic Route Params | 00:07:09 Duration |
|
Lecture 25 | Loading Data on Render | 00:05:45 Duration |
|
Lecture 26 | Handling Null Props | 00:05:32 Duration |
|
Lecture 27 | Delete Action Creator | 00:07:07 Duration |
|
Lecture 28 | Navigate on Delete | 00:02:25 Duration |
|
Lecture 29 | ReactRouter and ReduxForm Wrapup | 00:07:03 Duration |