The React Developer Course With Hooks, Context Api And Redux

Learn to build React apps using Hooks, Context API, Redux, React-Router, Koa Framework, Typescript and much more!

What you'll learn

Build amazing React apps

Learn React hooks and create custom React hooks

Use functional-based components with hooks, Context and Redux

Build an app with React Context API (w/ useContext & useReducer hooks)

Setup authentication and user accounts

Create custom reusable React components

Build a server-side with Koa framework and Typescript

Deploy your React apps live to the web

Build an awesome app with React, Redux, React-Router and more

Hosting React and Typescipt apps using Github pages, Netlify, Firebase and Heroku

Requirements

A Mac or Windows computer

HTML + CSS + Javascript is required (at least the fundamentals)

No prior React knowledge is required

Description

React is one of the most popular library's for building client apps with HTML, CSS and javascript. If you want to establish yourself as a front-end or full-stack developer, you need to learn React.This course follows a hands-on approach, which means the whole course is structured around building web applications and the different concepts will be explained detailedly as they are introduced. The application that require a backend will be built using NodeJS, Koa, Typescript and MongoDB as the database.What's this course about?This course is about React, Hooks, Context API and Redux. Dive deep into these topics by building real applications and deploy your React apps live to the web.Is this course for you?This course is for you ifyou are thinking about getting started as a front-end developeryou are getting started as a beginner with Reactyou already know some React basicsyou are an Angular or Vue developer that wants to dive into ReactApps that you will buildBMI Calculator AppPassword Generator AppCalendar App w/ Context APITicket App (w/ React, Redux, Koa Framework, Typescript, MongoDB and more…)Here are some of the things you will learn in this courseReact fundamentals like components, state, props etcCreate custom reusable components like inputs, buttons, forms, sliders, checkboxes, dropdowns, modals etcReact Hooks (useState, useEffect, useMemo, useReducer etc)Setting up and using React Context APIReact-Router, Redux, Reducers, Actions, Redux-Thunk, Redux-Persist and moreSetup a server-side using Koa framework and TypescriptBuild custom REST APIAdd JWT Authentication to React appForms and form validation in React appsReact app deployment with gh-pages, firebase, netlify & herokuAnd much more

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 About Source Codes

Lecture 3 Project Github Links

Lecture 4 Install Tools

Section 2: Course Demo Apps

Lecture 5 BMI Calculator Demo

Lecture 6 Password Generator Demo

Lecture 7 Calendar App Demo

Lecture 8 Ticket App Demo

Section 3: Project 1: BMI Calculator

Lecture 9 Project Introduction

Lecture 10 App Structure Description

Lecture 11 Create BMI Calculator Project

Lecture 12 Install Bootstrap

Lecture 13 Create BMI Component

Lecture 14 Add BMI Component HTML

Lecture 15 Create Form Input Component

Lecture 16 Use Form Input Component

Lecture 17 Select Tag Method

Lecture 18 Set Default Unit

Lecture 19 Set Default Unit Alternatively

Lecture 20 Form Input OnChange Method - Part 1

Lecture 21 Form Input OnChange Method - Part 2

Lecture 22 Reset Button Method

Lecture 23 Metric BMI Formula

Lecture 24 Metric BMI Method

Lecture 25 Convert Height to Meters

Lecture 26 Display BMI Values

Lecture 27 Imperial BMI Formula

Lecture 28 Imperial BMI Method

Lecture 29 Display BMI Category

Lecture 30 Set BMI Category Color

Lecture 31 Set BMI Background Color

Lecture 32 BMI Calculator Conclusion

Lecture 33 Deploy BMI Calculator to Github Pages

Section 4: Project 2: Password Generator App

Lecture 34 Project Introduction

Lecture 35 Password Generator Structure

Lecture 36 Create Password Generator Project

Lecture 37 Add Bootstrap and Font Awesome

Lecture 38 Create Main Component

Lecture 39 Create Header Component

Lecture 40 Create Display Component

Lecture 41 Add Buttons to Display Component

Lecture 42 Container Component

Lecture 43 Create Button Component

Lecture 44 Add Slider Component

