by Brad Traversy | Publisher: Packt Publishing | Release Date: February 2019 | ISBN: 9781838645274

Learn and master React with the Context API + Redux and build a real-world project with Firebase/FirestoreAbout This VideoLearn Redux and React with the Context APIBuild a real-world project with Firebase/FirestoreIn DetailIn this course, you will learn to master React 16.3+ concepts including the new Context API as well as Redux. We 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 to store data.The following are some of the things you will learn in this course:What is React?Dev environment setupES6+ concepts - classes, arrow functions, destructuring, async/awaitClass-based and functional componentsJSX syntax and expressionsComponent propsManaging component level stateContext API for app level stateComponent life cycleHTTP RequestsRedux store setupRedux reducers and actionsRedux Firebase/Firestore integrationAll the code and supporting files for this course are available at: https://github.com/PacktPublishing/React-Front-to-BackDownloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

1. Chapter 1 : Course Introduction
   • Welcome To The Course 00:03:28
   • Course & Projects Outline 00:06:31
2. Chapter 2 : Getting Started
   • What Is React? 00:05:07
   • Environment Setup 00:07:25
   • ES6 Refresher - Part 1 00:12:55
   • ES6 Refresher - Part 2 00:08:42
   • ES6 Refresher - Part 3 00:07:38
   • Create React App vs Manual Setup 00:04:44
   • Installing & Using The CLI 00:04:35
   • A Look At The Initial React Files & How They Work 00:07:09
3. Chapter 3 : Components, JSX & Props
   • Thinking In Components 00:05:34
   • What Is JSX? 00:04:56
   • JSX Expressions 00:05:29
   • Creating Your First Component 00:04:49
   • Functional Components 00:03:37
   • Working With Props 00:05:07
   • Typechecking With PropTypes 00:06:07
   • CSS In React 00:05:29
   • Adding Bootstrap 00:07:56
4. Chapter 4 : State & The Context API
   • Creating State 00:12:57
   • Events In React 00:09:41
   • Changing State 00:09:48
   • Changing State From Another Component 00:09:38
   • Using The Context API & Provider State 00:11:24
   • Adding A Context Reducer For Actions 00:13:53
5. Chapter 5 : Working With Forms
   • Creating A Form With State 00:10:13
   • Controlled Components & onChange 00:09:08
   • Uncontrolled Components & Refs 00:07:41
   • Form Submit Action To Context 00:12:26
   • TextInputGroup Component For DRY Code 00:11:05
   • Error Checking & Display 00:10:24
6. Chapter 6 : React Router v4
   • React Router Setup 00:08:06
   • Links, Params & Redirect 00:07:37
   • 404 Not Found Page 00:03:48
7. Chapter 7 : Lifecycle, HTTP & Deployment
   • Lifecycle Methods 00:10:59
   • GET Requests 00:07:37
   • POST & DELETE Requests 00:09:54
   • Using Async/Await 00:08:19
   • EditContact Component & Fetch Contact 00:10:33
   • PUT Request & Update Action 00:09:10
   • Deploy To Github Pages 00:07:29
8. Chapter 8 : Learning Redux
   • A Note On Redux 00:03:53
   • App Starting Point For Redux 00:04:02
   • Redux Store Setup & Contact Reducer 00:14:48
   • Connecting Components & Dispatching Actions 00:11:28
   • Creating A Separate Actions File 00:03:52
   • Delete & Add Contact Action 00:13:45
9. Chapter 9 : Redux Thunk & HTTP
   • GET Request Dispatch 00:03:31
   • POST & DELETE Request Dispatch 00:09:13
   • Get Single Contact For Edit 00:09:51
   • PUT Request & Dispatch 00:05:34
   • Deploy To Apache 00:04:33
10. Chapter 10 : Client Panel Firebase Project - Part 1
    • App Intro & Demo 00:05:00
    • Firebase/Firestore Setup 00:06:22
    • Setup & AppNavbar Component 00:13:30
    • Dashboard, Sidebar & Clients Component 00:16:40
    • React-Redux-Firebase Setup 00:16:10
    • Connect Clients Component To Firestore 00:19:15
    • Add Client To Firestore 00:21:20
    • Client Details Component 00:18:58
    • Balance Update & Delete 00:16:42
    • Edit Client In Firestore 00:15:40
11. Chapter 11 : Client Panel Firebase Project - Part 2
    • Login Functionality 00:15:34
    • Logout & Navbar Update 00:11:45
    • Route Protection 00:10:10
    • Notify State & Alert Component 00:20:27
    • Settings Reducer & Actions 00:09:44
    • Settings Component 00:19:09
    • Persist Settings To LocalStorage 00:10:43
    • Implementing Settings 00:08:46
    • Register Functionality 00:07:44
    • Deploy To Firebase 00:06:17