React Complete 2023 With Redux, Firebase & Typescript

React 2023 Edition: From Zero to Advanced including Hooks, Context API, Reducers, Redux Toolkit, Firebase & TypeScript

What you'll learn

Complete REACT: Beginner to Advanced

React 18 Modern Approach with Hooks and & Function Components

Context API & Reducers

State Management with REDUX Toolkit for Large Scale Applications

Work with Async Data in Redux

Routing with REACT ROUTER

FIREBASE Integration for Real-time Database & Hosting

Automated Firebase Deploys with Github

TYPESCRIPT for Bug-Free Development

Implementing Typescript on New and Existing React Projects

Requirements

A computer with access to the internet

Familiarity with HTML & CSS and basic JavaScript knowledge are recommended

Students are not required to have any previous knowledge on React or other frameworks, the course starts from the absolute beginning and covers all topics for React mastery

Description

Welcome to the REACT Complete Course 2023 Edition - your gateway to becoming a React expert in the ever-evolving world of web development.In today's tech landscape, mastering React is not just a skill; it's a career advantage. This comprehensive course takes you on a journey from React novice to a seasoned developer, equipping you with the tools and techniques demanded by today's industry.Why Choose This Course:In a crowded field of React courses, ours stands out for several compelling reasons:From Zero to Mastery: We begin from the basics, making it accessible for beginners, and progress seamlessly into advanced topics, ensuring seasoned developers also gain valuable insights.The Modern Approach to React: Function components & hooks.Context & Reducers Demystified: Complex concepts like context and reducers are made crystal clear, giving you a deep understanding of state management in React.Redux Toolkit for Effortless State Management: Learn how to streamline state management with Redux Toolkit, a must-know skill for any React developer.Firebase for Real-world Applications: Dive into Firebase to master user authentication, Firestore database integration, and deployment, making you proficient in building real-world, scalable apps.TypeScript Integration: Stay ahead in the game by integrating TypeScript into your React projects, enhancing your code quality and collaboration potential.How Will This Course Benefit You:Whether you're a beginner developer or an experienced professional seeking to upgrade your skills, this course empowers you with:Career-Ready Skills: Equip yourself with the tools and knowledge required for high-demand React developer positions.Portfolio-Building Projects: Gain practical experience through hands-on projects, with real-time databases and custom domains.Confidence in Complex Concepts: Tackle advanced concepts like state management and authentication with confidence.Industry Insights: Benefit from real-world insights and best practices accumulated from years of industry experience.Who Should Enroll:Aspiring Developers: If you're new to React, this course provides a solid foundation.Experienced Developers: Seasoned devs will benefit from advanced topics and best practices.Professionals Seeking Career Growth: Upgrade your skills and open doors to better job opportunities.Don't miss out on this chance to master React and stay ahead in your web development journey. Enroll now and join our thriving community of React experts. Let's build amazing web applications together!

Overview

Section 1: React Basics

Lecture 1 Preparing the Workspace

Lecture 2 JSX Basics

Lecture 3 List Rendering with the Map Function

Lecture 4 Coding Exercise Walkthrough

Lecture 5 Conditional Rendering

Lecture 6 Components

Lecture 7 Show or Hide the Order Summary

Lecture 8 Props

Lecture 9 Events

Lecture 10 State

Lecture 11 React Hooks

Lecture 12 Updating State Variables

Lecture 13 Updating the Order Details

Lecture 14 The Quantity Handler

Section 2: Styling in React

Lecture 15 Presentation of the To-Dos Project

Lecture 16 CSS x SCSS

Lecture 17 Component Styles

Lecture 18 CSS Modules

Lecture 19 Tips for Working with CSS Modules

Section 3: Context API & Reducers for State Management

Lecture 20 State Management on Large Scale Applications

Lecture 21 Creating Dummy To-Dos and Rendering the List

Lecture 22 Setting Up The Logic to Erase and Mark To-Dos as Done

Lecture 23 Creating and Providing the To-Dos Context

Lecture 24 Using the Context from Child Components

Lecture 25 Reducers - Consolidating the State Logic

Lecture 26 Using The Reducer Function

Lecture 27 RECAP: Reducers

Lecture 28 Dispatching Actions Directly from the To-Do Component

Lecture 29 Moving the Context Logic into the Context Provider Component

Lecture 30 Merging the Reducer Into the Context

Lecture 31 The Add To-Do Modal

Lecture 32 Open & Close The Modal with State

Lecture 33 The Add To-Do Logic

Lecture 34 Adding IDs to New Todos

Lecture 35 The Filter Logic

Lecture 36 Showing The Filtered Todos

Lecture 37 Saving To-Dos in the LocalStorage

Section 4: React Router

Lecture 38 Presentation of The Book List Project

Lecture 39 Getting Started with React Router

Lecture 40 Adding Links with React Router

Lecture 41 Dynamic Links and URL Params

Lecture 42 Adding Links to Individual Books

Lecture 43 Navigate to Links Programatically with useNavigate

Section 5: State Management with Redux Toolkit

Lecture 44 Redux - State Management for Large Scale Applications