Lecture 45 Slider Component Styles

Lecture 46 Slider Prop Types

Lecture 47 Checkbox Component

Lecture 48 Use Checkbox with Array Map

Lecture 49 Checkbox Prop Types

Lecture 50 Add Linear Gradient to Slider

Lecture 51 Dynamically Move Linear Gradient

Lecture 52 Set Slider Range Value

Lecture 53 Check and Uncheck Boxes

Lecture 54 Helper Functions - Part 1

Lecture 55 Helper Functions - Part 2

Lecture 56 Use Generate Password Method

Lecture 57 Display Generated Password

Lecture 58 Generate New Password Method

Lecture 59 Hook Slider with Password Display

Lecture 60 Change Password Display Background

Lecture 61 Change Password with Checkboxes

Lecture 62 Disable Checkboxes

Lecture 63 Copy to Clipboard

Lecture 64 Copy from Container Component

Lecture 65 Tooltip Component

Lecture 66 Select Dropdown

Lecture 67 Checkbox Properties Method

Lecture 68 Change Select Type - Part 1

Lecture 69 Change Select Type - Part 2

Lecture 70 Set PIN Minimum Length

Lecture 71 Set PIN Minimum Length with Generate Password Button

Lecture 72 Deploy Password Generator App to Netlify

Section 5: Project 3: React Calendar App

Lecture 73 Calendar App Introduction

Lecture 74 Create Calendar App

Lecture 75 Context API

Lecture 76 Add Bootstrap

Lecture 77 Calendar App Structure

Lecture 78 Create Main Component

Lecture 79 Add CSS Style

Lecture 80 Sidebar Display

Lecture 81 Install Full Calendar React Module

Lecture 82 Add Full Calendar React Component

Lecture 83 Fix Calendar Typo

Lecture 84 Add Bootstrap Modal

Lecture 85 Event Form Fields

Lecture 86 Install React DatePicker

Lecture 87 Add Event Form Props

Lecture 88 Add Props to AddEvent Component

Lecture 89 Add Event Functionality - Part 1

Lecture 90 Add Event Functionality - Part 2

Lecture 91 Create Event Method

Lecture 92 Context API Setup - Part 1

Lecture 93 Context API Setup - Part 2

Lecture 94 AddEvent Context Method

Lecture 95 Display Events in Sidebar

Lecture 96 Display Events on Calendar

Lecture 97 Custom Storage React Hook

Lecture 98 Get Events Method

Lecture 99 Set Selected Events

Lecture 100 Select Modal

Lecture 101 Edit Event Function

Lecture 102 Add Properties to Edit Fields

Lecture 103 Fix Controlled Error

Lecture 104 Set Background Color on Select Tag

Lecture 105 Edit Event Functionality

Lecture 106 Delete Event Functionality

Lecture 107 Remove Selected Event on Delete

Lecture 108 Trigger Modal From Calendar

Lecture 109 Create Description Input Field

Lecture 110 Set Description

Lecture 111 Reset Description Field

Lecture 112 Set Calendar Event Limit

Lecture 113 Show Start Time Inside Form

Lecture 114 Create Toast Component

Lecture 115 Add Toast Component Styles

Lecture 116 Create Active Events Context Method

Lecture 117 AddEvent Toast Method

Lecture 118 Display Active Toast

Lecture 119 Delete Toast

Lecture 120 Remove App State Warning

Lecture 121 Use SetInterval To Display Toast

Lecture 122 Play Sound - Part 1

Lecture 123 Play Sound - Part 2

Lecture 124 Persist Toast Message

Lecture 125 Fix Active Events Error

Lecture 126 Calendar App Conclusion

Lecture 127 Deploy App to Firebase

Section 6: Project 4: Ticket App with Redux

Lecture 128 Ticket App Introduction

Lecture 129 Install MongoDB

Lecture 130 Ticket App Description

Lecture 131 Create Server-Side Project

Lecture 132 Add TSLint Rules

Lecture 133 Add Script Command in Package.json

Lecture 134 Add Editor Config

Lecture 135 Install Koa Types

Lecture 136 Server Setup - Part 1

