The Complete React Developer Course (w/ Hooks and Redux)

The Complete React Developer Course (w/ Hooks and Redux)

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 39 Hours | 6.00 GB

Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more! This course was just updated to support React v16, React Hooks, the Context API, and more! Have you tried to learn React before? It’s easy to go down the rabbit hole of libraries and tools only to come out of it not knowing how to build and launch a real-world React application. You get things configured, but you’re not sure how the libraries fit together (or if you’re even using the right one). Sound familiar? I built this course to show you how you can build and launch real-world React web applications. The Complete React Web Developer Course 2 starts with the fundamentals and covers everything you’ll need to build and launch React web apps. You’ll see what it takes to build and launch a React app, from the first line of code to the final production deployment. This course was designed around one goal: turning you into a professional React developer capable of developing, testing, and deploying real-world production applications. You’ll learn React by doing, not watching. From the first videos you’ll be building out each project as well as completing programming challenges I’ve designed to test and reinforce what you’ve learned. Throughout the course you’ll build two React web apps: The first app, a decision-making app called Indecision, is our starter application. You’ll learn the fundamentals of React while seeing exactly what it takes to get a React app up and running. The second app, an expense manager called Budget, has all the features you’d expect from a real application. You’ll set up authentication, user accounts, routing, testing, form validation, database storage, and more. Over eighteen sections you’ll learn:
  • React
  • Redux
  • React-Router
  • Webpack
  • Babel
  • Testing with Jest
  • Enzyme
  • App Debugging
  • App Deployment
  • Firebase
  • Authentication
  • Git/GitHub
  • ES6/ES7
  • And many more tools
What you’ll learn
  • Build, test, and launch React apps
  • Use cutting-edge ES6/ES7 JavaScript
  • Setup authentication and user accounts
  • Deploy your React apps live to the web
  • Learn the latest React libraries and tools
  • Master React, Redux, React-Router, and more
+ Table of Contents

1 Welcome & Asking Good Questions
2 Why should I learn React

Setting up Your Environment
3 Section Intro Setting up Your Environment
4 Installing Visual Studio Code
5 Installing Node.js & Yarn

Hello React
6 Section Intro Hello React
7 Setting up a Web Server
8 Hello React
9 Setting up Babel
10 Exploring JSX
11 JSX Expressions
12 Conditional Rendering in JSX
13 ES6 Aside const and let
14 ES6 Aside Arrow Functions
15 ES6 Aside Arrow Functions Part II
16 Events and Attributes
17 Manual Data Binding
18 Forms and Inputs
19 Arrays in JSX
20 Picking an Option
21 Build It Visibility Toggle

React Components
22 Section Intro React Components
23 Thinking in React
24 ES6 Classes Part I
25 ES6 Classes Part II
26 Creating a React Component
27 Nesting Components
28 Component Props
29 Events & Methods
30 Method Binding
31 What Is Component State
32 Adding State to Counter App Part I
33 Adding State to Counter App Part II
34 Alternative setState Syntax
35 Build It Adding State to VisibilityToggle
36 Indecision State Part I
37 Indecision State Part II
38 Summary Props vs. State

Stateless Functional Components
39 Section Intro Stateless Functional Components
40 The Stateless Functional Component
41 Default Prop Values
42 React Dev Tools
43 Removing Individual Options
44 Lifecycle Methods
45 Saving and Loading Options Data
46 Saving and Loading the Count

47 Section Intro Webpack
48 What Is Webpack
49 Avoid Global Modules
50 Installing & Configuring Webpack
51 ES6 import export
52 Default Exports
53 Importing npm Modules
54 Setting up Babel with Webpack
55 One Component per File
56 Source Maps with Webpack
57 Webpack Dev Server
58 ES6 class properties

Using a Third-Party Component
59 Section Intro Using a Third-Party Component
60 Passing Children to Component
61 Setting up React-Modal
62 Bonus Refactoring Other Stateless Functional Components

Styling React
63 Section Intro Styling React
64 Setting up Webpack with SCSS
65 Architecture and Header Styles
66 Reset That $#!
67 Theming with Variables
68 Big Button & Options List
69 Styling the Options List
70 Styling Option Item
71 Styling React-Modal
72 Mobile Considerations
73 Bonus Favicon

