Modern React with Redux 2023 Update

Modern React with Redux 2023 Update

What you’ll learn

Create dynamic web apps using the latest in web technology
Acquire the programming skills needed to obtain a software engineering job
Practice your skills with many large projects, exercises, and quizzes
Master the fundamentals concepts behind React and Redux
Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax
Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
Realize the power of building reusable components

Requirements

A Mac or Windows Computer

Description

Congratulations!  You’ve found the most popular, most complete, and most up-to-date resource online for learning React and Redux!Thousands of other engineers have learned React and Redux, and you can too.  This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you’ve always been dreaming about.The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.React is the most popular Javascript library of the last five years, and the job market is still hotter than ever.  Companies large and small can’t hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all time high.  It’s a great time to learn React!———————-What will you build?This course features hundreds of videos with hundreds of custom diagrams to help you understand how React and Redux work.  No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you’ll learn the fundamentals of building dynamic and live web apps using React.Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge.  You’ll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.My guarantee to you: there is no other course online that teaches more features of React and Redux Toolkit.  This is the most comprehensive resource there is.Below is a partial list of the topics you’ll find in this course:Master the fundamental features of React, including JSX, state, and propsFrom square one, understand how to build reusable componentsDive into the source code of Redux to understand how it works behind the scenesTest your knowledge and hone your skills with numerous coding exercisesUse popular styling libraries to build beautiful appsSee different methods of building UI’s through composition of componentsRemember all these techniques with clearly-written cheatsheetsBesides just React and Redux, you’ll pick up countless other tidbits of knowledge, including design techniques, popular design patterns, and repeatable steps to build new components.This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.

Overview

Section 1: Let’s Dive In!

Lecture 1 How to Get Help

Lecture 2 Join Our Community!

Lecture 3 Course Resources

Lecture 4 Let’s Build an App!

Lecture 5 Critical Questions

Lecture 6 A Few More Critical Questions

Lecture 7 Node Setup

Lecture 8 Creating a React Project

Lecture 9 What is Create React App?

Section 2: Creating Content with JSX

Lecture 10 Showing Basic Content

Lecture 11 What is JSX?

Lecture 12 Printing JavaScript Variables in JSX

Lecture 13 Shorthand JS Expressions

Lecture 14 Exercise Overview

Lecture 15 Exercise Solution

Lecture 16 Typical Component Layouts

Lecture 17 Customizing Elements with Props

Lecture 18 Converting HTML to JSX

Lecture 19 Applying Styling in JSX

Lecture 20 Exercise Solution

Lecture 21 Extracting Components

Lecture 22 Module Systems Overview

Lecture 23 Cheatsheet for JSX

Section 3: Building with Reusable Components

Lecture 24 Project Overview

Lecture 25 Creating Core Components

Lecture 26 Introducing the Props System

Lecture 27 Picturing the Movement of Data

Lecture 28 Adding Props

Lecture 29 Using Argument Destructuring

Lecture 30 Exercise Solution

Lecture 31 The React Developer Tools

Lecture 32 The Most Common Props Mistake

Lecture 33 Images for the App

Lecture 34 Including Images

Lecture 35 Handling Image Accessibility

Lecture 36 Review on how CSS Works

Lecture 37 Adding CSS Libraries with NPM

Lecture 38 A Big Pile of HTML!

Lecture 39 Last Bit of Styling

Section 4: State: How to Change Your App

Lecture 40 App Overview

Lecture 41 Initial App Setup

Lecture 42 Introducing the Event System

Lecture 43 Events in Detail

Lecture 44 Variations on Event Handlers

Lecture 45 Exercise Solution

Lecture 46 Introducing the State System

Lecture 47 More on State

Lecture 48 Understanding the Re-Rendering Process

Lecture 49 Why Array Destructuring?

Lecture 50 Back to the App

Lecture 51 Picking a Random Element

Lecture 52 List Building in React

Lecture 53 Images for the App

Lecture 54 Loading and Showing SVGs

Lecture 55 Increasing Image Size

Lecture 56 Adding Custom CSS

Lecture 57 Finalizing Styling

