The Complete React Web App Developer Course

The Complete React Web App Developer Course

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 29.5 Hours | 7.81 GB

Learn React & Redux By Creating 5 Apps

This course is project-based. You’re responsible for writing code in every video as well as completing challenges I’ve designed to help test and reinforce what you’ve learned. This course is about creating, not watching!

You’ll be programming and deploying three React apps:

  • A weather application
  • A countdown/timer app
  • A todo application with social login and Firebase integration

This course covers more than just React. You’ll learn about the rich ecosystem of 3rd-party tools, such as:

  • React
  • Redux
  • Webpack
  • Firebase
  • Git/GitHub
  • Heroku
  • Chrome developer tools
  • React and Redux developer tools
  • Karma
  • Mocha
  • Foundation
  • Axios
  • And more!
Table of Contents

Intro
1 Why Should I Learn React

Getting Setup
2 Installing Atom
3 Installing Git Bash Important For Windows Users
4 Intro To Command Line
5 Installing Node.js

Hello React
6 Creating Your Web Server
7 Hello React
8 Atom Editor Plugins Optional
9 Your First React Component
10 Learning JSX
11 Component Properties
12 User Events Callbacks
13 Component State
14 Nested Components Part 1
15 Nested Components Part 2
16 Aside Props State
17 Section Challenge

A Better React Project
18 What is Webpack And Installing It
19 Generating Our Bundle
20 The Webpack Config File
21 Adding Babel JSX Support
22 Refactoring Your Components
23 Webpack Custom Package Names
24 Boilerplate Project
25 Bonus Using Experimental JavaScript Features

Routing Our Weather App
26 Front-end Routing
27 Adding React-Router
28 Creating Our Pages
29 Why use Link
30 Creating WeatherForm WeatherMessage
31 Exploring OpenWeatherMap.org
32 ES6 Promises
33 Faking Our Call
34 Making Our API Call
35 Adding Loading Text
36 Debugging The React Developer Tools
37 Source Map Library Issue.html
38 Advanced Debugging
39 ES6 Aside Arrow Functions
40 Refactoring Stateless Functional Components

Deploying Your App To Production
41 Intro Tools Youll Use
42 Installing Git
43 Adding Git To Your App
44 Joining GitHub Generating SSH Keys
45 Pushing To GitHub
46 Heroku Signup Toolbelt
47 Deploying Your App
48 Feature Workflow
49 Fixing localhost

Styling Your App With Foundation
50 Intro Foundation
51 Installing Foundation
52 Styling Navigation
53 Styling Examples Page
54 Styling About Page
55 Styling Weather Page
56 Adding A Modal For Errors Part 1
57 Adding A Modal For Errors Part 2
58 Adding Custom CSS
59 Setting Up SCSS
60 Linking To Location Wiring Up Nav Form
61 Fixing The Error Modal
62 Updating Our Boilerplate

Testing Component Lifecycle
63 Project Overview
64 Component Breakdown
65 Adding The Navigation Bar
66 Customizing The Navigation Bar
67 Basics Of Testing
68 Configuring Tests With Webpack React
69 Adding Routes Container Components
70 Clock Component
71 Clock Component Part 2
72 Countdown Form
73 Testing Our Form With Spies
74 Starting The Count Down
75 Testing That Counting Down Works
76 Creating Our Controls
77 Pausing Starting and Resetting
78 Component Lifecycle
79 Testing Pausing Resetting
80 Project Setup Timer
81 Project Solution Timer Part 1
82 Project Solution Timer Part 2
83 Foundation Settings Karma Issues
84 Final Boilerplate

Building A Todo Application
85 App Demo Learning Goals
86 Creating The Root Component TodoApp
87 Rendering Lists In React TodoList Todo
88 Testing List Components
89 Challenge AddTodo Is On You
90 Setting Up The Filter Component
91 Testing The Filter Component
92 The Spread Operator
93 Wiring Up AddTodo
94 Toggling Todos
95 Testing Toggling Todos
96 Storing Todos In Local Storage
97 Testing Our TodoAPI
98 Wiring Up Search Part 1
99 Wiring Up Search Part 2
100 Dates With Moment
101 Adding Created At Completed At Timestamps
102 Styling TodoApp AddTodo TodoSearch
103 Styling Todo

Redux
104 Why Redux
105 Installing Redux
106 Pure Functions
107 Creating A Reducer Getting App State
108 Dispatching Handling Actions
109 Subscribing To Changes Debugging
110 Redux Actions Add To Arrays
111 Redux Actions Removing From Arrays
112 Working With Multiple Reducers
113 Creating Action Generators
114 Asynchronous Actions
115 Organizing Your Actions and Reducers
116 Todo Creating Testing Actions
117 Todo SearchText ShowCompleted Reducers
118 Todo Todos Reducer
119 Todo Setting Up The Redux Store
120 React-Redux Provider Connect
121 Testing Reduxed Components
122 Testing Reduxed Components Part 2
123 Refactoring AddTodo
124 Refactoring TodoSearch
125 Setting Up Local Storage With Redux

Databases Authentication With Firebase
126 Setting Up Firebase
127 Saving Data
128 Updating Data
129 Removing Navigating Data
130 Fetching Your Data
131 Working With Arrays
132 Async Actions Adding Todos To Firebase
133 Testing Async Actions
134 Saving Todo Updates
135 Testing Todo Updates
136 Fetch Todos From Firebase
137 Testing startAddTodos
138 Webpack On Heroku
139 Environment Variables Separate Databases
140 Heroku Environment Variables
141 Adding Login Page Logout Button
142 Firebase Login Logout
143 Private Pages Redirects
144 Login Reducer Actions
145 Firebase Security Rules
146 Testing With Authentication
147 Clearing Todos on Logout

ES6 Classes and React.Component – Just added
148 Section Intro
149 Raw ES6 Classes Part I
150 Raw ES6 Classes Part II
151 Extending and Rendering
152 Setting Initial State
153 Prop types and default prop values
154 Goodbye autobinding
155 Higher Order Functions
156 Higher Order Components
157 Project Setup
158 Project Solution