React Front To Back 2019

React Front To Back 2019
React Front To Back 2019
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 14 Hours | 5.80 GB

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

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…

What you’ll learn

  • Learn Modern React 16.8 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
Table of Contents

Course Introduction
1 Welcome To The Course
2 What Is React?
3 Setting Up Our Environment

Project 1 Start [Github Finder] & React Setup
4 Project Introduction
5 Code & Resources
6 Create React App & File Structure
7 CRA Cleanup & Prepare
8 Intro To JSX & Fragments
9 Expressions & Conditionals In JSX

Components, State & Props
10 Components, Props & PropTypes
11 Getting Started With Component State
12 Lists & Passing State With Props
13 Stateless Functional Components
14 HTTP Requests & Updating State
15 Spinner Component & Refactoring
16 Environment Variables

Events, Passing Props, React Router & More
17 Events & Search Component
18 Passing Props Up & Search
19 Clear Users From State
20 Alert State & Component
21 React Router Setup
22 Single User Component & Data
23 User Component UI & Layout
24 Repos & RepoItem Component & Data

Refactoring To Hooks & Context
25 Overview of Hooks & Context
26 Search Class to Function With useState Hook
27 User Class to Function With useEffect Hook
28 App Class to Function Component
29 Implementing Context
30 Create Reducer & Actions
31 Moving User State To Context
32 Moving Repos State To Context
33 Alert Context Workflow
34 Home & NotFound Components
35 Prepare & Deploy To Netlify

Project 2 Start [Contact Keeper – MERN] & Express Server Setup
36 Project Introduction
37 Code & Resources
38 MongoDB Atlas Setup
39 Dependencies & Basic Express Server
40 Backend Routes
41 Connect MongoDB To Our App

Backend Users, Contacts & JWT Authentication
42 User Model & Validation
43 Hash Passwords & Register Route
44 Create & Respond With JSON Web Token
45 Authenticate Route
46 Auth Middleware & Protecting Routes
47 Contact Model & Get Contacts Route
48 Add Contact Route
49 Contact Update & Delete Routes

Client Side Setup & Contacts UI
50 Setup React & Concurrently
51 Cleanup, Navbar & Router Setup
52 Contacts Context & Global State
53 Contacts & ContactItem Components
54 ContactForm Component
55 Delete Contact From UI
56 Set & Clear Current Contact
57 Edit & Update Contact Action
58 Contact Filter Form & State
59 Basic Add & Delete Animation

React/Express Authentication
60 Auth Context & Initial State
61 Register & Login Forms
62 Alert Context, State & Component
63 User Registration
64 Load User & Set Token
65 User Login
66 Logout & Navbar
67 PrivateRoute Component

Contacts API Integration & Deploy
68 Add Contact
69 Get & Clear Contacts
70 Delete Contacts
71 Update Contacts
72 Prepare & Deploy To Heroku

Project 3 Start [ITLogger – Redux] – Components & UI
73 Project Introduction
74 Code & Resources
75 React & JSON-Server Setup
76 Materialize Setup
77 SearchBar & Logs Component
78 LogItem & Preloader Components
79 AddBtn & AddLogModal Components
80 Edit & Tech Modal Components

Redux For State Management
81 Redux Store & Provider Setup
82 Logs Reducer, Actions & Types
83 Connecting Redux To a Component
84 Add Logs
85 Delete Logs
86 Update Logs
87 Search Logs

Technicians State & Components
88 Techs Reducer, Action & Component
89 Tech Options Select Component
90 Add Technicians
91 Delete Technicians