The Complete React Redux Bootcamp With ES6

The Complete React Redux Bootcamp With ES6

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6 Hours | 761 MB

Learn how the complete react-redux framework with ES6 by building your own course management application.

I really love react, and if you’re watching this then I bet you do too. In this course you will learn all the concepts, terminologies, and tools related to the react and the redux framework. We start off by setting up an awesome development environment that you will be able to use any time down the line for any future applications saving you hours! We also briefly go over some of the core concepts of react just to refresh your memory. The, we dive into the core application by covering the following topics.

  • How redux is similar and different to Flux
  • How Actions, Stores, Reducers work in the redux flow
  • What is immutability and how it works with Redux
  • Container vs Presentational Components
  • How the redux flow works within our application
  • How mapStateToProps and mapDispatchToProps works
  • Handling async requests in react and redux using Thunk
  • Handling errors elegantly in react and redux
  • Testing react and redux using the 2 most popular testing libraries
  • Building a productions ready environment
  • Here’s everything you will get out of this course.

What You Will Learn

  • You will learn the fundamentals of the popular react-redux framework so that you can list this new technology/tool on your resume.
  • You will work on a real life application by building a course management application
  • You will receive a FREE starter kit that will save you hours when starting any new react project
  • You will receive access to monthly office hours hosted by the instructor so you can ask questions and stay engaged
Table of Contents

Course Introduction
1 Introduction
2 Who is this course for

Setting Up The Development Environment
3 Introduction
4 Setting Up Our Development Environment
5 Tools and Versions Used Throughout The Course
6 How to Use Hot Reloading With React
7 Installing Node
8 Creating A package.json File
9 Which Editor Should You Choose
10 Installing NPM packages
11 Setting Up our File Tree
12 Setting Up Webpack Config File
13 Creating an Editor Config File
14 Setting Up bablerc
15 Setting Up Express
16 Writing a Start Script
17 Writing a Start Message
18 Setting Up ESLint
19 Writing Parallel Scripts
20 Setting Up Tests
21 Adding a Test Script

React Components
22 Introduction
23 Ways to Create React Components
24 Class Components
25 ES6 Class Components
26 ES5 Stateless Components
27 Stateless Components
28 When To Use Each Style
29 Container vs Presentational Components
30 Summary

App Structure
31 Introduction
32 Creating Initial Components
33 Creating the App Layout
34 Configure Routing
35 Update Entry Point
36 Create Styles
37 Creating a Header
38 Create Course Page
39 Summary

Intro To Redux
40 Introduction
41 Do I Need Redux
42 Core Redux Components
43 Flux Similarities
44 Flux Differences
45 Redux Flow Overview
46 Summary

Actions Stores and Reducers
47 Introduction
48 Actions
49 Stores
50 What is Immutability
51 Why Immutability
52 Handling Immutability
53 Reducers
54 Summary

Connecting React to Redux
55 Introduction
56 Container vs Presentational Component
57 React-Redux Introduction
58 mapStateToProps
59 mapDispatchToProps
60 A Chat With Redux
61 Summary

Redux Flow
62 Introduction
63 Create Simple Add Course Form
64 Binding in ES6
65 Actions
66 Reducer
67 Root Reducer
68 Store
69 Connect Components
70 Step Through Redux Flow
71 mapDispatchToProps Manual
72 bindActionCreators
73 Container Structure Review
74 Action Type Constants
75 Summary

Async in Redux
76 Introduction
77 Why A Mock API
78 Async Library Options
79 Thunk Overview
80 Mock API Setup
81 Remove Inline Form
82 Add Thunk to Store
83 Create Load Courses Thunk
84 Action Naming Convention
85 Load Courses in Reducer
86 Dispatch Action on Page Load
87 Create Course List Component
88 Summary

Async Writes in Redux
89 Introduction
90 Create Manage Course Page
91 Create Manage For
92 Create Form Input Components
93 Manage Course Form P1
94 Create Author Actions
95 Create Author Reducer
96 Map Author Data for Dropdown
97 Create Form Change Handler
98 Create Save Thunk
99 Handle Create and Update in Reducer
100 Dispatch Create and Update
101 Redirect via react redux contextTypes
102 Populate Form via mapStateToProps
103 Update state via componentWillReceiveProps
104 Summary

Async status and error handling
105 Introduction
106 Create Preloader Component
107 Create AJAX Status Actions
108 Create AJAX Status Reducer
109 Call Begin AJAX in Thunks
110 Hide Preloader Based on Status
111 Use Promises to Wait for Thunks
112 Create Form Submission Loading Indicator
113 Display Save Notification
114 Error Handling
115 Summary

Testing React
116 Introduction
117 Testing Frameworks
118 Helper Libraries
119 Where to Test
120 Testing React with React Test Utils
121 Testing React via Enzyme
122 Summary

Testing Redux
123 Introduction
124 Testing Connected React Components
125 Testing mapStateToProps
126 Testing Action Creators
127 Testing Reducers
128 Testing Thunks

Production Builds
129 Setup Production Redux Store
130 Setup Webpack
131 Setup HTML Build
132 Setup Dist Server
133 Setup npm scripts
134 Review Results