Building Applications with React and Redux in ES6

Building Applications with React and Redux in ES6

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6h 13m | 1.07 GB

Learn how to use Redux, React Router, and ES6 to build a real world app with React. Use Webpack, Babel, ESLint, npm scripts, Mocha, Enzyme, and more to build a rich, one step, custom React development environment and build process from the ground up.

React is a library with so much power, but so few strong opinions. So building something significant requires a large number of decisions and work to build the foundation. In Building Applications with React and Redux in ES6, you will learn how to use Redux, React Router, and ES6 to build powerful and fast React applications from the ground up, as well as use Webpack, Babel, ESLint, npm scripts, Mocha, Enzyme. Finally, you will create a rapid feedback development environment that runs linting and tests, transpiles ES6 to ES5, starts up Express as a webserver, opens the application, and hot reloads changes every time you hit save and deploys with a single command. When you’re finished with this course, you will have a foundational knowledge of React and Redux in ES6 that will help you as you move forward building robust, scalable React applications using a custom, rapid feedback development environment.

Table of Contents

01 – Course Overview – Course Overview

Intro
02 – Course Outline
03 – Who Is This Course For
04 – How Is This Course Different from the React and Flux course
05 – Why Redux
06 – Summary

Environment Setup
07 – Intro
08 – Environment Overview
09 – Versions Used in This Course
10 – Hot Reloading
11 – Install Node
12 – Create package.json
13 – Editors
14 – Install npm Packages
15 – Introduce npm Scripts
16 – Create src Directory
17 – Set up Webpack
18 – Set up editorconfig
19 – Set up Babel
20 – Set up Express
21 – Create Start Script
22 – Create Start Message
23 – Set up ESLint
24 – Create Parallel Scripts
25 – Set up Testing
26 – Add Test Scripts
27 – Summary

React Component Approaches
28 – Intro
29 – Four Ways to Create React Components
30 – ES5 Create Class Component
31 – ES6 Class Component
32 – ES5 Stateless Component
33 – ES6 Stateless Component
34 – When Should I Use Each Style
35 – Other Ways to Create Components
36 – Container vs. Presentation Components
37 – Summary

Initial App Structure
38 – Intro
39 – Create Initial Components
40 – Create App Layout
41 – Configure Routing
42 – Update Entry Point
43 – Create Styles
44 – Create Header
45 – Create Course Page
46 – Summary

Intro to Redux
47 – Intro
48 – Do I Need Redux
49 – Three Core Redux Principles
50 – Flux Similarities
51 – Flux Differences
52 – Redux Flow Overview
53 – Summary

Actions, Stores, and Reducers
54 – Intro
55 – Actions
56 – Store
57 – What Is Immutability
58 – Why Immutability
59 – Handling Immutability
60 – Reducers
61 – Summary

Connecting React to Redux
62 – Intro
63 – Container vs. Presentational Components
64 – React-redux Introduction
65 – mapStateToProps
66 – mapDispatchToProps
67 – A Chat with Redux
68 – Summary

Redux Flow
69 – Intro
70 – Create Simple Add Course Form
71 – Binding in ES6
72 – Actions
73 – Reducers
74 – Root Reducer
75 – Store
76 – Instantiate Store and Provider
77 – Connect Container
78 – Step Through Redux Flow
79 – mapDispatchToProps Manual Mapping
80 – bindActionCreators
81 – Container Structure Review
82 – Action Type Constants
83 – Summary

Async in Redux
84 – Intro
85 – Why a Mock API
86 – Async Library Options
87 – Thunk Overview
88 – Mock API Setup
89 – Remove Inline Form
90 – Add Thunk to Store
91 – Create Load Courses Thunk
92 – Action Naming Conventions
93 – Load Courses in Reducer
94 – Dispatch Action on Page Load
95 – Create Course List Component
96 – Summary

Async Writes in Redux
97 – Intro
98 – Create Manage Course Page
99 – Create Manage Course Form
100 – Create Form Input Components
101 – Use Manage Course Form
102 – Create Author Actions
103 – Create Author Reducer
104 – Map Author Data for Dropdown
105 – Create Form Change Handler
106 – Create Save Course Thunk
107 – Handle Creates and Updates in Reducer
108 – Dispatch Create and Update
109 – Redirect via React Router Context
110 – Populate Form via mapStateToProps
111 – Update State via componentWillReceiveProps
112 – Summary

Async Status and Error Handling
113 – Intro
114 – Create Preloader Component
115 – Create AJAX Status Actions
116 – Create AJAX Status Reducer
117 – Call Begin AJAX in Thunks
118 – Hide Preloader Based on Status
119 – Use Promises to Wait for Thunks
120 – Create Form Submission Loading Indicator
121 – Display Save Notification
122 – Error Handling
123 – Summary

Testing React
124 – Intro
125 – Testing Frameworks
126 – Helper Libraries
127 – Where to Test
128 – Testing React with React Test Utils
129 – Testing React with Enzyme
130 – Summary

Testing Redux
131 – Intro
132 – Testing Connected React Components
133 – Testing mapStateToProps
134 – Testing Action Creators
135 – Testing Reducers
136 – Testing Thunks
137 – Testing the Store
138 – Summary

Production Builds
139 – Intro
140 – Setup Production Redux Store
141 – Setup Webpack
142 – Setup HTML Build
143 – Setup Dist Server
144 – Setup npm Scripts
145 – Review Results
146 – Final Challenge