Lecture 137 Server Setup - Part 2

Lecture 138 Database Setup

Lecture 139 Setup Routes File

Lecture 140 Create User Schema - Part 1

Lecture 141 Create User Schema - Part 2

Lecture 142 Password Presave Hook

Lecture 143 Register User Function - Part 1

Lecture 144 Register User Function - Part 2

Lecture 145 Use Postman to Test Registration

Lecture 146 Create Registration JWT Token

Lecture 147 Login User Method

Lecture 148 Verify Token Method

Lecture 149 Ticket Interface

Lecture 150 Ticket Schema

Lecture 151 Add Ticket Method - Part 1

Lecture 152 Add Ticket Method - Part 2

Lecture 153 Get All Tickets

Lecture 154 Edit Ticket Method

Lecture 155 Delete Ticket Method

Lecture 156 Close Ticket Method

Lecture 157 Create User Controller

Lecture 158 Install Socket.io

Lecture 159 Create Socket.io Connection

Lecture 160 Auth Pages Description

Lecture 161 Create React Ticket Project

Lecture 162 Create Auth Paths

Lecture 163 Form Input Component

Lecture 164 Form Input PropTypes

Lecture 165 Use Form Input in Registration Component

Lecture 166 Create Radio Input

Lecture 167 Create Reusable Button

Lecture 168 Login Form Inputs

Lecture 169 Register onSubmit Method

Lecture 170 Fix Controlled Element Error

Lecture 171 Validate Inputs Method

Lecture 172 Fix Validate Input Typo Error

Lecture 173 Login onSubmit Method

Lecture 174 Redux Setup

Lecture 175 Create Auth Service

Lecture 176 Auth Reducer

Lecture 177 Auth Register Action

Lecture 178 Redirect To Dashboard From Register Page

Lecture 179 Redirect To Dashboard From Login Page

Lecture 180 Error Reducer

Lecture 181 Create Private Route

Lecture 182 Redux Persist

Lecture 183 Create Navbar

Lecture 184 Card Box Component

Lecture 185 Change Add Ticket Button

Lecture 186 Show Entries Component

Lecture 187 Create Table Head

Lecture 188 Table Body Component

Lecture 189 Create Modal Component

Lecture 190 Add Ticket Form

Lecture 191 Create Dropdown Component

Lecture 192 Dropdown Ticket Values Array

Lecture 193 on Add Ticket Method

Lecture 194 Add New Ticket Service Method

Lecture 195 Add Token To Request

Lecture 196 Fix Auth Token Error

Lecture 197 Clear Form Fields Method

Lecture 198 Modal Reducer

Lecture 199 Hide Add Ticket Modal

Lecture 200 Ticket Service Methods

Lecture 201 Ticket Reducer Cases

Lecture 202 Add Ticket Action Methods

Lecture 203 Display Card Box Values

Lecture 204 Add Socket.io Client

Lecture 205 Display Table Data

Lecture 206 Table Entries Functionality

Lecture 207 User Reducer

Lecture 208 Edit Ticket Modal Component

Lecture 209 Open Edit Modal

Lecture 210 Try Edit Ticket

Lecture 211 Delete Mark Ticket

Lecture 212 Disable Action Buttons

Lecture 213 Enable Button For User Tickets

Lecture 214 Reset State on Logout

Lecture 215 Create Filtered Ticket Component

Lecture 216 Navigate To Filtered Page

Lecture 217 Filter Component Back Button

Lecture 218 Create Filter Ticket Function

Lecture 219 Set Filter Page Title

Lecture 220 Create API Endpoint Method

Lecture 221 Ticket App Conclusion

Lecture 222 Add Dotenv to Backend

Lecture 223 Create Mongodb Atlas Database

Lecture 224 Create Github Repo for Backend Project

Lecture 225 Deploy Backend to Heroku

Lecture 226 Deploy React App to Netlify

Lecture 227 Fix Netlify Routing Error

Lecture 228 Add PM2 Process Manager to Backend

Suitable for both beginners and intermediate React developers,Anyone who wants to learn React by building real world applications,Developers looking to learn Modern React with Hooks, Context API & Redux