Modern React Front To Back

  1. Home
  2. React
  3. Modern React Front To Back

Tags: React

Learn Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects

Last updated 2022-01-10 | 4.6

- Learn Modern React By Building 3 Projects
- Flux Pattern Using Context & useContext/useReducer Hooks
- Learn Redux From Scratch

What you'll learn

Learn Modern React By Building 3 Projects
Flux Pattern Using Context & useContext/useReducer Hooks
Learn Redux From Scratch
Full Stack Development with MERN (MongoDB
Express
React
Node)
Suitable For Both Beginners & Intermediate React Developers

* Requirements

* You should know JavaScript pretty well
* including ES6 (Arrow functions
* promises
* etc)

Description

In this course you will learn to master React 16.8+ concepts including how to create a Flux pattern using the Context API with the useContext and useReducer hooks. We will also build a full stack MERN application with a custom Express backend API that uses JWT (JSON Web Token) for authentication. In addition, we will also create a project that uses Redux.

Here are some of the things you will learn in this course:

  • React Fundamentals (Components, props, state, etc)

  • React Hooks (useState, useEffect, useContext, useReducer, useRef) in real projects

  • Context API & App Level State

  • MERN - MongoDB, Express React, Node

  • Build a Custom API With JWT Authentication

  • Redux - Reducers, Actions, etc

  • Basic Animation

  • Much More...

Who this course is for:

  • Developers looking to learn Modern React 16.8+ with hooks & context, MERN & Redux

Course content

13 sections • 91 lectures

Course Introduction 3 lectures

Welcome To The Course Preview 03:26

What Is React? Preview 04:03

Setting Up Our Environment Preview 06:07

Project 1 Start [Github Finder] & React Setup 6 lectures

Project Introduction Preview 03:22

Code & Resources Preview 00:07

Create React App & File Structure Preview 10:32

CRA Cleanup & Prepare Preview 06:37

Intro To JSX & Fragments Preview 06:22

Expressions & Conditionals In JSX Preview 05:55

Components, State & Props 7 lectures

Components, Props & PropTypes Preview 10:47

Getting Started With Component State Preview 09:08

Lists & Passing State With Props Preview 08:30

Stateless Functional Components Preview 07:18

HTTP Requests & Updating State Preview 09:05

Spinner Component & Refactoring Preview 07:19

Environment Variables Preview 05:12

Events, Passing Props, React Router & More 8 lectures

Events & Search Component Preview 07:58

Passing Props Up & Search Preview 08:28

Clear Users From State Preview 07:26

Alert State & Component Preview 09:45

React Router Setup Preview 08:43

Single User Component & Data Preview 11:37

User Component UI & Layout Preview 13:10

Repos & RepoItem Component & Data Preview 10:53

Refactoring To Hooks & Context 11 lectures

Overview of Hooks & Context Preview 07:33

Search Class to Function With useState Hook Preview 07:28

User Class to Function With useEffect Hook Preview 08:30

App Class to Function Component Preview 08:15

Implementing Context Preview 12:39

Create Reducer & Actions Preview 12:28

Moving User State To Context Preview 15:37

Moving Repos State To Context Preview 04:24

Alert Context Workflow Preview 12:56

Home & NotFound Components Preview 04:41

Prepare & Deploy To Netlify Preview 10:38

Project 2 Start [Contact Keeper - MERN] & Express Server Setup 6 lectures

Project Introduction Preview 03:35

Code & Resources Preview 00:08

MongoDB Atlas Setup Preview 05:17

Dependencies & Basic Express Server Preview 09:20

Backend Routes Preview 11:17

Connect MongoDB To Our App Preview 08:52

Backend Users, Contacts & JWT Authentication 8 lectures

User Model & Validation Preview 11:31

Hash Passwords & Register Route Preview 08:03

Create & Respond With JSON Web Token Preview 06:34

Authenticate Route Preview 09:00

Auth Middleware & Protecting Routes Preview 10:26

Contact Model & Get Contacts Route Preview 06:54

Add Contact Route Preview 08:05

Contact Update & Delete Routes Preview 12:05

Client Side Setup & Contacts UI 10 lectures

Setup React & Concurrently Preview 04:58

Cleanup, Navbar & Router Setup Preview 15:32

Contacts Context & Global State Preview 09:54

Contacts & ContactItem Components Preview 14:22

ContactForm Component Preview 17:13

Delete Contact From UI Preview 05:51

Set & Clear Current Contact Preview 06:50

Edit & Update Contact Action Preview 12:09

Contact Filter Form & State Preview 16:24

Basic Add & Delete Animation Preview 07:12

React/Express Authentication 8 lectures

Auth Context & Initial State Preview 08:30

Register & Login Forms Preview 10:41

Alert Context, State & Component Preview 17:00

User Registration Preview 17:20

Load User & Set Token Preview 15:20

User Login Preview 07:38

Logout & Navbar Preview 08:10

PrivateRoute Component Preview 05:57

Contacts API Integration & Deploy 5 lectures

Add Contact Preview 10:45

Get & Clear Contacts Preview 14:51

Delete Contacts Preview 04:49

Update Contacts Preview 03:16

Prepare & Deploy To Heroku Preview 13:24

Project 3 Start [ITLogger - Redux] - Components & UI 8 lectures

Project Introduction Preview 05:31

Code & Resources Preview 00:01

React & JSON-Server Setup Preview 08:48

Materialize Setup Preview 08:38

SearchBar & Logs Component Preview 11:33

LogItem & Preloader Components Preview 10:50

AddBtn & AddLogModal Components Preview 20:34

Edit & Tech Modal Components Preview 17:04

Redux For State Management 7 lectures

Redux Store & Provider Setup Preview 11:33

Logs Reducer, Actions & Types Preview 13:52

Connecting Redux To a Component Preview 10:09

Add Logs Preview 09:30

Delete Logs Preview 07:48

Update Logs Preview 14:41

Search Logs Preview 07:47

Technicians State & Components 4 lectures

Techs Reducer, Action & Component Preview 10:34

Tech Options Select Component Preview 07:02

Add Technicians Preview 07:11

Delete Technicians Preview 08:12