Lecture 58 App Wrapup and Review

Section 5: Using an API with React

Lecture 59 App Overview

Lecture 60 Project Setup

Lecture 61 The Path Forward

Lecture 62 Overview of HTTP Requests

Lecture 63 Understanding the API

Lecture 64 Making an HTTP Request

Lecture 65 [Optional] Using Async:Await

Lecture 66 Data Fetching Cleanup

Lecture 67 Thinking About Data Flow

Lecture 68 Child to Parent Communication

Lecture 69 Implementing Child to Parent Communication

Lecture 70 Handling Form Submission

Lecture 71 Handling Input Elements

Lecture 72 [Optional] OK But Why?

Lecture 73 Exercise Solution

Lecture 74 Running the Search

Lecture 75 Reminder on Async:Await

Lecture 76 Communicating the List of Images Down

Lecture 77 Building a List of Images

Lecture 78 Handling List Updates

Lecture 79 Notes on Keys

Lecture 80 Displaying Images

Lecture 81 A Touch of Styling

Lecture 82 App Wrapup

Section 6: How to Handle Forms

Lecture 83 App Overview

Lecture 84 Initial Setup

Lecture 85 State Location

Lecture 86 Reminder on Event Handlers

Lecture 87 Extra CSS

Lecture 88 Receiving New Titles

Lecture 89 Adding Styling

Lecture 90 Updating State

Lecture 91 Don’t Mutate That State!

Lecture 92 State Updates – Cheat Sheet

Lecture 93 [Optional] Adding Elements to the Start or End

Lecture 94 [Optional] Exercise Solution

Lecture 95 [Optional] Inserting Elements

Lecture 96 [Optional] Exercise Solution

Lecture 97 [Optional] Removing Elements

Lecture 98 [Optional] Exercise Solution

Lecture 99 [Optional] Modifying Elements

Lecture 100 [Super Optional] Why the Special Syntax?

Lecture 101 [Optional] Exercise Solution

Lecture 102 [Optional] Adding, Changing, or Removing Object Properties

Lecture 103 Cheatsheet for State Changes

Lecture 104 Adding a Book, For Real!

Lecture 105 Generating Random ID’s

Lecture 106 Displaying the List

Lecture 107 Deleting Records

Lecture 108 Toggling Form Display

Lecture 109 Default Form Values

Lecture 110 Updating the Title

Lecture 111 Closing the Form on Submit

Lecture 112 A Better Solution!

Lecture 113 Collapsing Two Handlers into One

Lecture 114 Adding Images

Section 7: Data Persistence with API Requests

Lecture 115 Adding Data Persistence

Lecture 116 Server Setup

Lecture 117 What Just Happened?

Lecture 118 How the API Works

Lecture 119 Introducing the REST Client

Lecture 120 ECONNREFUSED 127.0.0.1:3001 Errors in VSCode

Lecture 121 Using the REST Client

Lecture 122 Creating a New Record

Lecture 123 Fetching a List of Records

Lecture 124 Introducing useEffect

Lecture 125 useEffect in Action

Lecture 126 More on useEffect

Lecture 127 Updating a Record

Lecture 128 Thinking About Updates

Lecture 129 Deleting a Record

Section 8: Communication Using the Context System

Lecture 130 Introducing Context

Lecture 131 Context in Action

Lecture 132 Changing Context Values

Lecture 133 More on Changing Context

Lecture 134 Application vs Component State

Lecture 135 Refactoring to Use Context

Lecture 136 Refactoring the App

Lecture 137 Quick Note

Lecture 138 Reminder on Sharing with Context

Lecture 139 Props and Context Together

Lecture 140 Last Bit of Refactoring

Lecture 141 A Small Taste of Reusable Hooks

Section 9: Deeper Dive into Hooks!

Lecture 142 Return to useEffect

Lecture 143 Quick Note

Lecture 144 Understanding the Issue

Lecture 145 Applying the Fix

Lecture 146 ESLint is Good, but be Careful!

Lecture 147 Stable References with useCallback

Lecture 148 Fixing Bugs with useCallback