74 Section Intro React Router
75 Server vs. Client Routing
76 Setting Up Budget App
77 React-Router 101
78 Setting up a 404
79 Linking Between Routes
80 Organizing Our Routes
81 Query Strings and URL Parameters
82 Build It Router for Portfolio Site

83 Section Intro Redux
84 Why Do We Need Something Like Redux
85 Setting up Redux
86 Dispatching Actions
87 Subscribing and Dynamic Actions
88 ES6 Object Destructuring
89 ES6 Array Destructuring
90 Refactoring and Organizing
91 Reducers
92 Working with Multiple Reducers
93 ES6 Spread Operator in Reducers
94 Spreading Objects
95 Wrapping up Our Reducers
96 Filtering Redux Data
97 Sorting Redux Data

React with Redux
98 Section Intro Connecting React and Redux
99 Organizing Redux
100 The Higher Order Component
101 Connecting Store and Component with React-Redux
102 Rendering Individual Expenses
103 Controlled Inputs for Filters
104 Dropdown for Picking SortBy
105 Creating Expense Add Edit Form
106 Setting up a Date Picker
107 Wiring up Add Expense
108 Wiring up Edit Expense
109 Redux Dev Tools
110 Filtering by Dates

Testing Your Application
111 Section Intro Testing React Components
112 Setting up Jest
113 Testing Expenses Action Generators
114 Testing Filters Action Generators
115 Testing Expenses Selector
116 Testing Filters Reducer
117 Testing Expenses Reducer
118 Snapshot Testing
119 Enzyme
120 Snapshot Testing with Dynamic Components
121 Mocking Libraries with Jest
122 Testing User Interaction
123 Test Spies
124 Testing AddExpensePage
125 Testing EditExpensePage
126 Testing ExpenseListFilters
127 Testing ExpenseListFilters Part II

Deploying Your Apps
128 Section Intro Deploying Your Apps
129 Installing Git
130 What is Git
131 Integrating Git into Our Project
132 Setting up SSH and Github
133 Production Webpack
134 Creating Separate CSS Files
135 A Production Web Server with Express
136 Deploying with Heroku
137 Regular vs Development Dependencies
138 New Feature Workflow
139 Build It Adding Total Selector
140 Build It Adding Summary Component

Firebase 101
141 Section Intro Firebase 101
142 Getting Firebase
143 Writing to the Database
144 ES6 Promises
145 Promises with Firebase
146 Removing Data from Firebase
147 Updating Data
148 Fetching Data From Firebase
149 Array Data in Firebase Part I
150 Array Data in Firebase Part II

Firebase with Redux
151 Section Intro Firebase with Redux
152 Asynchronous Redux Actions
153 Testing Async Redux Actions Part I
154 Testing Async Redux Actions Part II
155 Creating a Separate Test Database
156 Heroku Environment Variables
157 Fetching Expenses Part I
158 Fetching Expenses Part II
159 Remove Expense
160 Update Expense

Firebase Authentication
161 Section Intro Firebase Authentication
162 Login Page and Google Authentication
163 Logging Out
164 Redirecting Login or Logout
165 The Auth Reducer
166 Private Only Routes
167 Public Only Routes
168 Private Firebase Data
169 Data Validation and Deployment

Styling Budget App
170 Section Intro Styling Budget App
171 Styling Login Page
172 Styling Buttons
173 Styling Summary Area
174 Styling List Filters
175 Styling Inputs
176 Styling Expense Form
177 Styling Expenses List Part I
178 Styling Expenses List Part II
179 Adding Loader
180 Babel Polyfill
181 Final Deployment

What Now
182 Section Into What Now
183 Creating the Final Boilerplate
184 Budget App Enhancements
185 Indecision App Enhancements
186 New App Idea Blog
187 Until Next Time

[New!] Hooks, Context, Fragments, and More
188 Section Intro
189 Using Create React App
190 The useState Hook
191 useState vs. setState
192 Complex State with useState
193 The useEffect Hook
194 useEffect Dependencies
195 Cleaning up Effects
196 The useReducer Hook
197 The Context API & useContext Hook Part I
198 The Context API & useContext Hook Part II
199 Fragments
200 Creating Custom Hooks