The Complete React Web Developer Course (with Redux)

The Complete React Web Developer Course (with Redux)
The Complete React Web Developer Course (with Redux)
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 36 Hours | 4.09 GB

Learn how to build and launch React web applications using React v16, Redux, Webpack, React-Router v4, and more!

This course was just updated to support React v16 (React Fiber)!

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:

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

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

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 Source Maps with Webpack
49 Webpack Dev Server
50 ES6 class properties
51 What Is Webpack
52 Avoid Global Modules
53 Installing & Configuring Webpack
54 ES6 importexport
55 Default Exports
56 Importing npm Modules
57 Setting up Babel with Webpack
58 One Component per File

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 Mobile Considerations
65 Bonus Favicon
66 Setting up Webpack with SCSS
67 Architecture and Header Styles
68 Reset That $#!
69 Theming with Variables
70 Big Button & Options List
71 Styling the Options List
72 Styling Option Item
73 Styling React-Modal

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 Working with Multiple Reducers
85 ES6 Spread Operator in Reducers
86 Spreading Objects
87 Wrapping up Our Reducers
88 Filtering Redux Data
89 Sorting Redux Data
90 Why Do We Need Something Like Redux
91 Setting up Redux
92 Dispatching Actions
93 Subscribing and Dynamic Actions
94 ES6 Object Destructuring
95 ES6 Array Destructuring
96 Refactoring and Organizing
97 Reducers

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

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

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

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

Firebase with Redux
151 Section Intro Firebase with Redux
152 Update Expense
153 Asynchronous Redux Actions
154 Testing Async Redux Actions Part I
155 Testing Async Redux Actions Part II
156 Creating a Separate Test Database
157 Heroku Environment Variables
158 Fetching Expenses Part I
159 Fetching Expenses Part II
160 Remove 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 Adding Loader
172 Babel Polyfill
173 Final Deployment
174 Styling Login Page
175 Styling Buttons
176 Styling Summary Area
177 Styling List Filters
178 Styling Inputs
179 Styling Expense Form
180 Styling Expenses List Part I
181 Styling Expenses List Part II

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

Free Mini-Courses
188 Free Mini-Courses