Lecture 149 useEffect Cleanup Functions

Lecture 150 The Purpose of Cleanup Functions

Section 10: Custom Navigation and Routing Systems

Lecture 151 Important Info About the Following Sections and Lectures

Lecture 152 Project Overview

Lecture 153 Project Setup

Lecture 154 Some Button Theory

Lecture 155 Underlying Elements

Lecture 156 The Children Prop

Lecture 157 Props Design

Lecture 158 Validating Props with PropTypes

Lecture 159 PropTypes in Action

Lecture 160 Introducing TailwindCSS

Lecture 161 Installing Tailwind

Lecture 162 How to use Tailwind

Lecture 163 Review on Styling

Lecture 164 The ClassNames Library

Lecture 165 Building Some Variations

Lecture 166 Finalizing the Variations

Lecture 167 Using Icons in React Projects

Lecture 168 Issues with Event Handlers

Lecture 169 Passing Props Through

Lecture 170 Handling the Special ClassName Case

Section 11: Mastering the State Design Process

Lecture 171 Project Organization

Lecture 172 Refactoring with Organization

Lecture 173 Component Overview

Lecture 174 Component Setup

Lecture 175 Reminder on Building Lists

Lecture 176 Quick Note

Lecture 177 State Design Process Overview

Lecture 178 Finding the Expanded Item

Lecture 179 Conditional Rendering

Lecture 180 Inline Event Handlers

Lecture 181 Variation on Event Handlers

Lecture 182 Conditional Icon Rendering

Lecture 183 Displaying Icons

Lecture 184 Adding Styling

Lecture 185 Toggling Panel Collapse

Lecture 186 Quick Note

Lecture 187 [Optional] Delayed State Updates

Lecture 188 [Optional] Functional State Updates

Lecture 189 Exercise Solution

Section 12: Practicing Props and State Design

Lecture 190 Component Overview

Lecture 191 Designing the Props

Lecture 192 Component Creation

Lecture 193 [Optional] More State Design

Lecture 194 Finally… Implementation!

Lecture 195 Reminder on Event Handlers in Maps

Lecture 196 Dropdown as a Controlled Component

Lecture 197 Controlled Component Implementation

Lecture 198 Existence Check Helper

Lecture 199 Community Convention with Props Names

Lecture 200 Exercise Solution

Lecture 201 Adding Styling

Lecture 202 The Panel Component

Lecture 203 Creating the Reusable Panel

Lecture 204 A Challenging Extra Feature

Lecture 205 Document-Wide Click Handlers

Lecture 206 Event Capture and Bubbling

Lecture 207 Putting it All Together

Lecture 208 Why a Capture Phase Handler?

Lecture 209 Reminder on the useEffect Function

Lecture 210 Reminder on useEffect Cleanup

Lecture 211 Issues with Element References

Lecture 212 useRef in Action

Lecture 213 Checking Click Location

Section 13: Making Navigation Reusable

Lecture 214 Traditional Browser Navigation

Lecture 215 Theory of Navigation in React

Lecture 216 Extracting the DropdownPage

Lecture 217 Answering Critical Questions

Lecture 218 The PushState Function

Lecture 219 Handling Link Clicks

Lecture 220 Handling Back:Forward Buttons

Lecture 221 Navigation Context

Lecture 222 Listening to Forward and Back Clicks

Lecture 223 Programmatic Navigation

Lecture 224 A Link Component

Lecture 225 A Route Component

Lecture 226 Handling Control and Command Keys

Lecture 227 Link Styling

Lecture 228 Custom Navigation Hook

Lecture 229 Adding a Sidebar Component

Lecture 230 Highlighting the Active Link

Lecture 231 Navigation Wrapup

Section 14: Creating Portals with ReactDOM

Lecture 232 Modal Component Overview

Lecture 233 Toggling Visibility

Lecture 234 At First Glance, Easy!

Lecture 235 We’re Lucky it Works At All!

Lecture 236 Fixing the Modal with Portals

Lecture 237 Closing the Modal

Lecture 238 Customizing the Modal