Lecture 45 Redux Installation and Store Setup

Lecture 46 Reading from the State with the useSelector Hook

Lecture 47 Calling the Reducer Functions With the useDispatch Hook

Lecture 48 Avoiding Breaking Errors for Non Existing Book Ids

Lecture 49 Toggle the isRead State

Lecture 50 The addBook Action

Lecture 51 The Notes Slice

Lecture 52 Filtering Notes by the Book ID

Lecture 53 Erase Notes

Lecture 54 Add Notes

Lecture 55 Erase All Book Notes

Section 6: Firebase: User Authentication

Lecture 56 React and Firebase - Project Introduction

Lecture 57 Firebase Project Setup

Lecture 58 Firebase Authentication Methods

Lecture 59 Signing Up New Users

Lecture 60 Handling Signup Errors

Lecture 61 Signing In Existing Users

Lecture 62 The Reset Password Function

Lecture 63 Show the Homepage to Logged In Users

Lecture 64 Persisting the Login State in the Browser Session

Lecture 65 The Logout Function

Lecture 66 Adding a Loader to The Login Page

Section 7: Firebase: The Firestore Database

Lecture 67 Setting Up the Firestore Database

Lecture 68 READ From the Firestore Database

Lecture 69 Using WHERE Clauses on Firebase Queries

Lecture 70 Do We Really Need Redux in This Project?

Lecture 71 Async Functions in Redux with createAsyncThunk

Lecture 72 ExtraReducers and the Builder Object

Lecture 73 UPDATE Data From The Firestore - The isRead Property

Lecture 74 Toggle isRead from the Single Book Page

Lecture 75 DELETE Documents from the Firestore

Lecture 76 CREATE Documents in the Firestore

Lecture 77 Fixing Bugs in the Add Book Flow

Lecture 78 Adding Loaders for Pending Actions

Lecture 79 Single Book Page: Fetching Books On-Demand

Lecture 80 Improving the Loading State of The Single Book Page

Lecture 81 Fetch Book Notes

Lecture 82 Delete Book Notes

Lecture 83 Add Notes

Lecture 84 Cleaning Up the Project

Section 8: Firebase: Hosting & Deploying Your React App

Lecture 85 Firebase Hosting

Lecture 86 Adding a Custom .com Domain to Your Firebase Project

Lecture 87 Setting Up a Github Repo

Lecture 88 Beginner GIT Tips

Lecture 89 Setting Up the Github Integration with Firebase

Lecture 90 The Importance of Branches

Lecture 91 Deploying Feature Branches with Pull Requests

Section 9: TypeScript: Quick Guide

Lecture 92 What is TypeScript?

Lecture 93 Preparing the Workspace

Lecture 94 TSC: The TypeScript Compiler

Lecture 95 TypeScript Syntax

Lecture 96 Primitives Data Types & Functions

Lecture 97 Arrays

Lecture 98 Objects and Type Aliases

Lecture 99 Optional Properties

Lecture 100 Interfaces

Lecture 101 Union and Literal Types

Lecture 102 Null & Undefined

Lecture 103 The Any Type

Lecture 104 HTML Elements and Type Assertion

Section 10: TypeScript in Practice

Lecture 105 Presentation of the Students Project

Lecture 106 More on the Default Tsconfig Rules

Lecture 107 Defining the Student Interface

Lecture 108 Outputting Name & Age of Students

Lecture 109 Writing the Logic for the Area of Focus

Lecture 110 Outputting the Students' Status

Lecture 111 The Reusable Refresh Table Function

Section 11: React & Typescript Basics

Lecture 112 Creating Your First React & TypeScript Project

Lecture 113 Typing State Variables

Lecture 114 Typing Props

Lecture 115 Sharing Types Between Components

Lecture 116 Typing Functions

Section 12: React & TypeScript with Context & Reducers

Lecture 117 Presentation of the Quiz App

Lecture 118 Creating the Context

Lecture 119 Providing the Context

Lecture 120 Adding the Reducer Function to the Context

Lecture 121 Adjusting the Context Type

Lecture 122 Fetching Questions From the Open Trivia API

Lecture 123 Making the The Question Interface with Chat GPT

Lecture 124 Rendering the UI Based on the Game Status

Lecture 125 Adding the The Question to the Context

Lecture 126 Shuffling the Correct and Incorrect Answers

Lecture 127 Decoding HTML Entities on Questions

Lecture 128 Collecting the User's Answer

Lecture 129 Submitting the User's Answer

Lecture 130 Showing the Result to the User

Lecture 131 Showing the Next Question for Infinite Gameplay

Lecture 132 Adding the Score to the Context

Lecture 133 Setting the Sound and Confetti for The Correct Answer

Aspiring web developers looking for a React starting point. You'll go from zero to a confident React developer.,Experienced developers looking to upgrade: If you're already a developer but want to enhance your skills with advanced React, this course provides advanced topics with real-world projects.,Students and tech enthusiasts seeking to dive into the world of modern web development using React.,Entrepreneurs and Start-up Founders looking to build web-based businesses