React Front To Back

React Front To Back

React Front To Back

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 11.5 Hours | 5.37 GB

Learn & Master React With The Context API + Redux & Build a Real World Project With Firebase/Firestore

In this course you will learn to master React 16.3+ concepts including the new Context API as well as Redux. We will target certain concepts while progressively building real applications. Whether you have never touched React or have been working with it for a while and want to learn more and build some cool stuff, this course is for you. The final project will be a React/Redux client management panel which uses Firebase for authentication and Firestore for storing data.

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

  • What is React?
  • Dev Environment Setup
  • ES6+ Concepts – Classes, Arrow Functions, destructuring, async/await
  • Class Based & Functional Components
  • JSX Syntax & Expressions
  • Component Props
  • Managing Component Level State
  • Context API For App Level State
  • Component Lifecycle
  • HTTP Requests
  • Redux Store Setup
  • Redux Reducers & Actions
  • Redux Firebase/Firestore Integration

What Will I Learn?

  • Master React Concepts – Components, State, Props, etc
  • Learn & Use The Context API
  • Learn Redux From Scratch
  • Build & Deploy a Client Management App With React, Redux & Firebase/Firestore
  • Master ES6+ Features Like Arrow Functions, Spread & Async Await
  • Suitable For Both Beginners & Intermediate React Developers
Table of Contents

Course introduction
1 Welcome To The Course
2 Course _ Projects Outline

Getting Started
3 What Is React
4 Setting Up Our Environment
5 ES6 Refresher – Part 1
6 ES6 Refresher – Part 2
7 ES6 Refresher – Part 3
8 Create React App vs Webpack Custom
9 Installing _ Using Create React App
10 A Look At The Initial React Files

JSX, Components _ Props
11 Thinking In Components
12 What Is JSX
13 JSX Expressions
14 Creating Your First Component
15 Functional Components
16 Working With Props
17 Typechecking With PropTypes
18 CSS In React
19 Adding Bootstrap

State _ The Context API
20 Creating State
21 Events In React
22 Changing State
23 Changing State From Another Component
24 Using The Context API
25 Adding a Context Reducer For Actions

Working With Forms
26 Creating a Form With State
27 Controlled Components _ onChange
28 Uncontrolled Components _ refs
29 Form Submit Action To Context
30 TextInputGroup Component For DRY Code
31 Error Checking _ Display

React Router v4
32 React Router Setup
33 Links, Params _ Redirects
34 404 Not Found Page

Lifecycle, HTTP _ Deployment
35 Lifecycle Methods
36 GET Requests
37 POST _ DELETE Requests
38 Using Async Await
39 EditContact Component _ Fetch Contact
40 PUT Request _ Update Action
41 Deploying To Github Pages

Learning Redux
42 A Note On Redux
43 Setting Up The Redux Starting Point
44 Redux Store Setup _ Contact Reducer
45 Connecting Components _ Dispatching Actions
46 Creating a Separate Actions File
47 Delete _ Add Contact Action

Redux, Thunk _ HTTP
48 GET Request Dispatch
49 POST _ DELETE Request Dispatch
50 Get Single Contact For Edit
51 PUT Request _ Dispatch
52 Deploy To Apache

Client Panel Project – Part 1
53 App Intro _ Demo
54 Firebase Setup
55 Setup _ AppNavbar Component
56 Dashboard, Sidebar _ Clients
57 React-Redux-Firebase Setup
58 Connect Clients To Firestore
59 Add Client To Firestore
60 Client Details Component
61 Balance Update _ Delete
62 Edit Client

Client Panel Project – Part 2
63 Login Functionality
64 Logout _ Navbar Update
65 Route Protection
66 Notify State _ Alert Component
67 Settings Reducer _ Actions
68 Settings Component
69 Persist Settings To LocalStorage
70 Implementing Settings
71 Register Functionality
72 Deploy To Firebase

Download