Lecture 239 Additional Styling

Lecture 240 One Small Bug

Lecture 241 Modal Wrapup

Section 15: Make a Feature-Full Data Table!

Lecture 242 Creating a Reusable table

Lecture 243 Communicating Data to the Table

Lecture 244 Reminder on Table HTML Structure

Lecture 245 Building the Rows

Lecture 246 Better Styling

Lecture 247 Done! But It’s Not Reusable

Lecture 248 Here’s the Idea

Lecture 249 Dynamic Table Headers

Lecture 250 Rendering Individual Cells

Lecture 251 Fixed Cell Values

Lecture 252 Nested Maps

Lecture 253 Fixing the Color

Lecture 254 Adding a Key Function

Section 16: Getting Clever with Data Sorting

Lecture 255 Adding Sorting to the Table

Lecture 256 Reminder on Sorting in JavaScript

Lecture 257 Sorting Strings

Lecture 258 Sorting Objects

Lecture 259 Object Sort Implementation

Lecture 260 Reversing Sort Order

Lecture 261 Optional Sorting

Lecture 262 A Small Extra Feature

Lecture 263 Customizing Header Cells

Lecture 264 React Fragments

Lecture 265 The Big Reveal

Lecture 266 Adding SortableTable

Lecture 267 Watching for Header Cell Clicks

Lecture 268 Quick State Design

Lecture 269 Adding Sort State

Lecture 270 Yessssss, It Worked!

Lecture 271 Determining Icon Set

Lecture 272 Styling Header Cells

Lecture 273 Resetting Sort Order

Lecture 274 Table Wrapup

Section 17: Custom Hooks In Depth

Lecture 275 Exploring Code Reuse

Lecture 276 Revisiting Custom Hooks

Lecture 277 Creating the Demo Component

Lecture 278 Custom Hook Creation

Lecture 279 Quick Note

Lecture 280 Hook Creation Process in Depth

Lecture 281 Making a Reusable Sorting Hook

Section 18: Into the World of Reducers

Lecture 282 App Overview

Lecture 283 Adding the Form

Lecture 284 More on the Form

Lecture 285 useReducer in Action

Lecture 286 Rules of Reducer Functions

Lecture 287 Understanding Action Objects

Lecture 288 Constant Action Types

Lecture 289 Refactoring to a Switch

Lecture 290 Adding New State Updates

Lecture 291 A Few Design Considerations Around Reducers

Lecture 292 Introducing Immer

Lecture 293 Immer in Action

Section 19: Dive Into Redux Toolkit

Lecture 294 Into the World of Redux

Lecture 295 Redux vs Redux Toolkit

Lecture 296 App Overview

Lecture 297 The Path Forward

Lecture 298 Implementation Time!

Lecture 299 Understanding the Store

Lecture 300 The Store’s Initial State

Lecture 301 Understanding Slices

Lecture 302 Understanding Action Creators

Lecture 303 Connecting React to Redux

Lecture 304 Updating State from a Component

Lecture 305 Accessing State in a Component

Lecture 306 Removing Content

Lecture 307 Practice Updating State!

Lecture 308 Practice Accessing State!

Lecture 309 Even More State Updating!

Lecture 310 Resetting State

Lecture 311 Multiple State Updates

Lecture 312 Understanding Action Flow

Lecture 313 Watching for Other Actions

Lecture 314 Getting an Action Creator’s Type

Lecture 315 Manual Action Creation

Lecture 316 File and Folder Structure

Lecture 317 Refactoring the Project Structure

Lecture 318 Link to Completed Project

Section 20: Managing Multiple Slices with Redux Toolkit

Lecture 319 Project Overview

Lecture 320 Adding Component Boilerplate

Lecture 321 Thinking About Derived State

Lecture 322 Thinking About Redux Design

Lecture 323 Adding the Form Slice

Lecture 324 Maintaining a Collection with a Slice

Lecture 325 Creating the Store

Lecture 326 Form Values to Update State

Lecture 327 Receiving the Cost

Lecture 328 Dispatching During the Form Submission

Lecture 329 Awkward Double Keys

Lecture 330 Listing the Records

Lecture 331 Deleting Records

Lecture 332 CSS File for Download

Lecture 333 Adding Styling

Lecture 334 Form Reset on Submission

Lecture 335 Reminder on ExtraReducers

Lecture 336 Adding a Searching Input

Lecture 337 Derived State in useSelector

Lecture 338 Total Car Cost

Lecture 339 Highlighting Existing Cars

Section 21: Interfacing with API’s Using Async Thunks

Lecture 340 App Overview

Lecture 341 Adding a Few Dependencies

Lecture 342 Initial App Boilerplate

Lecture 343 API Server Setup

Lecture 344 Component Files

Lecture 345 Adding a Few Components

Lecture 346 Creating the Redux Store

Lecture 347 Thinking About Data Structuring

Lecture 348 Reminder on Request Conventions

Lecture 349 Data Fetching Techniques

Lecture 350 Optional Async Thunks Section

Lecture 351 Adding State for Data Loading

Lecture 352 Understanding Async Thunks

Lecture 353 Steps for Adding a Thunk

Lecture 354 More on Adding Thunks

Lecture 355 Wrapping up the Thunk

Lecture 356 Using Loading State

Lecture 357 Adding a Pause for Testing

Lecture 358 Adding a Skeleton Loader

Lecture 359 Animations with TailwindCSS

Lecture 360 Rendering the List of Users

Lecture 361 Creating New Users

Lecture 362 Unexpected Loading State

Lecture 363 Strategies for Fine-Grained Loading State

Lecture 364 Local Fine-Grained Loading State

Lecture 365 More on Loading State

Lecture 366 Handling Errors with User Creation

Lecture 367 Creating a Reusable Thunk Hook

Lecture 368 Creating a Fetch-Aware Button Component

Lecture 369 Better Skeleton Display

Lecture 370 A Thunk to Delete a User

Lecture 371 Updating the Slice

Lecture 372 Refactoring the Component

Lecture 373 Deleting the User

Lecture 374 Fixing a Delete Error

Lecture 375 Album Feature Overview

Lecture 376 Additional Components

Lecture 377 Adding the ExpandablePanel

Lecture 378 Wrapping Up the ExpandablePanel

Lecture 379 Adding the Albums Listing

Section 22: Modern Async with Redux Toolkit Query

Lecture 380 Skipping to this Section?

Lecture 381 [Optional] Getting Caught Up

Lecture 382 Introducing Redux Toolkit Query

Lecture 383 Creating a RTK Query API

Lecture 384 Creating an Endpoint

Lecture 385 Using the Generated Hook

Lecture 386 A Few Immediate Notes

Lecture 387 Rendering the List

Lecture 388 Changing Data with Mutations

Lecture 389 Differences Between Queries and Mutations

Lecture 390 Options for Refetching Data

Lecture 391 Request De-Duplication

Lecture 392 Some Internals of Redux Toolkit Query

Lecture 393 Refetching with Tags

Lecture 394 Fine-Grained Tag Validation

Lecture 395 Styling Fixups

Lecture 396 Adding a Pause for Testing

Lecture 397 Implementing Delete Endpoints

Lecture 398 Refactoring the List

Lecture 399 Remove Implementation

Lecture 400 Easy Tag Invalidation

Lecture 401 Getting Clever with Cache Tags

Lecture 402 More Clever Tag Implementation

Lecture 403 Photos Feature Overview

Lecture 404 Lots of Photos Setup!

Lecture 405 Adding the Endpoints

Lecture 406 Creating the Photo

Lecture 407 Showing the List of Photos

Lecture 408 Adding Mouse-Over Deletes

Lecture 409 Adding Automatic Data Refetching

Section 23: Bonus!

Lecture 410 Bonus!

Programmers looking to learn React,Developers who want to grow out of just using jQuery,Engineers who have researched React but have had trouble mastering some concepts

Course Information:

Udemy | English | 37h 39m | 12.85 GB
Created by: Stephen Grider

You Can See More Courses in the Developer >> Greetings from CourseDown.com